Websandbox - Code. Experiment. Create. The Online Sandbox For Your Programming Ideas.

Build your web application completely on the web. With html, css, javascript and typescript support by default.

Project Demo

• Watch a video demo on Youtube
• Go to project live demo.
• Images are provided at the end of the page.
  

Project Features

• A code editor.
• Live reloading.
• A browser for viewing project output.
• Ability to save your project.
• Ability to view other users work.
• Login and Logout.

Tools

• Python
• Typescript
• Django and Django rest framework
• React
• Vite
• React router
• Webcontainers
• Tailwind css
• Material ui and Material ui icons

Setting up locally

• Clone the project to your local computer using git via command git clone https://github.com/ogayanfe/birdie.git. You can simply download the zip folder and unzip if you don't have git installed.
• cd into the application folder using your terminal.
• cd into the backend direcory via the command cd backend.
• You can create and activate a virtual environment here.
• cd into the backend directory and run the command python3 install -r requirments.txt or python install -r requirements.txt on windows to install requirements.
• You will lead to provide the following environment variables in your prduction environment.
  1. SECRET_KEY - Your django secret key. COMPULSORY.
  2. DEBUG - Whether the code should run in debug mode. It's value is either True or False. Defaults to True
  3. AWS_ACCESS_KEY_ID - Your AWS access key id.
  4. AWS_SECRET_ACCESS_KEY_ID - Your AWS secret access key id.
  5. AWS_STORAGE_BUCKET_NAME - Your AWS bucket name.
  6. USE_S3 - Whether the project should use aws s3 storage. It's value is either True or False. Default to !DEBUG
• Run the command python3 manage.py migrate or python manage.py migrate on windows to load the database.
• Run the command python3 manage.py runserver or python manage.py runserver on windows to start the django development server.
• Go back into the root folder of the repo and cd into the websandbox folder with command cd websandbox
• Run the command npm install to install requirements
• Run the command npm run dev to start the react development server.
• Navigate to the url localhost:5173 on your browser

License

Licensed under GPL-3.0

Image Galary

Landing Page

Dashboard

Demos

Sandbox Editor

Sandbox Editor with output