Case study · Product & AI
LiveBoard
Realtime collaboration with a correctness story
The problem
Collaborative tools live or die on the hard cases: two people editing at once, a laptop going offline mid-drag, a reconnect after minutes away. LiveBoard is built around making those cases converge provably instead of hopefully.
What I built
Event-sourced sync
Every mutation appends to a per-workspace event log with a monotonic seq and fans out to room-scoped subscribers; other clients apply events to their cache without refetching.
Reconnect resync
Clients keep a per-workspace seq watermark and re-subscribe with sinceSeq to receive exactly the missed events as an ordered batch. Gaps beyond 2000 events truncate and fall back to refetching.
Optimistic UX with conflict handling
React Query cache patched instantly; every write carries an idempotency key; stale baseVersion writes get 409 { current } for a rebase UX; offline writes queue in a persistent outbox and flush idempotently.
Presence, typing, viewers
In-memory registries keyed by socket id (multi-tab safe), membership-checked per workspace.
Engineering decisions
One log, three jobs
The activity event {id, seq, type, actor, entityId, data, ts} is simultaneously the realtime payload, the activity feed, and the reconnect-replay source — one source of truth instead of three drifting ones.
Authz at every layer
JWT verified on the Socket.IO handshake and membership re-checked on every room join; REST routes check membership on every request; non-members get 403/404 — tested, not assumed.
Cursor pagination everywhere
Keyset cursors (sort field + _id tiebreak) for issues, comments and activity keep pages stable while rows change underneath — regression-tested.
Testing & CI
A two-client consistency proof boots the real HTTP+Socket.IO server against a throwaway Mongo and asserts two concurrent clients converge to byte-identical event streams and final state. Reconnect replay is regression-tested server-side.
Screenshots
Kanban board
Seeded Acme workspace with 28 issues across projects, drag-and-drop with optimistic updates
Live collaboration
A card dragged in Alice's window moves live in Bob's; presence avatars show who's online
Next.js / Socket.IO / MongoDB / React Query