Topic
Definition
Hands-on practice is a set of small coding projects with explicit deliverables and acceptance criteria that force you to apply React, state/Effects, RTK, TanStack Query, Next, and Nest ownership together — not a multiple-choice exam.
In simpler words
You build short apps/features in code. Each project locks in a week of the frontend track.
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.
Definition
A staged coding practice set asks you to implement bounded UI deliverables that map to curriculum weeks, then demo them in the browser with Network tab proof.
In simpler words
Finish one project before the next. Prefer one Notes client that grows — or separate routes/folders per stage.
Done means: feature works, loading/error/empty are honest, and a short README lists how to run it plus which week topics you covered.
From Project 2 onward, Redux Toolkit is required for client-only state (drafts, selection, UI prefs). Nest lists stay in TanStack Query — never both.
Do not put JWTs in localStorage. Do not duplicate Nest CRUD in Next Route Handlers.
If the backend Notes API is not ready, mock the HTTP contract first, then swap to Nest.
Definition
Build a Notes board UI with components, props, conditional rendering, lists with stable keys, and event handlers — local useState only.
In simpler words
No Nest and no Redux yet. Focus on pure components and correct handler patterns before introducing a store.
Deliverables: NoteList, NoteItem, NoteForm; add/edit/delete in local state; empty and “selected note” views; keyboard-friendly buttons (type="button" where needed).
Topics covered: components, JSX, props, conditionals, lists/keys, events, state memory, render/commit mental model.
Prep for P2: keep a clear “composer text” and “selected id” in component state so you know what will move into RTK next.
- [ ] List uses stable keys (not index if reorder/delete)
- [ ] Handlers are passed, not called during render
- [ ] Empty state distinct from “has notes”
- [ ] No direct DOM mutation in render
- [ ] Composer text + selected note id are obvious state values (ready to lift into RTK in P2)UI correctness first; RTK arrives in Project 2 once the board works.
Definition
Introduce a real Redux Toolkit store and connect the board to Nest (or a stub): list/create via TanStack Query + Axios withCredentials; keep unfinished composer text and selection in RTK slices.
In simpler words
Prove the course ownership rule: RTK never becomes a second Nest cache.
RTK deliverables (required): configureStore; at least one createSlice (e.g. notesUiSlice) with draftTitle/draftBody (or draft text), selectedNoteId, discardDraft / setDraft / selectNote actions; typed useAppDispatch / useAppSelector hooks; Provider wrapping the client tree.
Query deliverables: useQuery for the notes list; useMutation for create; onSuccess clears the RTK draft and invalidateQueries on the list key; disable submit while pending.
Auth: Axios withCredentials; 401 → prompt login; no JWT in localStorage.
Topics covered: RTK fundamentals (store/slice/hooks), client drafts, TanStack Query, Axios/Nest cookies, RTK vs Query.
- [ ] configureStore + notesUiSlice + typed hooks committed
- [ ] Redux DevTools (or log) shows draft updates as you type
- [ ] List lives only in Query (not mirrored into Redux)
- [ ] Draft survives navigation until success or discard
- [ ] onSuccess: clear RTK draft + invalidateQueries
- [ ] selectedNoteId lives in RTK (client UI), not in Query cache hacks
- [ ] No JWT in localStorageIf the Nest list is also in Redux, Project 2 fails the ownership bar.
const notesUiSlice = createSlice({
name: 'notesUi',
initialState: { draft: '', selectedNoteId: null as string | null },
reducers: {
setDraft(state, action: PayloadAction<string>) { state.draft = action.payload; },
discardDraft(state) { state.draft = ''; },
selectNote(state, action: PayloadAction<string | null>) {
state.selectedNoteId = action.payload;
},
},
});Keep fields client-owned. Do not store notes[] from Nest here.
Definition
Host the Notes UI in Next App Router with a Server Component page shell, a Client Component board, and the RTK Provider only on the client subtree that needs the store.
In simpler words
Keep product writes on Nest. Carry forward the P2 store — do not throw away RTK when you add Next.
Deliverables: app route for notes; server page composing a client NotesBoard; AppProviders (or equivalent) wrapping QueryClientProvider + Redux Provider for the client tree; Link from nav; loading/error UI; metadata.
RTK requirement: selectedNoteId and draft still come from the store after the Next move; prove the store survives client navigations within the notes area.
Topics covered: Next layouts/pages, Link, Server/Client, Provider placement, fetching/mutating with Query; Nest remains API owner.
- [ ] use client only on interactive leaf + providers module
- [ ] Redux Provider is not on a Server Component file
- [ ] Draft/selection still driven by RTK after Next migration
- [ ] Internal nav uses next/link
- [ ] Mutation success navigates/refreshes only after Nest accepts
- [ ] No server-only secrets in client modulesMoving to Next must not demote RTK back to useState for drafts.
Definition
Expand Redux Toolkit for client UI chrome (filter form draft, panel open/closed, sort preference) while TanStack Query owns the server list using committed filter values in the query key.
In simpler words
This is where RTK gets more surface area without stealing Nest data.
RTK deliverables: extend notesUiSlice (or add notesChromeSlice) with filterDraft (q/status), appliedFilters (committed on Submit), isComposerOpen (or equivalent); actions applyFilters / resetFilters / toggleComposer.
Query deliverables: queryKey includes appliedFilters + page; list refetch when applied filters change — not on every keystroke in filterDraft.
Polish: distinct loading/empty/error; mutation errors on the form; ARCHITECTURE.md ownership table (React / RTK / Query / Next / Nest) with one sentence each.
Topics covered: RTK for shared client UI state, Query keys, revision map, challenge lessons (Query vs RTK), failure honesty.
- [ ] Typing in filter fields updates RTK filterDraft only
- [ ] Submit/Apply copies filterDraft → appliedFilters and Query key changes
- [ ] Nest notes array never stored in Redux
- [ ] Composer open/closed (or similar chrome) in RTK
- [ ] Empty ≠ loading; mutation errors on the form
- [ ] ARCHITECTURE.md names RTK for drafts/chrome and Query for Nest lists
- [ ] Demo: type draft → post → change filters → apply → 401 recoveryRTK handles chrome and drafts; Query handles server reads/writes.
RTK: draft text, selectedNoteId, filterDraft, appliedFilters, UI flags
Query: notes list + create/update mutations (Nest)
Next: routes, RSC shell, metadata
Nest: auth, validation, persistenceIf a value could change on the server for another user, it does not belong in RTK.
Definition
Four small demos beat one half-finished mega UI.
In simpler words
Timebox roughly: P1 0.5 day, P2 1–1.5 days (include RTK store setup), P3 1 day, P4 0.5–1 day.
Pair with the backend Notes projects if your cohort does both tracks.
When stuck, reopen the RTK fundamentals / drafts topics before adding another library.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 3 · practical 2 · logic 2