CodeSync is a full-stack real-time collaborative code editor built with the MERN stack. Multiple developers can join the same room, write code together, see each other's live cursors, chat, and execute code — all in the browser without any installation.
Think of it as a lightweight Google Docs for code , with a built-in code runner.
Try it at https://code-sync-jnzj.vercel.app
Sign up for a free account
Create a room — get a unique Room ID
Share the room link with a friend
Code together in real time!
Note: Backend runs on Render free tier — first load after inactivity may take ~30 seconds to wake up.
Feature
Description
Real-time Code Sync Every keystroke syncs instantly to all collaborators via WebSockets
Live Cursor Presence See every collaborator's cursor with a unique colored name label
Live Chat Built-in chat panel with Enter-to-send, auto-scroll to latest message
Code Execution Run C++, Python, JavaScript, Java directly in the browser
User Presence See who is online in the room in real time
Feature
Description
JWT Authentication Signup/Login with bcrypt password hashing, 7-day token expiry
JWT Middleware All protected routes verified server-side — unauthorized requests blocked with 401
Secure Room IDs crypto.randomBytes for collision-safe room ID generation
Input Validation All auth endpoints validate required fields before hitting the DB
Feature
Description
Monaco Editor VS Code's editor engine — syntax highlighting, bracket pairs, IntelliSense
Multiple Themes VS Dark, VS Light, High Contrast
4 Languages C++ (C++17/20), Python 3, JavaScript (Node.js), Java 21
Local Code Cache Code saved to localStorage per room and language
Feature
Description
VS Code Layout Full-screen IDE layout — no page scroll, everything visible at once
Custom Input (stdin) Provide program input before running, side by side with output
Room History Profile page shows all rooms joined with a rejoin button
Invite Links One-click copy of room link — friends join directly
Technology
Version
Purpose
React
19
UI framework
Vite
8
Build tool and dev server
Monaco Editor
@monaco-editor/reactCode editor (VS Code engine)
Socket.IO Client
4
Real-time WebSocket communication
React Router
7
Client-side routing
Axios
1.x
HTTP requests with JWT interceptor
react-hot-toast
2
Toast notifications
Technology
Version
Purpose
Node.js
22
Runtime
Express
5
Web framework
Socket.IO
4
WebSocket server for real-time events
Mongoose
9
MongoDB ODM
jsonwebtoken
9
JWT generation and verification
bcryptjs
3
Password hashing
child_process
built-in
Code execution via system compilers
Technology
Purpose
MongoDB Atlas
Cloud database — users, rooms, room history
localStorage
Per-browser code and recent rooms cache
Technology
Purpose
Docker
Containerizes backend with g++, Python 3, Java pre-installed
Render
Hosts backend Docker container (free tier)
Vercel
Hosts React frontend (free tier)
MongoDB Atlas
Cloud MongoDB M0 free cluster (AWS Mumbai)
GitHub
Source control + auto-deploy trigger for Render and Vercel
Browser (React + Vite)
|
|-- HTTP (Axios + JWT) ------------> Express REST API
| |
|-- WebSocket (Socket.IO) ----------> Socket.IO Server
|
+-------+-------+
| |
MongoDB Atlas Code Execution
(child_process)
g++ / python3
node / java
Event
Direction
Description
join-roomClient to Server
User joins a room
users-updateServer to Room
Updated list of connected users
code-changeClient to Server
Editor content changed
code-updateServer to Others
Broadcast code to other users
cursor-moveClient to Server
Cursor position changed
cursor-updateServer to Others
Broadcast cursor to others
cursor-removeServer to Others
User disconnected, remove cursor
send-messageClient to Server
Chat message sent
receive-messageServer to Room
Broadcast message to room
CodeSync/
|
|-- client/ # React + Vite frontend
| |-- src/
| | |-- components/
| | | |-- CodeEditor.jsx # Monaco editor + live cursors
| | | |-- ChatPanel.jsx # Real-time chat
| | | |-- UsersPanel.jsx # Connected users list
| | | |-- Navbar.jsx # Room navbar
| | | |-- ProtectedRoute.jsx # Auth guard
| | | |-- RoomEntry.jsx # Login gate for room URLs
| | |-- pages/
| | | |-- Home.jsx # Landing page
| | | |-- Room.jsx # Main editor room
| | | |-- Login.jsx # Login page
| | | |-- Signup.jsx # Signup page
| | | |-- Profile.jsx # Profile + room history
| | |-- services/
| | | |-- api.js # Axios instance + JWT interceptor
| | | |-- auth.js # Login/signup helpers
| | |-- styles/
| | |-- room.css # IDE layout styles
| | |-- auth.css # Login/Signup styles
| | |-- profile.css # Profile page styles
| |-- package.json
|
|-- server/ # Node.js + Express backend
|-- middleware/
| |-- authMiddleware.js # JWT verification middleware
|-- controllers/
| |-- authController.js # Signup, Login
| |-- roomController.js # CRUD for rooms
| |-- codeController.js # Code execution engine
| |-- roomHistoryController.js # Room visit history
|-- models/
| |-- User.js # User schema
| |-- Room.js # Room schema
| |-- RoomHistory.js # History schema
|-- routes/
| |-- authRoutes.js # /auth/signup, /auth/login (public)
| |-- roomRoutes.js # /rooms/* (protected)
| |-- codeRoutes.js # /code/run (protected)
| |-- roomHistoryRoutes.js # /room-history/* (protected)
|-- socket/
| |-- socketHandler.js # All Socket.IO event handlers
|-- config/
| |-- db.js # MongoDB connection
|-- Dockerfile # Docker image with compilers
|-- package.json
Node.js 18+
MongoDB (local) or MongoDB Atlas URI
g++ with C++17 support
Python 3
Java JDK 11+
git clone https://github.com/Harsh-128/CodeSync.git
cd CodeSync # Backendcd server && npm install
# Frontendcd ../client && npm installCreate server/.env (copy from server/.env.example):
MONGO_URI = mongodb://127.0.0.1:27017/codesync
JWT_SECRET = your_long_random_secret_here
PORT = 3000
CLIENT_URL = http://localhost:5173 # Terminal 1 — Backend (port 3000)cd server && npm run dev
# Terminal 2 — Frontend (port 5173)cd client && npm run devOpen http://localhost:5173
5. Run with Docker (optional) docker-compose up --build Environment Variables on Render MONGO_URI = mongodb+srv://...
JWT_SECRET = your_long_random_secret
PORT = 3000
CLIENT_URL = https://code-sync-jnzj.vercel.app
Environment Variables on Vercel VITE_BACKEND_URL = https://codesync-backend-gur0.onrender.com
Passwords hashed with bcryptjs (salt rounds: 10)
JWT tokens expire after 7 days
All protected routes verified server-side with JWT middleware
Room IDs generated with crypto.randomBytes (collision-safe)
Input validation on all auth endpoints
CORS restricted to known frontend origins only
Code execution sandboxed with 10-second timeout and 500KB output limit
Harsh Sharma
