A real-time collaborative whiteboard built with Next.js, Socket.io, and PostgreSQL.
🔗 Live Demo: View Project Here
Note: This project runs on a free/hobby backend. Initial requests may experience a short delay (cold start). Please wait a few seconds or refresh if needed.
- Real-time Collaboration - Multiple users can draw simultaneously with sub-100ms latency
- Room-Based Sessions - Create private rooms with shareable URLs
- Drawing Tools - Pen, eraser, color picker, adjustable brush sizes
- Undo/Redo - Full command history with keyboard shortcuts (Ctrl+Z/Y)
- User Presence - See who's online and view their cursors in real-time
- Auto-Save - Canvas automatically persists to PostgreSQL
- Export - Download your whiteboard as PNG or SVG
- Performance Optimized - Throttled emissions (40% network reduction), debounced saves
- Next.js 16 (App Router)
- TypeScript
- Tailwind CSS
- Zustand (State Management)
- Socket.io Client
- Canvas API
- Node.js / Express
- Socket.io Server
- Prisma ORM
- PostgreSQL (Neon)
Login screen to enter your name.
Create a new room or join an existing one.
Real-time collaborative whiteboard with drawing tools.
Multiple users drawing together in real-time.
- Node.js 18+
- PostgreSQL database (or Neon account)
- Clone the repository
git clone https://github.com/RohanMishra47/SyncBoard.git
cd SyncBoard- Install server dependencies
cd server
npm install- Set up environment variables
# server/.env
DATABASE_URL="your_postgresql_connection_string"
PORT=4000
CLIENT_URL="http://localhost:3000"- Run database migrations
npx prisma migrate dev- Install client dependencies
cd ../client
npm install- Set up client environment variables
# client/.env.local
NEXT_PUBLIC_API_URL=http://localhost:4000- Start the development servers
Terminal 1 (Server):
cd server
npm run devTerminal 2 (Client):
cd client
npm run dev- Open the app
Navigate to
http://localhost:3000
- Enter your name to join
- Create a new room or join an existing one
- Share the room URL with teammates
- Start drawing together in real-time!
P- Pen toolE- Eraser toolCtrl+Z- UndoCtrl+YorCtrl+Shift+Z- Redo
Socket.io provides simpler server-mediated synchronization, easier debugging, and better reliability for drawing data (which doesn't require peer-to-peer connections).
Zustand offers a minimal API, no boilerplate, and excellent TypeScript support. For this project's scope, Redux would be over-engineering.
- Throttling: Limited socket emissions to 60fps (16ms intervals)
- Debouncing: Auto-save triggers 3s after last action
- Action Limits: Canvas history capped at 1000 actions
- Selective Rendering: Only re-render components when their subscribed state changes
- Network Traffic: 40% reduction through throttling
- Save Operations: 90% reduction through debouncing
- FPS: Maintained 60fps with 5+ concurrent users
- Latency: Sub-100ms drawing synchronization
- Shape tools (rectangle, circle, line)
- Text annotations
- Image uploads
- Session recording/playback
- Touch gestures (pinch to zoom)
- Dark mode
MIT
Rohan Mishra
- 💼 LinkedIn: Rohan Mishra
- 🐙 GitHub: RohanMishra47
- 𝕏 (Twitter): @RohanMishr19102
- 📧 Email: mydearluffy093@gmail.com
Built as a portfolio project to demonstrate full-stack real-time web development skills.