Cloud Code Editor | @Codedamn Playground Clone.
Cloud code editors are online platforms that allow developers to write, edit, and run code from their web browsers without having to install any software on their local machines. These editors provide an easy and convenient way to collaborate on coding projects with team members who may be located in different parts of the world. Examples of cloud code editors include Codedamn,CodeSandbox, Replit, and Gitpod, which offer various features like live collaboration, real-time code sharing, and cloud-based hosting. With cloud code editors, developers can work on their projects from anywhere with an internet connection, making it easier to code on the go or from remote locations.
While learning full stack development on codedamn, I came across their impressive code editor for practicing problem questions and building projects. The course curriculum included building clone projects of live running applications like Discord, Twitter, Tesla, and many more.
I was inspired to create a clone of codedamn playground clone for myself, which led me to research online code editors, read articles, and gain a deeper understanding of their functioning. Once I had a rough idea of how it would work, I divided the project into smaller parts such as file retrieval, integrating editors, and integrating the terminal. I started building and testing these pieces individually before integrating them together, using the "divide and conquer" approach. After encountering and fixing numerous errors, creating and destroying Docker containers, and gaining a deep understanding of Kubernetes and its networking, I was finally able to complete the project after many days of hard work.
We start with a very basic three tier architecture, we have frontend with React, backend with Node and for Database we have mongodb and each playground we spin up a docker container in a kubernetes cluster.
We have different components in our architecture, explanation of each component :
- Frontend : When the user comes to the application frontend is the first which shows up, it establish a connection between backend and request to create a playground, once container is ready then it establish a web socket connection between playground container and shows files, code editor, terminal and output screen.
- Backend : It server the request of frontend and give api call to kubernetes master to create and destroy container based on user requests.
- Database and Storage : We save the playground information and user info to the mongodb database and the files that the user create or edit we create a zip of demo app and save into block storage like AWS S3.
- Kubernetes and container : We give instructions to kubernetes master to spin up a docker container(playground container) which contains demo app and utility service like web socket server and node-pty for terminal.
- Frontend Functions : Frontend role is to establish a web socket connection to the playground container, connect terminal with xterm client, show files and directory of demo app, give user a editor show that he can create and edit the file and show the desired output.
- Playground container Functions : Run the web socker server with node-pty for terminal and also run the demo app so that user can see the desired output on the frontend itself or in a new tab.
I make this app for challenging myself and for learning purpose, this is an prototype project of how online code editor are working. If you want to try the app you can go to the top of the page and click on "View Site".