FSD Frontend System Design

Part VI — The Blueprint · Lesson 11.14

HLD Kanban Board

In one lineDrag-and-drop with optimistic reordering — the design problem is what happens when the server says no.

Where you've seen itDropping a card into "Done" and having it snap back two seconds later because someone else already moved it.

  • Time19 min
  • DiagramOptimistic reorder with rollback + fractional ordering keys
  • Chapter11 · High Level Design

Diagram

diagram
1–2 · SCOPE AND SCALE

  in scope   columns · cards · drag between and within columns ·
             real-time sync · filters
  out        reporting · automations · permissions admin
  scale      ~10 columns · up to 500 cards · 2–20 concurrent users
diagram
3 · OPTIMISTIC REORDER — and the rollback that must exist

  user drops card C3 into "Done" at index 1
        │
        ├─► snapshot current state          ← without this,
        │                                      rollback is impossible
        ├─► move locally, render instantly   0ms, feels native
        │
        └─► PATCH /cards/c3 {column:'done', after:'c7'}
                  │
            ┌─────┴──────┐
          200 OK      409 conflict
            │              │
      reconcile      RESTORE snapshot
      with server    + toast "Someone else moved this card"
      response       + refetch the column
diagram
6a · DEEP DIVE — ORDERING WITHOUT REWRITING EVERY CARD

  ✗ integer positions 1,2,3,4…
      insert between 2 and 3 → renumber every card after it
      → 400 writes for one drag, and constant conflicts

  ✓ fractional / lexicographic keys
      card A  position "a"
      card B  position "n"          insert between → "g"
      card C  position "z"

      one write. Neighbours never change.

      LexoRank / fractional indexing: always a value between
      any two keys. Rebalance rarely, in the background.
diagram
6b · DEEP DIVE — CONCURRENT MOVES

  Alice moves C3 → Done[1]      Bob moves C3 → Review[0]
             └────────┬─────────────────┘
                      ▼
     server applies both; last write wins on POSITION
     broadcast the resulting state to everyone (2.4)

     each client: reconcile against its optimistic copy
                  if my optimistic position ≠ server position,
                  animate to the server's answer — never leave
                  two clients showing different boards

How it works

  1. Snapshot before the optimistic move, always — rollback is the feature, not the edge case.
  2. Fractional ordering keys so a drag is one write and neighbours are untouched.
  3. Broadcast moves over WebSocket (2.4) and reconcile every client to the server's state.
  4. Use a maintained drag library (dnd-kit) — it handles keyboard dragging, touch, auto-scroll, and screen-reader announcements you would otherwise skip.
  5. Virtualize long columns (10.7) once a column exceeds a few hundred cards.

Trade-offs

ChoiceCost
Optimistic moveInstant feel; rollback UI required
Server-confirmed moveAlways correct; feels sluggish
Fractional keysOne write per move; occasional rebalance
Integer positionsSimple to read; O(n) writes and conflicts

Accessibility (8.2): drag-and-drop is unusable by keyboard unless you build the alternative — focus a card, press Space to lift, arrows to move, Space to drop, Escape to cancel, with each step announced via a live region. This is the most commonly skipped part of a Kanban implementation and a strong thing to raise unprompted.

Interview angle

"Two users drag the same card at once. What happens?"

  • Both apply optimistically and locally, so both feel instant; the server resolves position by last write and broadcasts the result.
  • Each client reconciles against its optimistic copy and animates to the server's answer, so no two boards disagree.
  • The card that lost shows a toast explaining the move — silently snapping back is what makes users distrust the tool.

Recap

  • Snapshot, move optimistically, reconcile or roll back.
  • Fractional ordering keys turn a reorder into a single write.
  • Keyboard-accessible dragging is a requirement, not an enhancement.