Build Amazing Code Collaboration Site using React & SocketIO
By building a collaborative text editor you will get to learn
* Send data from server to client — Polling/Sockets
* Algo/DS to use for efficient data transfer — Text Compare
* Update editor in such a way, user’s cursor doesn’t move.
There are way too many things it will teach you, read the below post to learn more or Try out the live project here -> [Live URL](https://sotly.co/bro-ide)
Recently, I started working on this cool project, a Web-Based Code Editor. So, in this post, I will talk about how I implemented this project and what will be further features I will be adding. 😃
As we all know there are thousands of AWESOMEEE code editors out there like repl.it, codepen, codesandbox, etc. So most of you must be wondering why I decided to write my own code editors.
What I think is, if you build a system then you will get to know how that thing really works, so my curiosity made me do it. 🙂
Let's talk about the features this web app currently has,
* Separate tabs for HTML/CSS/JS for better coding style.
* Code Output Display shows the output by merging all codes and creating a Virtual DOM.
* Fully Mobile Responsive.
* Download merged code as a text file.
* Night Mode
* Code autosave in the browser
* Code Sharing Link (Planned)
* Code Collaboration (Planned)
## Tech Used
In this project, I have used,
* React — For UI
* Material UI — Design/Animation
* Redux — For State Management
* Redux-Saga — For Side Effects
* Redux Persist — For AutoSave
* Socket IO (Planned) — For socket connection
* JsDiff — For Calculating Difference
This project is open for contributions, even contribution to docs, readme, and managing people to help others learn and grow together.
This is the repo URL -> Github
Try out the live project here -> Live URL
Ping Me Anytime with doubts related to Full Stack / Pen Testing