CollabCode is a high-performance, real-time collaborative code editor designed for teams to code together seamlessly from anywhere in the world. Built with a focus on interview integrity and low-latency synchronization.
CollabCode uses a combination of CRDTs and WebSockets to ensure seamless synchronization across different environments.
- The Editor (Monaco): Captures user input and triggers events.
- The Brain (Yjs): Converts edits into conflict-free operations (CRDTs).
- The Transport (y-websocket): Broadcasts these operations to all connected peers via a Node.js backend.
- The Merge: Every client receives the operation and merges it locally, ensuring the document state is identical for everyone.
- Vinay Kumar (@Vinay50029)
- Mohan Sai (@mohansai1732)
- Ashish (@Ashish-altf6)
- Real-Time Collaboration: Multiple users can edit the same file simultaneously with zero latency.
- Conflict-Free Editing: Powered by CRDTs (Conflict-free Replicated Data Types) to ensure code consistency.
- Presence Indicators: Live cursor tracking and online user list.
- Syntax Highlighting: Professional-grade highlighting for multiple programming languages.
Designed for technical recruitment, CollabCode includes features to ensure authentic coding:
- Code Playback: Replay sessions to observe the developer's step-by-step thought process.
- Tab Tracking: Notifies the interviewer if the candidate switches to other windows or tabs.
- Paste Detection: Identifies and flags large, instant code injections to prevent copy-pasting.
- Frontend: React.js (Vite), Monaco Editor
- Backend: Node.js, Express
- Real-Time: WebSockets (
y-websocket) - State Sync: Yjs (CRDT implementation)
- Styling: Tailwind CSS / Modern CSS
Follow these steps to set up the project on your local machine.
git clone [https://github.com/Vinay50029/CollabCode.git](https://github.com/Vinay50029/CollabCode.git)
cd CollabCode