Track project · 06

Build the TaskFlow Web Shell

Turn the React mental model into a real Next.js App Router application with deliberate server/client boundaries.

Definition of done

What you are building

Build plan

Work through it one observable step at a time

01
Create the Next.js app and inspect every generated top-level file before editing.
02
Build the root layout and a simple application shell.
03
Add `/tasks` and `/tasks/[id]` routes and navigate using `Link`.
04
Keep the task list page server-side and fetch server data there.
05
Create a small Client Component for filtering or dialog state instead of marking the whole page client-side.
06
Add `loading.tsx`, `error.tsx`, and `not-found.tsx` and reproduce each state deliberately.
07
Separate server-only and public environment variables.
08
Run the production build and fix every warning/error before moving on.

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.