Build a Collaborative Kanban Board with Yjs (CRDT)

Question

Accepted Answer

**Requirements**
- Columns (To Do / Doing / Done) with cards; drag cards between columns and reorder within a column.
- Add/edit/delete cards, add columns, persist to localStorage.
- Real-time sync: use Yjs (`yjs` + `y-websocket` or `y-webrtc`) so two tabs/users see live updates without conflicts (CRDT).

**Architecture**
- Model as `Y.Map` for board + `Y.Array` per column. Example: `yDoc.getMap("board")`, `yArray.push([{id, title}])`.
- Bind Yjs to React via `useYjs` hook: observe `yArray.observe(() => setCards(yArray.toArray()))`.
- DnD with `@dnd-kit` `SortableContext` per column; on `dragEnd`, do `yArray.delete(oldIdx,1); yArray.insert(newIdx,[moved])` — Yjs handles merge.

**What interviewers look for:** CRDT mental model (no central lock), Yjs doc/provider setup, mapping Y types to React state, conflict-free drag.

**Reference implementation**
```jsx
import * as Y from "yjs";
import { WebrtcProvider } from "y-webrtc";

function useKanban(room = "kanban-demo") {
  const [doc] = Re

Build a Collaborative Kanban Board with Yjs (CRDT)

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.