3rd YearAdvancedWeb 6-8 weeks
Real-time Collaborative Whiteboard
A shared canvas where multiple users draw, add sticky notes, and see each other’s cursors in real time, with rooms and persistence.
ReactCanvas APIWebSocketNode.jsRedis
Find GitHub repos & source code →How to build it step by step
- 1Drawing engine: Capture strokes on the Canvas API and serialise them as drawing operations.
- 2Sync: Broadcast operations over WebSockets; apply remote ops to keep canvases consistent.
- 3Presence: Show live cursors and selection per user; handle join/leave.
- 4Persistence: Store the operation log per room so late joiners can replay the board.
Key features to implement
- ✓Multi-user drawing
- ✓Live cursors
- ✓Sticky notes and shapes
- ✓Room-based boards
- ✓Replayable history
💡 Unique twist to stand out
Implement conflict-free merging with a simple CRDT so concurrent edits never corrupt the board state.
🎓 What you'll learn
Real-time sync, Canvas API, operational transforms/CRDTs, and presence systems.