You need to build a collaborative text editor RIGHT NOW!!

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

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 the 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 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

Lets 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 text file.
• Night Mode
• Code auto save in 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 Auto Save
• Socket IO (Planned) - For socket connection
• JsDiff - For Calculating Difference

Contribution

This project is open for contributions, even contribution to docs, readme, managing people will help others learn and we can 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