Step 10 - realtime collaboration
1 min read
Wire the board to Firestore. Replace the local-only element store with realtime sync while keeping addEl/updateEl/deleteEl as the only mutation API.
- On board entry: subscribe to board$(boardId) (metadata: title, background, and later facilitation fields) and elementsOf$(boardId); re-sort elements by createdAt on every snapshot.
- Writes are optimistic: apply to the local elements signal FIRST, then persist. updateElement writes the WHOLE element document with setDoc (last-write-wins; no merge, no per-field patches). On a rejected write, restore the pre-change snapshot of the affected elements and show a toast ("save failed", "move failed" variants).
- Do not build echo suppression - per-element documents plus Firestore latency compensation already prevent flicker. Concurrent edits to different elements are automatically conflict-free; same-element conflicts resolve last-write-wins, which is acceptable.
- Batch bulk operations (clear board, paste of many, AI insert later) at a maximum of 450 writes per batch (Firestore caps at 500).
- Board metadata changes (title, background) also write-through optimistically.
- Wire the join flow: /join/:code queries boards by code and redirects to /board/:id.
Acceptance: two browser windows on the same board see each other's creations, moves and deletions live; killing the network mid-drag rolls back cleanly with a toast; undo/redo still behaves in both windows per prompt 07's concurrency guard.
Discussion
0 commentsNo comments yet. Start the discussion.