Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ogayanfe/websandbox
An online frontend programming sandbox with integrated browser with live reloading built using react, react-dom, django and the webcontainer api
https://github.com/ogayanfe/websandbox
browser code-editor django django-rest-framework full-stack ide javascript online-editor python react react-router remote-code-execution rest-api typescript web-development webcontainers
Last synced: about 1 month ago
JSON representation
An online frontend programming sandbox with integrated browser with live reloading built using react, react-dom, django and the webcontainer api
- Host: GitHub
- URL: https://github.com/ogayanfe/websandbox
- Owner: ogayanfe
- License: gpl-3.0
- Created: 2023-10-31T13:42:59.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-06-19T17:04:41.000Z (3 months ago)
- Last Synced: 2024-06-20T05:36:27.558Z (3 months ago)
- Topics: browser, code-editor, django, django-rest-framework, full-stack, ide, javascript, online-editor, python, react, react-router, remote-code-execution, rest-api, typescript, web-development, webcontainers
- Language: TypeScript
- Homepage: https://websandboxx.netlify.app
- Size: 753 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
> 
> 