💻 Frontend (code) — task list screen with add, toggle, delete #5

New issue

Open

opened 2026-09-28 07:55:56 +00:00 by SemianiakaVY · 0 comments

SemianiakaVY commented

2026-09-28 07:55:56 +00:00

Owner

Goal — the single task-list screen, wired to the API.

Owner — Code Expert (w4c-code).

Deliverables

/ — the task list: an add form (labelled input + submit), the rows with a done checkbox and a delete button, and an open-task counter formatted with toLocaleString('en-US').
Add / toggle / delete call POST / PATCH / DELETE on /api/todos and reflect the server response; on a non-2xx response show an error and revert the optimistic change.
Explicit loading, empty ("No tasks yet — add the first one") and error states; semantic landmarks, labelled input, visible focus, keyboard-operable controls, AA contrast.
No e-commerce screens, no admin/control-panel surface.

Acceptance (runtime + command)

Open http://localhost:9000/: add "write spec" → the row appears; tick it → completed style; delete → it disappears; the counter updates each time.
pnpm lint && pnpm typecheck && pnpm build → exit 0; the page renders the list from seeded data after a server restart.

Ref — docs/PLAN.md §5, SPEC.md §3/§5–§7; skills stack-nextjs, stack-nextjs-quality.

**Goal** — the single task-list screen, wired to the API. **Owner** — Code Expert (`w4c-code`). **Deliverables** - `/` — the task list: an add form (labelled input + submit), the rows with a done checkbox and a delete button, and an open-task counter formatted with `toLocaleString('en-US')`. - Add / toggle / delete call `POST` / `PATCH` / `DELETE` on `/api/todos` and reflect the server response; on a non-2xx response show an error and revert the optimistic change. - Explicit loading, empty ("No tasks yet — add the first one") and error states; semantic landmarks, labelled input, visible focus, keyboard-operable controls, AA contrast. - No e-commerce screens, no admin/control-panel surface. **Acceptance (runtime + command)** - Open `http://localhost:9000/`: add "write spec" → the row appears; tick it → completed style; delete → it disappears; the counter updates each time. - `pnpm lint && pnpm typecheck && pnpm build` → exit 0; the page renders the list from seeded data after a server restart. **Ref** — `docs/PLAN.md` §5, `SPEC.md` §3/§5–§7; skills `stack-nextjs`, `stack-nextjs-quality`.