Demo project for the frontend intro. It's a sandwich menu built with Next.js (App Router), React and Tailwind CSS.
Requires Node.js 20.9 or newer.
npm install
npm run devThen open http://localhost:3000.
| Command | What it does |
|---|---|
npm run dev |
Start the development server on port 3000 |
npm run build |
Create a production build |
npm run start |
Serve the production build |
npm run lint |
Run ESLint |
main is the starting point: the entire menu page lives in one component, with
no props, no data layer and no state.
The exercises build on each other. Each assignment says which branch to start from and where its solution lives.
| Exercise | Assignment |
|---|---|
| 1 — Split the page into components, render the menu as a list | 01-components.md |
| 2 — Basket state, with the header badge derived from it | 02-state-management-and-reactivity.md |
3 — A /cart route, with the basket shared across routes |
03-routing-and-shared-state.md |
| 4 — Load the menu from an API with TanStack Query | 04-apis.md |
| 5 — A checkout form and a confirmation page | 05-forms.md |