|
1 | | -# Code Playground |
| 1 | +# Code Playground (Frontend) |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +This project provides a real-time cloud-based code sync and editing and website developing platform where you can create any code file. It will provide linting in editor and a basic terminal. Edit HTML, CSS and JS and preview your website in built-in web-renderer. |
| 8 | + |
| 9 | +## Tech Stack |
| 10 | + |
| 11 | +**Client:** React, Typescript, Monoco-editor, Socket.io-client, Xtermjs, React reflex |
| 12 | +**Server:** Node, Express, Typescript, Mongoose, Cookie-parser, Socketio |
| 13 | + |
| 14 | +## Features |
| 15 | + |
| 16 | +- Multiple resizable windows |
| 17 | +- Featured code editor |
| 18 | +- Create, update, delete files |
| 19 | +- Realtime cloud sync of code |
| 20 | +- Preview webpage |
| 21 | +- Built-in terminal |
| 22 | + |
| 23 | +## Run Locally |
| 24 | + |
| 25 | +- Clone the project |
| 26 | + |
| 27 | +```bash |
| 28 | +git clone https://github.com/ProdexOne/code-playground-frontend.git |
| 29 | +``` |
| 30 | + |
| 31 | +- Go to the project directory |
| 32 | + |
| 33 | +```bash |
| 34 | +cd code-playground-frontend |
| 35 | +``` |
| 36 | + |
| 37 | +- Install dependencies |
| 38 | + |
| 39 | +```bash |
| 40 | +npm install |
| 41 | +``` |
| 42 | + |
| 43 | +- Update constants in _src/config/index.ts_ file : |
| 44 | + |
| 45 | + `SERVER_URL` |
| 46 | + `SOCKET_URL` |
| 47 | + |
| 48 | + (which are going to be same in most cases) |
| 49 | + |
| 50 | +- Start the server |
| 51 | + |
| 52 | +```bash |
| 53 | +npm run start |
| 54 | +``` |
| 55 | + |
| 56 | +## Optimizations |
| 57 | + |
| 58 | +Code is refactored and project structure is optimized for scalability. Along with react components and pages, context hook for global state and _debounce_ function have also been used. |
| 59 | + |
| 60 | +## Screenshots |
| 61 | + |
| 62 | + |
| 63 | + |
| 64 | +## Feedback |
| 65 | + |
| 66 | +If you have any feedback, please reach out to us at [@AnujS_IN](https://twitter.com/AnujS_IN) |
| 67 | + |
| 68 | +## Authors |
| 69 | + |
| 70 | +- [@ProdexOne](https://www.github.com/ProdexOne) |
| 71 | + |
| 72 | +## Related |
| 73 | + |
| 74 | +Here is the [Code Playground Backend](https://github.com/ProdexOne/code-playground-backend) server. |
| 75 | + |
| 76 | +## License |
| 77 | + |
| 78 | +[MIT](https://choosealicense.com/licenses/mit/) |
0 commit comments