A complete app
Put the whole course together: components and props, lists, a controlled filter, a cart in context driven by a reducer, derived totals, and a validated checkout form.
Architecture of the shop
This capstone is a real, if small, application: data, shared state, local state, derived values, forms and accessibility all working together. Take your time, build it in slices, and enjoy it.
The capstone combines the course's big ideas into one structure. Product data is a constant. The cart is app-wide state managed by a reducer and shared through context, so any component can read it or dispatch to it. The product list has its own local filter state. Totals are derived. The checkout form is a set of controlled inputs with derived validation.
App ├─ CartProvider (useReducer + context) │ ├─ Header → useCart(): count │ ├─ ProductList → local filter state, dispatch(add) │ │ └─ ProductCard → props: product │ └─ CartPanel → items, derived total, dispatch(remove) │ └─ Checkout → controlled form, derived errors
Each piece of state lives as low as possible: the filter only matters to the product list, so it stays there; the cart matters everywhere, so it's provided at the top. Nothing is stored twice.