COLLAB DASHBOARD

Shared whiteboards live or die on latency. Past ~100ms of sync lag, remote collaboration stops feeling like a shared room and starts feeling like taking turns. Most canvas tools also treat access control as an afterthought — everyone is either a full editor or locked out entirely, which breaks down the moment a real team uses the board.

Built the rendering pipeline on the raw Canvas API with dirty-region tracking, so only changed areas re-render inside a 60fps requestAnimationFrame loop. Sync runs over Socket.io: clients emit drawing actions, text operations, cursor movements, and history commands; the server validates each against the user's role, stores the change, and broadcasts to all session participants. A central state manager handles undo/redo history, layer composition, and conflict resolution when multiple users edit the same element.

Collab Dashboard started as a question about latency: how fast can you make a shared canvas feel like everyone's in the same room? The answer was sub-100ms, typically 50-80ms on a local network.

The app is a full collaborative whiteboard: freehand drawing with customisable brushes, geometric shapes, flowchart and UML smart shapes, text annotations with formatting, and a layer system with visibility toggling and reorder. An AI-powered shape recognition engine snaps rough sketches into clean geometric forms. Draw a wobbly circle and it locks to a perfect one.

Five pre-built templates ship out of the box: flowcharts, Kanban boards, mobile wireframes, sequence diagrams, and mind maps. Users can embed YouTube and Vimeo videos directly onto the canvas, and export their boards as PNG, SVG, or JSON.

The collaboration layer is where it gets interesting. Every connected user has a live cursor with presence indicators showing where they're actively drawing. A threaded comment system supports resolve/unresolve workflows. An activity log timestamps every session event. Toast notifications surface user joins, role changes, and permission updates in real time.

The frontend runs React 19 with Vite 7, using the Canvas API for all rendering with requestAnimationFrame for 60fps draw loops. Dirty state tracking ensures only changed regions re-render. No full-canvas redraws on every frame.

The backend is Node.js 22 with Express 5 and Socket.io 4. The WebSocket event flow is bidirectional: clients emit drawing actions, text operations, cursor movements, and history commands. The server validates permissions against the user's role, stores the change, then broadcasts to all session participants.

The role and permission system has four tiers (Creator, Editor, Viewer, and Commenter) with 30+ granular permission flags that can be overridden per-user. Permissions scope down to individual shapes and layers, so a Creator can lock specific elements while leaving the rest editable.

Canvas operations flow through a central state manager that handles undo/redo history, layer composition, and conflict resolution when multiple users edit the same element simultaneously.