WeCode is a web-based real-time collaborative code editor that enables multiple users to join a shared room and edit code together simultaneously.
The goal of this project is to remove friction from collaborative coding by allowing users to start working together instantly without any sign-up process or complex setup. A simple room ID is enough to begin collaboration.
Most collaborative coding tools are either too heavy or require unnecessary onboarding steps such as authentication or account creation. WeCode focuses on simplicity, speed, and real-time interaction.
- Slow and complex onboarding in existing pair programming tools
- Lack of lightweight tools for instant code sharing
- Difficulty in conducting quick debugging or teaching sessions remotely
- Real-time collaborative code editing with multiple users
- Room-based sessions using unique room IDs
- Live user presence tracking inside each room
- Join and leave notifications for participants
- Copy room ID for easy sharing
- Support for multiple programming languages and themes
- Persistent editor preferences using local storage
- File upload with preview and ability to append or replace content
- Instant synchronization of code using WebSockets
- Simple routing for room-based navigation
- Docker support for containerized deployment
WeCode follows a simple two-layer architecture consisting of a frontend client and a backend server.
The frontend is built using React and CodeMirror. It handles:
- Code editor interface
- Room creation and joining flow
- File upload and preview functionality
- Theme and language selection
- WebSocket communication with the server
The backend is built using Node.js, Express, and Socket.IO. It is responsible for:
- Managing WebSocket connections
- Creating and handling rooms
- Broadcasting code updates to connected users
- Tracking active users in each room (stored in memory)
- A user joins or creates a room using a room ID
- The client establishes a WebSocket connection with the server
- The server assigns the user to a Socket.IO room
- Any code changes are broadcast to all users in that room
- New users receive the current code state when they join
Note: The application does not use a database. All state is temporary and stored in memory and active connections.
- React 18
- React Router
- Recoil for state management
- CodeMirror 5 for code editing
- Socket.IO Client for real-time communication
- React Hot Toast for notifications
- Node.js
- Express 4
- Socket.IO 4
- Docker and Docker Compose
- Jest and React Testing Library
- PM2 for process management
- Initialized React app and backend with Express
- Set up folder structure (frontend + backend separation)
- Created basic landing page UI
- Added routing for Home and Editor pages
- Installed core dependencies (Socket.IO, CodeMirror, Recoil)
- Created Express server
- Integrated Socket.IO for real-time communication
- Designed room-based architecture
- Implemented user join/leave events
- Established socket connection between client and server
- Integrated CodeMirror editor
- Implemented live code synchronization
- Added emit/listen events for code changes
- Fixed infinite update loops using controlled state updates
- Enabled multi-user real-time editing
- Implemented UUID-based room creation
- Built join room functionality
- Added live user list in each room
- Displayed join/leave notifications
- Improved socket room management logic
- Added file upload feature
- Implemented file preview before importing
- Enabled append and replace options for file content in the editor
- Handled large file inputs safely within editor state
- Added language switching support for the editor
- Implemented theme customization (light and dark mode)
- Integrated Recoil for global state management
- Stored user preferences using localStorage for persistence
- Improved UI responsiveness and overall editor behavior
- Fixed socket synchronization bugs
- Improved connection handling and error states
- Dockerized the application
- Tested multi-user collaboration flow
- Final UI polish and performance improvements
Deployment Link: https://wecode-pushkar.onrender.com/