Sketch ideas, brainstorm with your team, and collaborate seamlessly through low-latency real-time synchronization.
CollaboDraw is a real-time collaborative whiteboard designed for brainstorming, software design, teaching, and remote teamwork.
Unlike traditional CRUD applications, CollaboDraw focuses on solving the engineering challenges behind real-time collaboration—maintaining synchronized canvas state, handling concurrent users, managing live cursor presence, and delivering a smooth collaborative experience across multiple devices.
Collaborate seamlessly with multiple users on the same board. Every drawing action is synchronized instantly across all connected participants using WebSockets.
Draw freely using:
- Freehand Pen
- Straight Lines
- Rectangles
- Circles
- Eraser
Customize every stroke with adjustable colors and stroke widths.
See who is currently connected to your board.
- Live collaborator list
- Cursor presence
- Active participant count
- Presence notifications
Every board supports three permission levels:
- Owner
- Editor
- Viewer
Owners can approve join requests and control who can modify the board in real time.
Boards are automatically saved.
Leave anytime and continue exactly where you left off.
Navigate naturally using smooth pan and zoom controls.
Perfect for large diagrams and brainstorming sessions.
Made a mistake?
Undo and redo recent drawing actions using:
- Toolbar controls
- Keyboard shortcuts
Export your whiteboard as a PNG, JPG, and PDF with a single click.
Built for:
- Desktop
- Tablet
- Mobile
Pointer Events ensure consistent interaction across devices.
| Layer | Technology |
|---|---|
| Frontend | React, TypeScript, Vite |
| Styling | Tailwind CSS |
| State Management | Zustand |
| Backend | Node.js, Express |
| Database | MongoDB |
| Real-Time Communication | Socket.IO |
| Authentication | JWT |
| Deployment | Vercel + Render |
React + Zustand
│
REST API + Socket.IO
│
Express Backend
│
MongoDB Atlas
collabodraw/
│
├── client/
│ ├── components/
│ ├── hooks/
│ ├── pages/
│ ├── store/
│ └── utils/
│
├── server/
│ ├── controllers/
│ ├── middleware/
│ ├── models/
│ ├── routes/
│ ├── sockets/
│ └── utils/
│
└── README.md
During development, several architectural and engineering challenges were addressed.
- Low-latency Socket.IO communication
- Room-based collaboration
- Live cursor synchronization
- Multi-user drawing
- Cursor throttling
- Debounced canvas resizing
- Efficient canvas rendering
- Reduced unnecessary network traffic
- JWT authentication
- Protected API routes
- Socket authentication
- Role-based access control
- Responsive layout
- Infinite canvas
- Keyboard shortcuts
- Presence notifications
- Loading & error states
git clone https://github.com/aryansinha1908/collabodraw.gitcd client
npm installcd server
npm installVITE_SERVER_URL=PORT=
MONGO_URI=
JWT_SECRET=
CLIENT_URL=Backend
npm run devFrontend
npm run devPlanned improvements after the hackathon:
- Shape selection & manipulation
- Text tool
- Image uploads
- Board snapshots / version history
- Sticky notes
- Multiple board pages
- Laser pointer