Web Development Project
Kanban Task Board
A kanban board is the best project for learning non-trivial client state: reordering, drag-and-drop, and updates that must feel instant while a request is still in flight. Optimistic updates with rollback on failure is the specific skill it teaches, and it appears in almost every real application.
The brief
Build a board with columns and cards you can drag between them. Changes must persist, feel instantaneous, and roll back visibly if the server rejects them. Dragging must also be possible with a keyboard.
What it demonstrates
That you can build interfaces that feel fast without lying to the user when something fails.
What "done" looks like
Build all of these and the project is finished. Anything past that is in the stretch goals.
- Boards with named columns
- Cards that can be created, edited and deleted
- Drag a card between and within columns
- Order persists across reloads
- Optimistic updates with visible rollback on failure
- Full keyboard operation, including moving a card
How to build it
- 1
Model the ordering
Use a fractional index between neighbours so a move is one write, not a renumber of the whole column.
- 2
Build the API
REST endpoints for boards, columns and cards, with a dedicated move endpoint that takes the new neighbours.
- 3
Render the board
Columns and cards from server state. Type the shapes end to end so a rename cannot silently break rendering.
- 4
Add drag and drop
A library is fine here. What matters is that the drop calls your move endpoint with the right neighbours.
- 5
Make updates optimistic
Move the card in local state immediately, fire the request, and restore the previous position if it fails.
- 6
Make it keyboard operable
Select a card, move it with arrow keys, announce the result in a live region. Most clones never do this.
- 7
Handle concurrent edits
Two tabs moving the same card is the interesting case. Decide whether last write wins, and make it deliberate.
Once it works
Only after the definition of done is met. Half-finished ambition reads worse than a small finished thing.
- Add labels, due dates and filtering
- Make it multi-user with live updates over WebSockets
- Add an activity log per card
Frequently Asked Questions
What are optimistic updates?
You update the UI immediately, assuming the server will accept, then reconcile when it answers. It makes an app feel instant — and it means you must handle the rejection case, restoring the previous state and telling the user, rather than leaving a lie on screen.
How do I store card order?
A float or a fractional index between neighbours, so inserting between two cards is one write rather than renumbering the column. Integer positions require updating every card after the insertion point, which does not scale and causes race conditions.
Is drag-and-drop accessible?
Not by default, and this is where most clones stop. Provide keyboard alternatives — select a card, move it with arrow keys, announce the change via a live region. Doing it is a genuine differentiator on a portfolio.