Websandbox - Code. Experiment. Create. The Online Sandbox For Your Programming Ideas.<br/>

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

Project Demo

• Watch a video demo on <a href="https://www.youtube.com/watch?v=mwFe1FtTL7o" target="_blank">Youtube</a>
• Go to <a href="https://websandboxx.netlify.app" target="_blank">project live demo</a>.
• Images are provided at the end of the page.<br/>

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 <a href='https://github.com/ogayanfe/websandbox?tab=GPL-3.0-1-ov-file#GPL-3.0-1-ov-file'>GPL-3.0</a>

Image Galary

Landing Page

Dashboard

<br/> <br/><br/>

Demos

<br/> <br/><br/>

Sandbox Editor

<br/> <br/><br/>

Sandbox Editor with output

<br/> <br/><br/>