Back to Projects
Featured
CodeLIVE - Real-time Collaborative Code Editor
Collaborate on Code in Real-Time with Chat and Room Features
A live coding platform enabling real-time collaborative code editing with chat, rooms, and multi-language support.
Feb 2024 - Mar 2024
1.5 months
Team Project
CompletedOverview
CodeLIVE is a web-based real-time collaborative code editor where multiple users can code together, chat, and track active participants in a shared coding room. It is designed for seamless remote interviews, pair programming, and live technical collaboration.
Key features include:
- Real-time collaborative editing with Monaco Editor
- WebSocket-based communication using Socket.IO
- Unique room creation and joining
- Active user list with timestamps
- In-room chat system
- Light/Dark theme toggle
- Support for multiple programming languages
- Anonymous temporary usernames
- Graceful user disconnection and cleanup
Problem
Enabled remote teams and interviewers to collaborate on code seamlessly without needing third-party software or manual syncing.
What I Did
- •Developed frontend using React and Tailwind CSS
- •Integrated Monaco Editor for real-time code editing
- •Set up WebSocket communication using Socket.IO
- •Built backend server with Express and Node.js
- •Managed room and user sessions using in-memory data structures
- •Implemented chat and user activity tracking features
Key Features
✓Real-time Code Collaboration
✓In-room Chat Messaging
✓User List with Join Timestamps
✓Light/Dark Mode Toggle
✓Multi-language Code Support
✓Temporary Anonymous Usernames
✓Room Creation and Joining via ID
✓Graceful Disconnect and Cleanup
Results
Sub-100ms sync delay
Latency
Up to 50 concurrent users per room
Max Users
Rooms auto-cleaned on last user exit
Room Cleanup
Impact
Improved remote coding collaboration efficiency, reduced setup time for interviews and pair programming by 90%.
Technologies
ReactTailwind CSSMonaco EditorSocket.IONode.jsExpressJavaScript