Topic

Revision map: React → RTK/Query → Next

Definition

A frontend architecture map assigns rendering, client state, server state, routing, and API ownership to distinct tools with clear boundaries.

In simpler words

React renders, Query synchronizes Nest data, RTK holds shared client-only state, and Next provides the app shell.

Use this map before coding so an attractive shortcut does not create two sources of truth.

Open live example →

After this you can

Explain the state boundary
Choose the smallest correct tool

Apply the map

React components render props and local UI state.

TanStack Query owns cached data from Nest.

Redux Toolkit owns shared client-only state such as an unfinished composer draft.

Next App Router owns route structure and Server/Client Component boundaries.

Nest owns product APIs, rules, and cookie authentication.

Keep in mind

Describe ownership before choosing an API or state container.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What should a Week 4 revision map emphasize?

Concept

That each week is isolated and its concepts don’t build on the nextThat backend Nest modules belong on the frontend spineHow HTML/CSS → React → Next → Query/RTK fit one frontend pathThat data libraries should be learned before core React state

2. Where do controlled inputs belong in the map?

Syntax

After RTK so drafts have a store to live inIn the Next App Router data-fetching stageAlongside the Query cache lessonsReact state fundamentals before data libraries

3. RTK vs Query on the map?

Practical

RTK for the server cache; Query for local UI togglesBoth should cache the same server list for redundancyQuery for form drafts; RTK for fetched listsRTK for client drafts; Query for server cache

4. Why revisit keys/lists?

Logic

They mainly improve the initial paint performanceThey unlock correct state in dynamic UIsThey are only needed for CSS grid layout of listsThey are required for server-side rendering to work

5. Next’s place on the map?

Concept

Pages Router fundamentals before learning any ReactServer Actions before understanding component stateAs a full replacement for the React lessonsApp Router + server/client boundaries after React basics

6. Playgrounds purpose?

Practical

Serve as the graded assessment for each topicPractice interactive skills without waiting for capstoneReplace the written lessons with demos onlyAct as the production system of record

7. Capstone Notes UI sits where?

Syntax

Early Week 1 practice right after HTML/CSS basicsA backend-only Nest build with no React UIA standalone styling exercise with no routing or dataLate FE practice integrating routing, state, and API client patterns

8. What is not the revision goal?

Logic

Connecting concepts across weeksIdentifying which layer owns which stateKnowing when to use QueryMemorizing one duplicated quiz sentence

9. Cookie auth on the FE map?

Concept

Web client sends credentials to Nest; Nest owns authzThe web client verifies the JWT signature before each requestThe browser stores the password hash for re-loginThe FE issues its own tokens and Nest trusts them

10. Best revision habit?

Practical

Re-read weak topics and re-quiz with distinct questionsRe-take the same quiz until you memorize its answersFocus only on the topics you already passedRead every lesson once through with no quizzing

11. Revision: what is the rendered width of .card?

Conceptintermediate

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid;
  box-sizing: border-box;
}

344px300px — border-box includes padding and border in the width340px304px

12. Revision: what React fundamental does this show?

Syntaxintermediate

<input value={q} onChange={(e) => setQ(e.target.value)} />

An uncontrolled input that reads from the DOM on submitA controlled input bound to state via value + onChangeTwo-way binding React wires up automaticallyA ref-based input that syncs state on blur

13. Revision: what must SearchBox include to use useState?

Practicaladvanced

// app/page.tsx
export default function Page() {
  return <SearchBox />; // SearchBox uses useState
}

A "use client" directive making it a Client ComponentA "use server" directive at the top of the fileAn async function wrapper so hooks are allowedA Suspense boundary around the component

14. Revision: what ownership pattern does this demonstrate?

Logicadvanced

const { data } = useQuery({ queryKey: ['notes'], queryFn });
const draft = useAppSelector(s => s.noteDraft);

Both own the same server listQuery owns server data; RTK owns the client draftRTK owns the server cacheQuery owns the draft

15. Revision: why does this matter for Nest auth?

Conceptintermediate

axios.create({ baseURL: '/api', withCredentials: true });

It attaches a bearer token from localStorage to each requestIt sends the httpOnly auth cookie so guarded endpoints workIt enables CORS preflight for the /api originIt reads the httpOnly cookie in JS and forwards it

Checking your session…