All projects · SaaS Product Tools
CollabBoard — Real-Time Collaborative Workspace
A production-grade, distributed real-time collaborative workspace canvas built to keep multiple browsers synchronized live without refreshing.
A production-grade, distributed real-time collaborative workspace canvas built to keep multiple browsers synchronized live without refreshing. Features a Three-Tier Concurrency Architecture to solve the classic Tug-of-War challenge (simultaneous opposing drags on the same object) using distributed drag leases, Lamport logical clocks, and deterministic client ID tie-breaking without oscillation or state tearing. Includes live SVG cursors with floating nametags, multi-user presence roster, full CRUD sticky notes (checklists, bullet points, free-form text, doodles), CRDT additive emoji reactions, offline outbox buffering with auto-reconnection replay, a built-in Dual-Screen visualizer ('Alex's Screen' <-> 'Taylor's Screen') with native cross-tab BroadcastChannel mesh, and a 11-test automated Python verification suite.
- Distributed Drag Leases (The Clue Mandate): Hybrid pessimistic-optimistic locking ensuring that concurrent opposing drags on the same sticky note are resolved deterministically without coordinate jitter or state tearing
- Lamport Logical Clocks & Lexicographical Tie-Breaker: Resolves simultaneous drag requests at identical millisecond timestamps, allowing the winner to retain ownership while the loser smoothly reconciles to the winner's position
- High-Frequency Live Cursors & Presence: Sub-millisecond SVG pointer tracking with colored floating nametags, active action badges ('Moving note', 'Editing', 'Viewing'), and heartbeat auto-expiration
- Field-Level Concurrency Isolation: Moving a sticky note never overwrites text content, checklist states, or emoji reactions; checklist toggling is idempotent and reaction counters use CRDT Add-Wins multi-sets
- Embedded Dual-Screen Visualizer: Live split-screen sandbox ('Alex's Screen' <-> 'Taylor's Screen') demonstrating real-time multi-window synchronization directly in the interface, plus 1-click popout to real separate browser processes
- Offline Outbox Buffering & Auto-Reconnection Replay: Automatically queues mutations during simulated network drops and replays them in chronological sequence upon reconnect
- State Persistence & Instant Restore: Monotonically tracked workspace snapshots stored in localStorage / Supabase and restored seamlessly on page refresh
- Interactive Tug-of-War Conflict Battle Simulator: Step-by-step inspector displaying real-time Lamport clock checks, tie-breaker evaluations, and winner assignments for race conditions
Built with: HTML5 Canvas / DOM, CSS3 / Vanilla JS, BroadcastChannel Mesh, Lamport Logical Clocks, Distributed Drag Leases, Tug-of-War Conflict Protocol, Optimistic Reconciliation, Offline Outbox Buffer, CRDT Multi-Set Reactions, Dual-Window Synchronizer, Python 3.12 Engine, PostgreSQL / Supabase Schema, Sora & Chivo Mono Typography