Back to selected workReal-time Web Application 
MergeCanvas
Real-time collaborative whiteboard with live rooms, cursors, and conflict-free CRDT sync.
https://merge-canvas.vercel.appVerified Production Build
Next.js 16React 19TypeScriptTailwind CSSPusherYjs CRDTNode.jsCanvas API
“Draw, sketch, and brainstorm together — live cursors and deterministic state convergence.”
System Architecture
MergeCanvas is a collaborative whiteboard application where teams can draw, sketch, and brainstorm together in real time. Built as a unified full-stack Next.js app with live cursors, persistent rooms, and conflict-free state synchronization.
Client LayerNext.js 16 App Router, React 19, HTML Canvas API, Tailwind CSS
REST APINext.js Route Handlers for room initialization and persistence
Real-time ProtocolBidirectional WebSocket event streaming with live cursor broadcast and presence
Database & PersistenceMongoDB for rooms, user accounts, and persistent board state snapshots
Authentication & SecurityJWT authentication with verified session handling
Production Hardening
Real-time multi-user cursor tracking with debounced position broadcasting
Persistent room state serialization allowing users to leave and resume whiteboard sessions
Request and canvas payload boundaries enforced on API handlers
Responsive viewport scaling for desktop, tablet, and mobile collaboration
Deployed to Vercel with automated continuous delivery
Next Project
InfraChat