I Code It

Board Application Architecture

Design a kanban-style board with fast drag interactions and reliable updates.

Quick take: Model board state with stable IDs and optimistic move mutations. / Use event sequencing and rollback on conflict.

Production notes: Use operation IDs for idempotent move updates. / Provide keyboard-first move commands as a fallback to drag-and-drop.

TL;DR

Treat card movement as ordered operations, update UI optimistically, then reconcile with authoritative server order.

Steel thread

Create board, move one card between columns, persist, and sync the result to a second viewer.

C - Collect

  • Are cross-column move permissions role-based?
  • How quickly must collaborators see changes?
  • Must keyboard users perform all drag actions without pointer input?

C - Component structure

  • BoardPage loads board metadata and permission context.
  • ColumnList manages ordered column rendering.
  • CardDraggable contains only gesture state and command dispatch.

D - Data modeling

  • Board, Column, Card, and MoveOperation entities.
  • Maintain ordered cardIds per column.
  • Track lastAppliedOperationId to guard duplicate events.

A - API design

  • GET /boards/:id returns snapshot and version token.
  • POST /boards/:id/moves accepts {operationId, cardId, from, to, index}.
  • Subscription channel streams accepted move operations in sequence order.

O - Optimization

  • Use transform-based drag visuals to avoid layout trashing.
  • Batch collaborator updates when many moves arrive in one frame.
  • Keep focus on moved card for keyboard users and announce new position.
  • optimistic-ui-rollback for immediate drag response with conflict recovery.
  • realtime-transport-sse-websocket-long-poll for teammate update delivery.
  • a11y-testing-strategy-dynamic-uis for robust keyboard and screen-reader behavior.

Failure modes

  • Two users move the same card and one client shows stale final order.
  • Slow network causes delayed acknowledgements and duplicate move retries.
  • Drag-only interaction blocks assistive technology users.

Testing checklist

Testing + Accessibility Rubric

CategoryLevelRequirementDone When
functionalunitIncoming events respect sequence and dedupe semantics.Out-of-order, duplicate, and missing event tests are all covered.
functionalintegrationReconnect path correctly hydrates snapshot and applies deltas.Reconnect test proves no duplicate rows or missing updates.
a11yintegrationLive updates are announced without overwhelming screen readers.Announcement batching and wording pass manual SR checks.
a11ye2eFocus remains stable when real-time updates occur.Keyboard-only user can continue primary task uninterrupted.

Explain it clearly

  • Short version: snapshot + operation log + optimistic UI + conflict resolution.
  • Longer version: sequencing guarantees, rollback behavior, and keyboard interaction model.

Production hardening notes

  • Alert on operation retry spikes and sequence-gap events.
  • Roll out collaborative updates behind feature flags by workspace tier.

Related Patterns