Week 4 — Revise, Challenge & Practice

Revise the FE architecture map, solve challenges, explore playgrounds, then ship the Capstone Notes UI mini-project.

1. Revision map: React → RTK/Query → Next
Use this map before coding so an attractive shortcut does not create two sources of truth.
Open
2. Explore the playground gallery
The gallery is not a replacement for product work: it is a fast feedback loop for concepts that are easier to see than memorize.
Open
3. Challenge: stale state and Effects
This challenge reinforces that Effects synchronize external systems; they are not a workaround for state flow.
Open
4. Challenge: Server or Client?
The challenge prevents accidentally marking a whole route client-only because one child needs a button.
Open
5. Challenge: Query or RTK?
The wrong split creates duplicated post arrays and manual synchronization bugs.
Open
6. Hands-on practice: build mini-projects
Capstone for the FE track: grow one Notes client through RTK drafts, Query lists, Next shell, and filter chrome. Earlier weeks already have practice-only briefs (Tic-Tac-Toe, Todo, Next blog/dashboard) on each week page — use those before diving deep here.
Open

End-of-week mini-project · practice only

Capstone Notes UI

Grow a Notes client through RTK drafts, Query lists, Next shell, and filter chrome — Nest owns auth and persistence.

Definition. The Week 4 FE capstone is a staged Notes UI that combines React foundations, RTK client drafts/chrome, TanStack Query server lists, and Next App Router hosting against a Nest Notes API (or stub).

In simpler words. This is the track finale: one Notes product UI that proves the ownership map. Deep steps live in the hands-on practice topic.

Deliverables

Notes board with list/form; RTK for draft + selection + filter chrome
Query for Nest notes list/mutations; cookie auth recovery on 401
Next route + Server shell + Client board; ARCHITECTURE.md ownership table
Demo script: draft → post → filter apply → 401 recovery

Acceptance checklist

- [ ] RTK never stores Nest notes[]
- [ ] Query key includes applied filters; filterDraft does not refetch every keystroke
- [ ] Next Provider placement correct
- [ ] Empty ≠ loading; mutation errors on the form
- [ ] ARCHITECTURE.md names React / RTK / Query / Next / Nest
- [ ] Follow the detailed checklists in the fe-hands-on-practice topic

Tips

Open the Hands-on practice topic for staged P1–P4 Notes UI acceptance lists.
Pair with backend be-notes-p* if you own the API; otherwise stub the contract.

Open related topic