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

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 categories

  e.g. feat(editor): improve tab switching speed

• Next.js
• TailwindCSS
• Shadcn UI
• Clerk
• Monaco
• Liveblocks

• Cloudflare Workers
  • D1 database
  • R2 storage
  • Workers AI
• Express
• Socket.io
• Drizzle ORM