Collaborative Coding is a real-time, multi-user code editor and project management platform inspired by VS Code. It allows multiple users to work together on coding projects, manage files and folders, and collaborate seamlessly with live updates.
- Real-time Collaborative Editing: Multiple users can edit the same file simultaneously with changes synced instantly using ShareDB and WebSockets.
- Project Management: Create, open, and manage multiple coding projects.
- File & Folder Explorer: Create and delete files and folders in a project, similar to a file manager.
- User Authentication: Secure login with JWT-based authentication.
- Collaborator Management: Invite users to projects.
- Syntax Highlighting: Monaco Editor provides syntax highlighting for multiple languages.
- Context Menus: Right-click on files/folders for quick actions (create, rename, delete).
- Backend with Node.js, Express, MongoDB: Robust REST API and real-time backend.
- Frontend: React, Next.js, Monaco Editor, Tailwind CSS
- Backend: Node.js, Express, WebSocket
- Database: MongoDB, ShareDB
- Authentication: JWT (JSON Web Token)
- Real-time: ShareDB, Reconnecting WebSocket
- Node v22+
- MongoDB
-
Clone the repository:
git clone https://github.com/yourusername/collaborative-coding.git cd collaborative-coding -
ENV Variable Setup
On
backend/.envchange MONGO_URL variable with your mongodb urlMONGO_URI = "mongodb://localhost:27017/mydatabase"
-
Run the backend
Backend will run on port 8000
cd backend npm install npm run start -
Run the frontend
cd ../frontend # If you still on the backend folder npm install npm run dev
-
Go to http://localhost:3000
This project is still a work in progress and not yet perfect. There are features that can be improved or added, and contributions are very welcome! If you have ideas, suggestions, or want to help develop new features, feel free to open an issue or submit a pull request.