Developed using React, Node, and mongoDB, Break is an online-code-executor (sandbox environment) where users can not only run their code online, but also save it for later.
Break currently supports all the major programming languages including C, C++, Java, Python, and JavaScript.
A flowchart showcasing an overview of the application flow
- Break is an online-code-executor (sandbox environment) where users can not only run their code online but also save it for later. It currently supports all the major programming languages including C, C++, Java, Python, and JavaScript.
- Break makes use of React to facilitate the frontend of the application, Node & Express as the backend, and MongoDB as the database.
- Migrated the backend from a monolithic to a microservice-based architecture where each module is a completely different API working towards solving a particular problem.
- Indexed the database collections around userID, and codeID respectively for facilitating a faster query response.
- Implemented a JWT-based user-authentication system.
- Have secured all the API routes using the same JWT-verification middleware.
- The frontend of the application is developed keeping in mind all the errors that can occur to prevent application from breaking at any point.
- Implemented caching to enhance user-experience of the application.
- Converted the application into a Progressive Web App to make sure that it is downloadable on any Operating System.
- The backend of this application is designed keeping in mind the MVC-architecture.
- Frontend: React, MaterialUI
- Backend: Node.js (+child processed), Express.js
- User Authentication: JSON-Web-Token
- IDE: VS Code
- Design: Adobe Photoshop, Canva
- API Testing & Documentation: Postman
- Version Control: Git and GitHub
- Database: MongoDB
- Hosting: Vercel
| S.No. | Folder Name | Purpose |
|---|---|---|
| 1. | server | contains all backend code |
| 2. | server/controllers | contains all backend controller code |
| 3. | server/executors | contains all backend code-execution (+child processed) related code |
| 4. | server/middlewares | contains all backend middlewares code |
| 5. | server/model | contains all data models |
| 6. | server/routes | contains all backend API routes code |
| 7. | client | contains all frontend code (React) |
| 8. | readme.md | contains all documentation |
| 8. | LICENSE | contains the offical GNU General Public License issued towards this code |
- Make sure to create an .env file. The structure of the env file is listed in env.exammple
cd server
npm install
node index.js
Now wait for the terminal to show "Connected successfully" message.
Your backend is now active on the PORT 4000
If you want to try a hosted backend service, without having to set-up everything by yourself, use this here as the base. Just make sure you have obtained all the permissions before using the hosted version of the backend.
Please note - some services might not work on the hosted backend.
- Make sure you have node & npm/yarn installed
- Make sure your server is up and running
cd client
npm install
npm run start
You can access the application at http://localhost:3000
-
Login Screen
-
Registration Screen
-
User Dashboard
-
Online IDE
- Deleting the codes - The user will be able to delete his/her saved codes.
- Deleting the account - The user will be able to dlete his/her user-account if he/she doesn't want to continue with Break.
- Adding support for more languages - We have covered almost all the major languages, but I want to extend it to support more languages like Rust, and Swift.
- Using WebRTC and socket, I want to extend Break as an interviewing platform where users would be able to create interview rooms, connect over a video-based call, and share the live code with everyone present in the room.
Read more about the License here