Kanban Board App with Drag-and-Drop

Project roadmap

1. 01

   Set up the app and store

   ~1h

   Create a React and TypeScript project with Vite, and add zustand and @dnd-kit/core and @dnd-kit/sortable. Create a Zustand store with an empty state and a devtools middleware. Done when: the app runs and the store can be inspected in the browser's Redux DevTools.

2. 02

   Model the data

   ~1.5h

   Define TypeScript types for Board, List and Card (with ids, titles, positions and timestamps), and store them normalized (maps by id plus ordered id arrays) in the Zustand store. Write typed actions: add, rename and delete boards, lists and cards, and move a card to a list at an index. Done when: unit tests of the store actions pass.

3. 03

   Build typed components

   ~2h

   Build components for the board, lists and cards with strongly typed props, and a generic SortableList<T> component that takes items, a key function and a render function, used for both lists in a board and cards in a list. Add inline editing of titles and forms to add lists and cards. Done when: boards with lists and cards render and can be edited.

4. 04

   Add drag and drop

   ~2.5h

   Use dnd-kit's DndContext and SortableContext to drag cards within a list and between lists, and to reorder lists, showing a drag overlay while dragging. Add the keyboard sensor with sortable keyboard coordinates, so cards can be moved with the keyboard. Update the store on drop. Done when: cards and lists can be reordered with the mouse and the keyboard.

5. 05

   Update optimistically

   ~2h

   When something changes, update the store immediately, then save to the backend; if the save fails, restore the previous state (kept as a snapshot before the change) and show an error message. Queue saves so they reach the backend in order. Done when: with saves failing on purpose, the board rolls back correctly and explains why.

6. 06

   Connect to a mock backend

   ~1.5h

   Create a mock REST API (for example with json-server, or MSW in the browser) with endpoints for boards, lists and cards, with an option for random delays and failures. Load the board from it on startup, and save every change through it. Done when: the board is loaded from and saved to the mock API, and survives a page reload.

7. 07

   Test it

   ~2h

   Write Vitest tests for the store actions (moves, reorders and rollbacks) and React Testing Library tests for editing and keyboard dragging, with MSW mocking the API. Done when: npm test passes.

Resources

• Docsdnd-kit documentation
• DocsZustand documentation
• DocsTypeScript handbook: generics
• DocsReact with TypeScript
• DocsMSW (Mock Service Worker)