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
These are deliberately NOT the Notes capstone. The Notes UI is your single end-of-week build; this topic is a varied menu of standalone apps (inspired by the roadmap.sh React/Next project lists in the navbar) so you practice the same concepts in fresh contexts.
Open

End-of-week mini-project · practice only

Capstone Notes UI

Grow a Notes client through React foundations, RTK drafts, Query lists, and a Next shell — resolving the Week 4 challenges while Nest owns auth and persistence.

Definition

A staged Notes UI that composes the whole frontend track — React UI, RTK client drafts/chrome, TanStack Query server lists, and Next App Router hosting — against a Nest Notes API (or stub), and settles the revision-week Server/Client and Query/RTK decisions.

In simpler words

The track finale: one Notes product UI that proves the ownership map. You revise every layer, dodge a stale-state bug, and pick the right home for each piece of state.

Concepts covered this week

Revision map: React → RTK/Query → Next: The capstone layers all three: React UI, RTK drafts, Query lists, and a Next shell.
Explore the playground gallery: Borrow proven patterns (forms, lists, boundaries) from the gallery instead of reinventing them.
Challenge: stale state and Effects: Avoid a stale-closure bug in the notes filter/search Effect.
Challenge: Server or Client?: Decide which parts of the Notes shell are Server vs Client Components.
Challenge: Query or RTK?: Apply the ownership map — notes list in Query, draft/selection/filter in RTK.
Hands-on practice: This is the flagship build; the gallery offers extra varied practice apps.

Deliverables

A Notes board (list + form) with RTK for draft, selection, and filter chrome
TanStack Query for the Nest notes list + mutations, with 401 cookie-auth recovery
A Next route + Server shell + Client board; providers only on the client subtree
ARCHITECTURE.md ownership table and a demo script: draft → post → filter apply → 401 recovery

Build guide

Plan ownershipWrite the ownership table first: what lives in React, RTK, Query, Next, and Nest.
Build the React boardStart with a local Notes list/form to nail the component tree.
Add RTK draftsMove draft text, selection, and filter chrome into a slice.
Load with QueryFetch the notes list and wire create/edit/delete mutations with invalidation.
Recover from 401Detect an expired cookie and recover (refresh/redirect) without losing the draft.
Host in NextWrap it in a Next route with a Server shell and a Client board; place providers correctly.
Fix the challengesResolve the stale-Effect, Server/Client, and Query/RTK decisions and document them.

Acceptance checklist

- [ ] RTK never stores the Nest notes[] array
- [ ] Query key includes applied filters; filterDraft does not refetch every keystroke
- [ ] Next provider placement correct (client subtree only)
- [ ] 401 recovery keeps the in-progress draft
- [ ] Empty ≠ loading; mutation errors show on the form
- [ ] ARCHITECTURE.md names React / RTK / Query / Next / Nest; README lists run steps + covered topics

Stretch goals

Add tag filters synced to the URL and shareable.
Add optimistic note edits with rollback.
Deploy the Next app and point it at your Nest Notes API.

Tips

Grow the Notes UI in stages: React board → RTK drafts → Query lists → Next shell → filter chrome.
Use /examples/data for Query+Axios patterns and /examples/state for RTK vs Query ownership.
Pair with backend be-notes-p* if you own the API; otherwise stub the contract.
For extra, varied practice, see the Hands-on practice topic (portfolio, flash cards, pomodoro, quiz, weather, GitHub explorer).