Build Amazing Code Collaboration Site using React & SocketIO

## TL;DR
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)

## Intro
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. 😃

## Preface
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. 🙂

## Features
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

## Contribution

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

Connect Me @ Linkedin, Github, Twitter, Youtube, Instagram 😇

Ping Me Anytime with doubts related to Full Stack / Pen Testing