Collab Code Hub: Realtime Collaborative Code Editor

Introduction

Are you tired of sending code snippets back and forth, struggling to debug and collaborate with your team? Look no further! Collab Code Hub is here to revolutionize the way you code together. This powerful and intuitive collaborative code editor is designed to empower developers, and teams to work seamlessly in real-time, regardless of their location. With Collab Code Hub, you can code together, debug together, and ship faster, together.

Features

• Multiple users can join a room and edit code together
• Changes are reflected in real time
• Users can choose theme based on their preferences
• Users can leave the room and rejoin later to continue editing
• Copy button to copy the room id to clipboard
• Leave button to leave the room
• Joining & leaving of users is also reflected in real time -Chatbox feature to communicate with all joined users in the room

Tech Stack

• React.js
• Node.js
• Express.js
• Socket.io
• CodeMirror
• React-Toastify

Installation

Prerequisites

• Node.js and npm installed on your machine

Steps

1. Clone the repository
2. Navigate to the project directory
3. Install dependencies
4. To run the frontend: npm start
5. To run the backend: node server.js
6. Open your web browser and go to http://localhost:3000 to access the Collab Code Hub application.

Future Scope

1. Added syntax highlighting for multiple languages
2. Added support for multiple themes
3. Added support for saving the last theme and language selected by the user in local storage
4. Add support to accept or reject new users trying to join the room
5. Add to implement video and voice chat feature inside the editor
6. Add support for local code file uploading