JavaScript Curriculum
Capstone — Coffee Menu App
hardEverything comes together: the coffee shop menu is a real React SPA — filterable menu, shopping cart with useReducer, theme toggle via Context, item detail pages via Router, and live data via useFetch.
Capstone — Coffee Menu App
Every Chapter 03 skill has a place in this app. This is not an exercise — it is a real, shippable React application.
Your Skill Checklist
Track every React skill as you implement it:
Live Coffee Menu App
The fully working app — explore every feature before building your own:
6/6 items
Chapter 03 Complete
All 20 React Fundamentals lessons:
You can build production React apps. Chapter 04 → TypeScript + Next.js is next.
Your Challenge
Build the Coffee Menu App from scratch. Checklist requirements: JSX + components, props with spread, useState cart, functional updates, event handlers, conditional rendering (0 trap fix), .map() with key={id}, controlled search input, useEffect fetch with AbortController, named slots in Card, lifted state for search+filter, custom useFetch hook, Context for theme, React Router with 3 routes (Home, Menu, ItemDetail).
Challenge
Build the full Coffee Menu App. All 18 checklist items must be ticked. Minimum: components with props, useState cart, useEffect fetch, one Context (theme or cart), React Router with at least 3 routes, a custom hook, and controlled search input.
Capstone — Coffee Menu App
hardEverything comes together: the coffee shop menu is a real React SPA — filterable menu, shopping cart with useReducer, theme toggle via Context, item detail pages via Router, and live data via useFetch.
Capstone — Coffee Menu App
Every Chapter 03 skill has a place in this app. This is not an exercise — it is a real, shippable React application.
Your Skill Checklist
Track every React skill as you implement it:
Live Coffee Menu App
The fully working app — explore every feature before building your own:
6/6 items
Chapter 03 Complete
All 20 React Fundamentals lessons:
You can build production React apps. Chapter 04 → TypeScript + Next.js is next.
Your Challenge
Build the Coffee Menu App from scratch. Checklist requirements: JSX + components, props with spread, useState cart, functional updates, event handlers, conditional rendering (0 trap fix), .map() with key={id}, controlled search input, useEffect fetch with AbortController, named slots in Card, lifted state for search+filter, custom useFetch hook, Context for theme, React Router with 3 routes (Home, Menu, ItemDetail).
Challenge
Build the full Coffee Menu App. All 18 checklist items must be ticked. Minimum: components with props, useState cart, useEffect fetch, one Context (theme or cart), React Router with at least 3 routes, a custom hook, and controlled search input.