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