![Screenshot 2024-05-31 at 8 33 56โฏAM](https://private-user-images.githubusercontent.com/69771365/335635835-3f73d7c0-f82a-4997-b01e-eaa043e95113.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ5NjM1MTgsIm5iZiI6MTcyNDk2MzIxOCwicGF0aCI6Ii82OTc3MTM2NS8zMzU2MzU4MzUtM2Y3M2Q3YzAtZjgyYS00OTk3LWIwMWUtZWFhMDQzZTk1MTEzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI5VDIwMjY1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA5MDYwYTcwNWEyYTQzNjQ2MDMxMTFjOGRkOGExNGY0YTFmZjczYWFkYTI3ZjYxMThmY2NiYmFkNWVmMDAwMGEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ZlgoDWgVbf1PPYEXrLJQzyab49nIvsdb_p8q4CGLdb4)
Sandbox is an open-source cloud-based code editing environment with custom AI code autocompletion and real-time collaboration.
Check out the Twitter thread with the demo video!
Install dependencies
cd frontend
npm install
Add the required environment variables in .env
(example file provided in .env.example
). You will need to make an account on Clerk and Liveblocks to get API keys.
Then, run in development mode
npm run dev
The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a service binding to the R2 storage worker.
Install dependencies
cd backend/server
npm install
Add the required environment variables in .env
(example file provided in .env.example
)
Project files will be stored in the projects/<project-id>
directory. The middleware contains basic authorization logic for connecting to the server.
Run in development mode
npm run dev
This directory is dockerized, so feel free to deploy a container on any platform of your choice! I chose not to deploy this project for public access due to costs & safety, but deploying your own for personal use should be no problem.
Directories:
/backend/database
: D1 database/backend/storage
: R2 storage/backend/ai
: Workers AI
Install dependencies
cd backend/database
npm install
cd ../storage
npm install
cd ../ai
npm install
Read the documentation to learn more about workers.
For each directory, add the required environment variables in wrangler.toml
(example file provided in wrangler.example.toml
). For the AI worker, you can define any value you want for the CF_AI_KEY
-- set this in other .env
files to authorize access.
Run in development mode
npm run dev
Deploy to Cloudflare with Wrangler
npx wrangler deploy
Thanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free to reach out to @ishaandey_.
Please prioritize existing issues, but feel free to contribute new issues if you have ideas for a feature or bug that you think would be useful.
frontend/
โโโ app
โโโ assets
โโโ components
โโโ lib
backend/
โโโ server
โโโ database/
โ โโโ src
โ โโโ drizzle
โโโ storage
โโโ ai
Path | Description |
---|---|
frontend |
The Next.js application for the frontend. |
backend/server |
The Express websocket server. |
backend/database |
API for interfacing with the D1 database (SQLite). |
backend/storage |
API for interfacing with R2 storage. Service-bound to /backend/database . |
backend/ai |
API for making requests to Workers AI . |
You can fork this repo by clicking the fork button in the top right corner of this page.
git clone https://github.com/<your-username>/sandbox.git
cd sandbox
git checkout -b my-new-branch
Before you create a Pull Request, please check that you use the Conventional Commits format
It should be in the form category(scope or module): message
in your commit message from the following categories:
-
feat / feature
: all changes that introduce completely new code or new features -
fix
: changes that fix a bug (ideally you will additionally reference an issue if present) -
refactor
: any code related change that is not a fix nor a feature -
docs
: changing existing or creating new documentation (i.e. README, docs for usage of a lib or cli usage) -
chore
: all changes to the repository that do not fit into any of the above categoriese.g.
feat(editor): improve tab switching speed