Command Palette

Search for a command to run...

Hectal
Phase 27Advanced28 of 28 in React

Capstone: Build a Complete App

Plan, build, test and ship a real task board with React: components, a reducer with context, persistence, URL filters, a fake API, optimistic updates, accessibility and tests.

This phase pulls the whole course together into one app: a task board with three columns (To do, Doing, Done). You'll add, edit, move and delete tasks, filter and search them through the URL, save them so they survive a reload, talk to a pretend server that is slow and sometimes fails, move cards optimistically and roll back on errors, drive everything from the keyboard, show 5,000 archived tasks without slowing down, and prove it all works with tests.

Each topic moves the app one milestone further, and its main live example is the full app as of that milestone, in one file with comments marking where each real file would go. Every step links back to the topic that taught it: Thinking in React (2.7), reducer + context (9.6), useSyncExternalStore (10.3), routing (13.x), async UI (14.x), performance (16.x), testing (17.x), accessibility (18.x), deploying (23.x), virtualised lists (24.1) and the RADIO plan (25.1).

The exercises are the same milestones as hands-on builds. Each starts from the previous milestone's working code with TODOs, and the checks test the new behaviour, so finishing all six means you have built the app yourself.

0/6 · 0%
6 topics ~3 h 19 code blocks & diagrams
Start with the first topic
1
27.1

Plan the App

Before writing code, plan the task board with the RADIO steps from Phase 25: list the requirements, sketch a mockup, turn it into a component tree, decide what is state and where it lives, and design the data model and API.

25 min 1 diagram 2 code practice

2
27.2

Build the Components

Milestone 1: build the board as a static version first, components drawn from data with props only and no state, using composition so a Column can hold any content, and style it with plain CSS.

26 min 3 code practice

3
27.3

State, Reducer and Persistence

Milestones 2 and 3: every change to the tasks goes through one reducer, the tasks and dispatch are shared by two contexts with custom hooks, and a small external store read with useSyncExternalStore saves them to localStorage so they survive a reload.

33 min 3 code practice

4
27.4

Filters, Routing and Async

Milestone 4: search and priority filters live in the URL, tasks load from a slow fake API with loading, error and retry states, moves are optimistic and roll back when the server fails, and a 5,000-task archive renders only the rows you can see.

36 min 3 code practice

5
27.5

Accessibility, Performance and Tests

Milestone 5: make every action work from the keyboard, keep focus on a card when it moves, announce changes to screen readers, add memo only where render counts show wasted work, and prove the behaviour with Testing Library tests.

41 min 3 code practice

6
27.6

Ship It

Milestone 6: protect the app with an error boundary and error reporting, split the archive into its own lazily loaded chunk, build it with Vite, deploy it with an SPA fallback, write a README, and plan what to add next.

25 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Milestone 1: a static board from data

Build the static task board from COLUMNS and SEED_TASKS with props only (no state). Follow the TODOs.

Intermediate
2

Milestone 2: add, edit, move and delete with a reducer

The components already dispatch actions through context, but tasksReducer ignores them. Write the four cases so the board works.

Intermediate
3

Milestone 3: save the board to localStorage

The tasks now live in an external store read with useSyncExternalStore, but nothing is saved. Finish taskStore.js.

Advanced
4

Milestone 4: filters and search in the URL

Keep the search text and the priority filter in the URL with useSearchParams() from react-router, and show only matching tasks.

Advanced
5

Milestone 5: optimistic moves with rollback

The board loads from a fake API that takes 300 ms. Moving a card waits for the server, and failures are ignored. Make moveTask optimistic.

Advanced
6

Milestone 6: keyboard moves, focus and announcements

Make moving cards work well from the keyboard and with a screen reader.

Advanced