Capstone: A Team Task Board with htmx

The brief

Build a team task board with htmx 2 and the backend language you know best (Flask, FastAPI, Django, Express, Laravel, Rails, Go or ASP.NET Core). Store tasks in a real database (SQLite is fine).

Requirements

1. Board: three columns (To do, Doing, Done). Each task card shows title, assignee and due date.
2. Add task: a form with browser and server validation; errors come back with 422 and show next to the fields. Success appends the card and updates every column's count (out-of-band swaps or HX-Trigger).
3. Edit in place: click a card to edit it; Save with PUT; Cancel restores the view.
4. Move: buttons (or a drag-and-drop island) move a card between columns with PATCH.
5. Delete: with hx-confirm, a fade-out, and an empty 200 response.
6. Search and filters: active search by title, filter by assignee; the URL updates with hx-replace-url, and reloading the URL shows the same filtered board.
7. Live updates: another user's changes appear within 5 seconds (polling) or instantly (SSE extension).
8. History: each task has its own URL (/tasks/42) that works as a full page and as an htmx fragment; Vary: HX-Request is set.
9. Feedback: indicators on every request, disabled buttons while saving, a timeout, and a visible error message for server and network failures.
10. Security: escaped output, hx-disable around any user HTML, CSRF tokens via hx-headers, authorisation on every endpoint.
11. Accessibility: keyboard-usable controls, labelled inputs, aria-live on regions that update.
12. Tests: server tests that request each endpoint with and without HX-Request and check status codes and HTML.

Deliverables

• The repository with a README: how to run it, and a short architecture note (which parts use htmx, which use JavaScript, and why).
• A 2-minute screen recording showing every requirement.
• A note on what you would change to move to htmx 4.

Tips

Start from the contacts app in this course; the board uses the same patterns. Build one column end to end (list, add, edit, delete) before adding the others, and keep each fragment in its own template partial from the start.

Further reading: htmx examples · Hypermedia Systems