All projects
frontendIntermediate

Real-time Kanban Board

A modern Kanban board with multiple lists, drag-and-drop cards (dnd-kit), keyboard accessibility, optimistic UI updates, and websocket-based real-time collaboration.

ReactTypeScriptTailwinddnd-kitSocket.IOZustand

Key features

  • Multiple boards & lists
  • Drag-and-drop with keyboard support
  • Real-time multi-user sync via WebSockets
  • Card details: due dates, labels, comments
  • Persistent storage to a backend

Build steps

  1. 1

    Set up a Next.js + Tailwind project

  2. 2

    Model boards, lists, cards in a Zustand store

  3. 3

    Implement DnD with dnd-kit (sortable lists & cards)

  4. 4

    Wire up Socket.IO for real-time updates

  5. 5

    Persist state via REST API + optimistic updates

  6. 6

    Add card detail drawer and labels