CollabBoard.
CollabBoard is a production-ready real-time collaborative whiteboard web app. Mutate a shared infinite canvas concurrently with live cursors, user presence, and deterministic colors. Built with Next.js App Router, TypeScript, and Tailwind CSS, it integrates Liveblocks, Fabric.js v6, Supabase, and NextAuth v5.
Real-time Sync & Presence: Low-latency sync via Liveblocks rooms with live cursor overlays and client connection badges
11 Canvas Drawing Tools: Drawing, sticky notes, arrows, custom images, shapes, and eraser with keyboard shortcuts
Power Workflows: Undo/redo history, dot-grid background toggle, board renaming/sharing, and PDF/PNG/SVG export
Stack
Built With
The stack combines the core frameworks, services, and UI tools used to ship the project.
Process
Project Timeline
Collaboration Model
Designed a room-based whiteboard architecture using Liveblocks storage for canvas objects and presence for live user state
Drawing Experience
Built the Fabric.js canvas editor with tool options for color, stroke width, opacity, and font size
Dashboard & Sharing
Added OAuth login, board management, share links, export flows, and theme persistence
Production Ready
Prepared a Vercel-ready Next.js app with Supabase database setup and environment-driven integrations
Highlights
What It Delivers
- 1Real-time Sync & Presence: Low-latency sync via Liveblocks rooms with live cursor overlays and client connection badges
- 211 Canvas Drawing Tools: Drawing, sticky notes, arrows, custom images, shapes, and eraser with keyboard shortcuts
- 3Power Workflows: Undo/redo history, dot-grid background toggle, board renaming/sharing, and PDF/PNG/SVG export
- 4Robust Auth & Storage: Supabase database integration with OAuth sign-in via Google and GitHub using NextAuth v5
Have a project in mind?
I'm always open to discussing new opportunities, collaborations, and interesting ideas.