Online Code Editor using React and NodeJS, with collaboration features

Project hosted on Github pages (link):

https://soumyadeeptadas.github.io/dyte-code-editor/

• frontend hosted in Githubpages, and backend api hosted on heroku for live demo app
• above link can be opened by multiple users to collaborate.

Features:

• File explorer, to select from html, css and js file of the project and to load to code editor window
• Text highlighted Code Editor, with line numbers and error detection, and dynamic rendering.
• Live View dynamically renders the project from running the HTML, css and JS, providing seamless and fast development ability
• Collaboration Features, the pplication can be run by different users at the same time to collaborate on the same project and edit and develop simulatenously
• Download Code, downloads the 3 files in a siingle master file into local system, for further use

Getting Started

1. Clone this repository and cd into it.
2. Execute npm install to download dependencies of the server side.
3. cd into the client folder, run npm install to install client side dependencies.
4. cd back to root of project and Run npm run start to start the Express server.
5. Open http://localhost:3000 in your browser.

Project and folder structure info

• Here

Pre-requisites

• Node.js and npm

demo video:

• https://drive.google.com/file/d/1iiQ7tG3mospqjq7_Ha1klQWQV8f_YXMh/view?usp=sharing

Screenshots

HTML editor selected from file selector

CSS editor selected from file selector

JS editor selected from file selector

All 3 editor stacked on first load, further one editor can be picked from file selector

Built With

• NodeJs
• React
• Pusher Channels
• Codemirror

Licences

MIT