Challenge
A shared whiteboard needs edits from multiple people to stay in sync while preserving the board state between sessions.
t.
Opening workspace
loading portfolio modules...
All projects
Layer 03 05 Note 01 Note 02 Note 03
Real-time Collaborative Whiteboard
exac.draw
A collaborative whiteboard for simultaneous multi-user canvas editing, with real-time WebSocket synchronization and persistent board state.
Context & approach
The problem, then the system.
Approach
Built a custom canvas rendering engine, synchronized canvas changes over WebSockets, and persisted whiteboard state in PostgreSQL.
System map
How the pieces connect.
Follow a representative collaboration path: a user's canvas change is synchronized to another client, rendered by the custom canvas engine, and retained as board state.
Illustrative collaboration flow
Tap a node · Swipe to explore
Real-time transport
WebSocket sync
WebSockets synchronize canvas changes between connected participants.
Engineering notes
Decisions that shape the experience.
Synchronize edits as they happen
WebSockets carry canvas synchronization for simultaneous multi-user editing.
Own the canvas rendering
A custom canvas engine renders the geometric shapes used on the collaborative board.
Keep board state persistent
PostgreSQL stores whiteboard state so the shared work is backed by durable data.
Built with
Technology stack
- Next.js 15
- Turborepo
- WebSockets
- PostgreSQL
- Tailwind CSS
- pnpm