Track project · 13

Build the Production Task Screen

Build a complete task screen using React Hook Form, Zod, TanStack Query, and deliberate state ownership.

Build plan

Work through it one observable step at a time

01
Create stable query-key factories for list/detail resources.
02
Load the task list and render loading, empty, error, and success states.
03
Build the create form with React Hook Form and Zod.
04
Map API validation errors back to the form without losing client validation.
05
Create mutations and invalidate only the cache identities affected by the change.
06
Add paginated queries and prefetch the likely next page.
07
Add one optimistic update with snapshot/cancel/rollback logic.
08
Reproduce a mutation race and decide whether cancellation, sequencing, or server reconciliation owns the fix.
09
Move shareable filters/page state into the URL and justify remaining local state.

Evidence

Do not rely on “it seems to work”

Evidence to collect

A clean Git diff or file-tree changeCommands used and their exit/resultBrowser, HTTP, database, test, container, or CI evidence that proves the behaviorOne deliberate failure, the evidence you used, and the root-cause fixA short explanation of why the final responsibility lives in the chosen layer

Project exit ticket

Close the project only when these are true

Completion

I can demonstrate every deliverable.I can reproduce one key part without the walkthrough.I can explain one trade-off I deliberately chose.I can show one failure that my tests, constraints, or runbook now protects against.