Kanban REST Client

Project roadmap

1. 01

   Define the API

   ~1.5h

   Write API.md for the tasks API: GET /tasks (with filters), POST /tasks, PATCH /tasks/:id (title, description, assignee, labels, status and position, sent with the task's version) and DELETE /tasks/:id, with the error format and a 409 response containing the current task when the version is outdated. Done when: API.md defines every endpoint and error.

2. 02

   Build the Node.js API

   ~2h

   Build the API with Express and SQLite (or a JSON file for simplicity), validating input, storing a version number that increases with every change, and returning 409 with the current task when an update's version doesn't match. Add an option to add a random delay and random failures, so you can test the client's error handling. Done when: the API works with curl, including 409 conflicts.

3. 03

   Render the board

   ~2h

   Create a React app with Vite that loads the tasks and shows them in columns sorted by position, with a loading state and an error state with Retry. Put the API calls in one module with a small fetch wrapper that turns HTTP errors into typed errors. Done when: the board shows the tasks from the API in the right columns and order.

4. 04

   Add drag and drop

   ~2h

   Add drag and drop with a library such as dnd-kit: moving a card within a column or to another column computes its new position (for example halfway between its neighbors' positions) and status, and sends a PATCH. Make drag and drop usable with the keyboard as well as the mouse. Done when: cards can be moved and reordered, and the new order is saved.

5. 05

   Update optimistically and roll back

   ~2.5h

   For every change (move, edit, create and delete), update the board immediately, send the request, and on failure restore the previous state and show a toast explaining why; on a 409 conflict, replace the card with the server's version and tell the user their change conflicted. Make sure quick successive changes to the same card are applied in order. Done when: with the API's random failures turned on, the board always ends up matching the server.

6. 06

   Add filters and editing

   ~1.5h

   Add filters for assignee, label and text, kept in the URL query string so a filtered board can be shared or bookmarked, and a card detail panel for editing the title, description, assignee and labels with validation. Done when: filters work and survive reloading, and edits are saved.

7. 07

   Test it

   ~2h

   Write tests with Vitest, React Testing Library and a mocked API (for example with MSW): loading and errors, moving cards, optimistic updates rolled back on failure, conflict handling, and filters. Add API tests with supertest for validation and version conflicts. Done when: all tests pass.

Resources

• DocsReact: quick start
• Docsdnd-kit documentation
• DocsMSW (Mock Service Worker)
• DocsMDN: HTTP 409 Conflict
• DocsExpress: routing