Sync Code: 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! Sync Code 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 Sync Code, 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
• Copy button to copy the room id to clipboard
• Leave button to leave the room
• Supports syntax highlighting for different programming languages
• Users can choose theme based on their preferences
• Users can leave the room and rejoin later to continue editing
• Joining & leaving of users is also reflected in real time

Prerequisites

For running via Docker

• Docker (25.0.4)
• Docker Compose (1.29.2)

For running locally

• Node.js (v20.11.1)
• npm (10.2.4)
• pm2 (5.3.1) : run npm i -g pm2 to install pm2 globally

Note: I have used nvm (v0.39.7) to manage my node versions. View nvm official documentation to install it.

Tech Stack

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

Installation

Running Locally

1. Clone this repository and cd into it
2. Run npm install to install the dependencies
3. Create .env file in the root folder and copy paste the content of example.env, and add necessary credentials.
4. To start the react app client run npm start in one terminal
5. To start the server run npm server:dev or pm2 start server.js in another terminal
6. Go to http://localhost:3000 to view the app
7. Follow the steps 4-7 from the Running via Docker Image section to create and join a room

Note: To stop your server, press Ctrl+c or if you used "pm2", then use pm2 stop server.js in the terminal.

Project Video

project-walkthrough.mp4

Note: If you find any bugs, create an Issue here. I will try to fix it as soon as possible :)
In case you want to fix it yourself, feel free to make a pull request.

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