The shop front

Library:ReactVue

In short: A web app project: a shop front with a catalogue from an API, a product page by address, a shared cart, a checkout with checks, and “My orders”.

Problem

The shop front

The shop has an API: products, categories, orders. What is missing is the shop front the buyer shops through. The buyer's path is:

1. Search the catalogue or pick a category.
2. Open a product and add it to the cart.
3. Change the quantities in the cart.
4. Order: name, email, address. A mistake shows where it is.
5. See the order in "My orders".

You have built every part in a lesson of its own. Here you put them together in one app and build it in five steps: every task starts from the solution of the one before.

The idea

The skeleton

This is the app at step zero: the menu and placeholder pages. Click through the menu.

React

main.jsxApp.jsxpages/CatalogPage.jsxpages/ProductPage.jsxpages/CartPage.jsxpages/CheckoutPage.jsxpages/OrdersPage.jsxpages/NotFoundPage.jsxcomponents/ProductCard.jsxcomponents/Filter.jsxcomponents/Field.jsxstore/cart.jsxapi.jsformat.jsstyle.css

import { createRoot } from 'react-dom/client';
import { MemoryRouter } from 'react-router';
import App from './App.jsx';
import { CartProvider } from './store/cart.jsx';
import './style.css';

// The sandbox has no address bar, so the history is kept in memory.
// In a real project: BrowserRouter.
createRoot(document.getElementById('root')).render(
  <MemoryRouter>
    <CartProvider>
      <App />
    </CartProvider>
  </MemoryRouter>,
);
 

import { createRoot } from 'react-dom/client'; import { MemoryRouter } from 'react-router'; import App from './App.jsx'; import { CartProvider } from './store/cart.jsx'; import './style.css'; // The sandbox has no address bar, so the history is kept in memory. // In a real project: BrowserRouter. createRoot(document.getElementById('root')).render( <MemoryRouter> <CartProvider> <App /> </CartProvider> </MemoryRouter>, );

import { NavLink, Route, Routes } from 'react-router';
import CartPage from './pages/CartPage.jsx';
import CatalogPage from './pages/CatalogPage.jsx';
import CheckoutPage from './pages/CheckoutPage.jsx';
import NotFoundPage from './pages/NotFoundPage.jsx';
import OrdersPage from './pages/OrdersPage.jsx';
import ProductPage from './pages/ProductPage.jsx';
import { useCart } from './store/cart.jsx';

export default function App() {
  const cart = useCart();
  return (
    <>
      <header>
        <strong>The shop</strong>
        <nav aria-label="Main menu">
          <NavLink to="/" end>Catalogue</NavLink>
          <NavLink to="/cart">Cart ({cart.count})</NavLink>
          <NavLink to="/orders">My orders</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<CatalogPage />} />
          <Route path="/product/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </>
  );
}
 

import { NavLink, Route, Routes } from 'react-router'; import CartPage from './pages/CartPage.jsx'; import CatalogPage from './pages/CatalogPage.jsx'; import CheckoutPage from './pages/CheckoutPage.jsx'; import NotFoundPage from './pages/NotFoundPage.jsx'; import OrdersPage from './pages/OrdersPage.jsx'; import ProductPage from './pages/ProductPage.jsx'; import { useCart } from './store/cart.jsx'; export default function App() { const cart = useCart(); return ( <> <header> <strong>The shop</strong> <nav aria-label="Main menu"> <NavLink to="/" end>Catalogue</NavLink> <NavLink to="/cart">Cart ({cart.count})</NavLink> <NavLink to="/orders">My orders</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<CatalogPage />} /> <Route path="/product/:id" element={<ProductPage />} /> <Route path="/cart" element={<CartPage />} /> <Route path="/checkout" element={<CheckoutPage />} /> <Route path="/orders" element={<OrdersPage />} /> <Route path="*" element={<NotFoundPage />} /> </Routes> </main> </> ); }

export default function CatalogPage() {
  return (
    <>
      <h1>Catalogue</h1>
      <p>The products come here.</p>
    </>
  );
}
 

export default function CatalogPage() { return ( <> <h1>Catalogue</h1> <p>The products come here.</p> </> ); }

export default function ProductPage() {
  return (
    <>
      <h1>Product</h1>
      <p>The product comes here.</p>
    </>
  );
}
 

export default function ProductPage() { return ( <> <h1>Product</h1> <p>The product comes here.</p> </> ); }

export default function CartPage() {
  return (
    <>
      <h1>Cart</h1>
      <p>The cart comes here.</p>
    </>
  );
}
 

export default function CartPage() { return ( <> <h1>Cart</h1> <p>The cart comes here.</p> </> ); }

export default function CheckoutPage() {
  return (
    <>
      <h1>Checkout</h1>
      <p>The checkout comes here.</p>
    </>
  );
}
 

export default function CheckoutPage() { return ( <> <h1>Checkout</h1> <p>The checkout comes here.</p> </> ); }

export default function OrdersPage() {
  return (
    <>
      <h1>My orders</h1>
      <p>Your orders come here.</p>
    </>
  );
}
 

export default function OrdersPage() { return ( <> <h1>My orders</h1> <p>Your orders come here.</p> </> ); }

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <>
      <h1>No such page</h1>
      <p>
        <Link to="/">Back to the catalogue</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFoundPage() { return ( <> <h1>No such page</h1> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); }

import { money } from '../format.js';

export default function ProductCard({ product }) {
  return (
    <li className="card">
      <h2>{product.name}</h2>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
    </li>
  );
}
 

import { money } from '../format.js'; export default function ProductCard({ product }) { return ( <li className="card"> <h2>{product.name}</h2> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> </li> ); }

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) {
  // Products live in the subcategories: "Food" and "Home" are only groups.
  const groups = categories.filter((c) => c.parentId !== null);
  return (
    <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}>
      <label>
        Search
        <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} />
      </label>
      <label>
        Category
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All</option>
          {groups.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </select>
      </label>
    </form>
  );
}
 

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) { // Products live in the subcategories: "Food" and "Home" are only groups. const groups = categories.filter((c) => c.parentId !== null); return ( <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}> <label> Search <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} /> </label> <label> Category <select value={category} onChange={(e) => onCategoryChange(e.target.value)}> <option value="">All</option> {groups.map((c) => ( <option key={c.id} value={c.id}> {c.name} </option> ))} </select> </label> </form> ); }

export default function Field({ name, label, type = 'text', value, error, onChange }) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {error && (
        <span id={errorId} className="error">
          {error}
        </span>
      )}
    </div>
  );
}
 

export default function Field({ name, label, type = 'text', value, error, onChange }) { const errorId = `${name}-error`; return ( <div className="field"> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} value={value} onChange={onChange} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? errorId : undefined} /> {error && ( <span id={errorId} className="error"> {error} </span> )} </div> ); }

// The cart comes in step 3. Until then it is empty and does not change.
export function CartProvider({ children }) {
  return children;
}

export function useCart() {
  return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} };
}
 

// The cart comes in step 3. Until then it is empty and does not change. export function CartProvider({ children }) { return children; } export function useCart() { return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} }; }

// Every request to the shop's API is here: the pages do not know the addresses.
async function request(path, options = {}) {
  const res = await fetch(path, options);
  const data = await res.json();
  if (!res.ok) {
    const error = new Error(data.error ?? `The server answered ${res.status}`);
    error.status = res.status;
    error.errors = data.errors;
    throw error;
  }
  return data;
}

export function getCategories() {
  return request('/api/categories');
}

export function getProducts({ q = '', category = '' } = {}, signal) {
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (category) params.set('category', category);
  return request(`/api/products?${params}`, { signal });
}

export function getProduct(id, signal) {
  return request(`/api/products/${id}`, { signal });
}

export function placeOrder(order) {
  return request('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order),
  });
}

// The training API has no login and returns the orders of every customer. You are customer 1.
// A real server returns only yours: it knows who you are from the session.
export const ME = 1;
export function getOrders(signal) {
  return request('/api/orders', { signal });
}
 

// Every request to the shop's API is here: the pages do not know the addresses. async function request(path, options = {}) { const res = await fetch(path, options); const data = await res.json(); if (!res.ok) { const error = new Error(data.error ?? `The server answered ${res.status}`); error.status = res.status; error.errors = data.errors; throw error; } return data; } export function getCategories() { return request('/api/categories'); } export function getProducts({ q = '', category = '' } = {}, signal) { const params = new URLSearchParams(); if (q) params.set('q', q); if (category) params.set('category', category); return request(`/api/products?${params}`, { signal }); } export function getProduct(id, signal) { return request(`/api/products/${id}`, { signal }); } export function placeOrder(order) { return request('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order), }); } // The training API has no login and returns the orders of every customer. You are customer 1. // A real server returns only yours: it knows who you are from the session. export const ME = 1; export function getOrders(signal) { return request('/api/orders', { signal }); }

export const money = (x) => '€' + x.toFixed(2);

export const date = (iso) => new Date(iso).toLocaleDateString('en-GB');

const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' };
export const statusText = (status) => STATUS[status] ?? status;
 

export const money = (x) => '€' + x.toFixed(2); export const date = (iso) => new Date(iso).toLocaleDateString('en-GB'); const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' }; export const statusText = (status) => STATUS[status] ?? status;

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; }
header strong { margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }
main { padding: 0 16px 24px; }
h1 { font-size: 1.4rem; }
input, select, button { font: inherit; padding: 4px 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; }
.card h2 { font-size: 1rem; margin: 0 0 4px; }
.card p { margin: 0; }
.muted { color: #5c6168; font-size: 0.85rem; }
.price { font-weight: 600; }
.cart, .orders { list-style: none; padding: 0; }
.cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.cart li span:first-child { flex: 1; }
.orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.orders h2 { font-size: 1rem; margin: 0; }
.orders p { margin: 2px 0; }
.field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; }
.field input[aria-invalid="true"] { border-color: #b42318; }
.error { color: #b42318; font-size: 0.85rem; }
 

* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; } header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; } header strong { margin-right: auto; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: inherit; } nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; } main { padding: 0 16px 24px; } h1 { font-size: 1.4rem; } input, select, button { font: inherit; padding: 4px 8px; } .filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; } .card h2 { font-size: 1rem; margin: 0 0 4px; } .card p { margin: 0; } .muted { color: #5c6168; font-size: 0.85rem; } .price { font-weight: 600; } .cart, .orders { list-style: none; padding: 0; } .cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .cart li span:first-child { flex: 1; } .orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .orders h2 { font-size: 1rem; margin: 0; } .orders p { margin: 2px 0; } .field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; } .field input[aria-invalid="true"] { border-color: #b42318; } .error { color: #b42318; font-size: 0.85rem; }

▶ RunRestore the code

The files are laid out like in a real project:

• api.js holds every request. The pages call getProducts, placeOrder and do not know the addresses. An error from the server comes as an Error with status and errors (the errors per field).
• format.js formats money, dates and status.
• pages/ are the pages, one per address. components/ are the parts the pages use: ProductCard, Filter, Field.
• store/cart is the cart, shared by the whole app.

The router is in main.jsx: MemoryRouter around CartProvider and App. The addresses are in App.jsx with Routes and Route, as in the routing lesson.

The sandbox has no address bar, so the history is kept in memory. In a real project it is BrowserRouter. The rest is the same.

Filter and Field are ready from the lessons: fields bound to state, and a field with a label and an error message. You write the pages and the cart.

Exercise

Step 1: the catalogue

The catalogue loads the products with getProducts({ q, category }) and shows them with ProductCard in a list with the class grid. The filter is on top. Every change of the search or the category starts a new request, and the old one is cancelled. While it waits, the page says "Loading…". When nothing matches, it says "No such products."

Watch for two things from the lesson on data from an API:

• The list follows the filter. The effect has [q, category] in its dependencies.
• The old answer does not win. If "Dairy" answers slowly and you have already picked "Drinks", the slow answer must not wipe out the new one. An AbortController cancels the old request in the effect's cleanup.

Write CatalogPage: the products from the API by the filter, "Loading…", "No such products." and cancelling the old request. The check searches for "bread", then picks "Dairy" and right away "Drinks" (Dairy answers in 900 ms), then searches inside a category.

React

main.jsxApp.jsxpages/CatalogPage.jsxpages/ProductPage.jsxpages/CartPage.jsxpages/CheckoutPage.jsxpages/OrdersPage.jsxpages/NotFoundPage.jsxcomponents/ProductCard.jsxcomponents/Filter.jsxcomponents/Field.jsxstore/cart.jsxapi.jsformat.jsstyle.css

import { createRoot } from 'react-dom/client';
import { MemoryRouter } from 'react-router';
import App from './App.jsx';
import { CartProvider } from './store/cart.jsx';
import './style.css';

// The sandbox has no address bar, so the history is kept in memory.
// In a real project: BrowserRouter.
createRoot(document.getElementById('root')).render(
  <MemoryRouter>
    <CartProvider>
      <App />
    </CartProvider>
  </MemoryRouter>,
);
 

import { createRoot } from 'react-dom/client'; import { MemoryRouter } from 'react-router'; import App from './App.jsx'; import { CartProvider } from './store/cart.jsx'; import './style.css'; // The sandbox has no address bar, so the history is kept in memory. // In a real project: BrowserRouter. createRoot(document.getElementById('root')).render( <MemoryRouter> <CartProvider> <App /> </CartProvider> </MemoryRouter>, );

import { NavLink, Route, Routes } from 'react-router';
import CartPage from './pages/CartPage.jsx';
import CatalogPage from './pages/CatalogPage.jsx';
import CheckoutPage from './pages/CheckoutPage.jsx';
import NotFoundPage from './pages/NotFoundPage.jsx';
import OrdersPage from './pages/OrdersPage.jsx';
import ProductPage from './pages/ProductPage.jsx';
import { useCart } from './store/cart.jsx';

export default function App() {
  const cart = useCart();
  return (
    <>
      <header>
        <strong>The shop</strong>
        <nav aria-label="Main menu">
          <NavLink to="/" end>Catalogue</NavLink>
          <NavLink to="/cart">Cart ({cart.count})</NavLink>
          <NavLink to="/orders">My orders</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<CatalogPage />} />
          <Route path="/product/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </>
  );
}
 

import { NavLink, Route, Routes } from 'react-router'; import CartPage from './pages/CartPage.jsx'; import CatalogPage from './pages/CatalogPage.jsx'; import CheckoutPage from './pages/CheckoutPage.jsx'; import NotFoundPage from './pages/NotFoundPage.jsx'; import OrdersPage from './pages/OrdersPage.jsx'; import ProductPage from './pages/ProductPage.jsx'; import { useCart } from './store/cart.jsx'; export default function App() { const cart = useCart(); return ( <> <header> <strong>The shop</strong> <nav aria-label="Main menu"> <NavLink to="/" end>Catalogue</NavLink> <NavLink to="/cart">Cart ({cart.count})</NavLink> <NavLink to="/orders">My orders</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<CatalogPage />} /> <Route path="/product/:id" element={<ProductPage />} /> <Route path="/cart" element={<CartPage />} /> <Route path="/checkout" element={<CheckoutPage />} /> <Route path="/orders" element={<OrdersPage />} /> <Route path="*" element={<NotFoundPage />} /> </Routes> </main> </> ); }

export default function CatalogPage() {
  return (
    <>
      <h1>Catalogue</h1>
      <p>The products come here.</p>
    </>
  );
}
 

export default function CatalogPage() { return ( <> <h1>Catalogue</h1> <p>The products come here.</p> </> ); }

export default function ProductPage() {
  return (
    <>
      <h1>Product</h1>
      <p>The product comes here.</p>
    </>
  );
}
 

export default function ProductPage() { return ( <> <h1>Product</h1> <p>The product comes here.</p> </> ); }

export default function CartPage() {
  return (
    <>
      <h1>Cart</h1>
      <p>The cart comes here.</p>
    </>
  );
}
 

export default function CartPage() { return ( <> <h1>Cart</h1> <p>The cart comes here.</p> </> ); }

export default function CheckoutPage() {
  return (
    <>
      <h1>Checkout</h1>
      <p>The checkout comes here.</p>
    </>
  );
}
 

export default function CheckoutPage() { return ( <> <h1>Checkout</h1> <p>The checkout comes here.</p> </> ); }

export default function OrdersPage() {
  return (
    <>
      <h1>My orders</h1>
      <p>Your orders come here.</p>
    </>
  );
}
 

export default function OrdersPage() { return ( <> <h1>My orders</h1> <p>Your orders come here.</p> </> ); }

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <>
      <h1>No such page</h1>
      <p>
        <Link to="/">Back to the catalogue</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFoundPage() { return ( <> <h1>No such page</h1> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); }

import { money } from '../format.js';

export default function ProductCard({ product }) {
  return (
    <li className="card">
      <h2>{product.name}</h2>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
    </li>
  );
}
 

import { money } from '../format.js'; export default function ProductCard({ product }) { return ( <li className="card"> <h2>{product.name}</h2> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> </li> ); }

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) {
  // Products live in the subcategories: "Food" and "Home" are only groups.
  const groups = categories.filter((c) => c.parentId !== null);
  return (
    <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}>
      <label>
        Search
        <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} />
      </label>
      <label>
        Category
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All</option>
          {groups.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </select>
      </label>
    </form>
  );
}
 

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) { // Products live in the subcategories: "Food" and "Home" are only groups. const groups = categories.filter((c) => c.parentId !== null); return ( <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}> <label> Search <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} /> </label> <label> Category <select value={category} onChange={(e) => onCategoryChange(e.target.value)}> <option value="">All</option> {groups.map((c) => ( <option key={c.id} value={c.id}> {c.name} </option> ))} </select> </label> </form> ); }

export default function Field({ name, label, type = 'text', value, error, onChange }) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {error && (
        <span id={errorId} className="error">
          {error}
        </span>
      )}
    </div>
  );
}
 

export default function Field({ name, label, type = 'text', value, error, onChange }) { const errorId = `${name}-error`; return ( <div className="field"> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} value={value} onChange={onChange} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? errorId : undefined} /> {error && ( <span id={errorId} className="error"> {error} </span> )} </div> ); }

// The cart comes in step 3. Until then it is empty and does not change.
export function CartProvider({ children }) {
  return children;
}

export function useCart() {
  return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} };
}
 

// The cart comes in step 3. Until then it is empty and does not change. export function CartProvider({ children }) { return children; } export function useCart() { return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} }; }

// Every request to the shop's API is here: the pages do not know the addresses.
async function request(path, options = {}) {
  const res = await fetch(path, options);
  const data = await res.json();
  if (!res.ok) {
    const error = new Error(data.error ?? `The server answered ${res.status}`);
    error.status = res.status;
    error.errors = data.errors;
    throw error;
  }
  return data;
}

export function getCategories() {
  return request('/api/categories');
}

export function getProducts({ q = '', category = '' } = {}, signal) {
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (category) params.set('category', category);
  return request(`/api/products?${params}`, { signal });
}

export function getProduct(id, signal) {
  return request(`/api/products/${id}`, { signal });
}

export function placeOrder(order) {
  return request('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order),
  });
}

// The training API has no login and returns the orders of every customer. You are customer 1.
// A real server returns only yours: it knows who you are from the session.
export const ME = 1;
export function getOrders(signal) {
  return request('/api/orders', { signal });
}
 

// Every request to the shop's API is here: the pages do not know the addresses. async function request(path, options = {}) { const res = await fetch(path, options); const data = await res.json(); if (!res.ok) { const error = new Error(data.error ?? `The server answered ${res.status}`); error.status = res.status; error.errors = data.errors; throw error; } return data; } export function getCategories() { return request('/api/categories'); } export function getProducts({ q = '', category = '' } = {}, signal) { const params = new URLSearchParams(); if (q) params.set('q', q); if (category) params.set('category', category); return request(`/api/products?${params}`, { signal }); } export function getProduct(id, signal) { return request(`/api/products/${id}`, { signal }); } export function placeOrder(order) { return request('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order), }); } // The training API has no login and returns the orders of every customer. You are customer 1. // A real server returns only yours: it knows who you are from the session. export const ME = 1; export function getOrders(signal) { return request('/api/orders', { signal }); }

export const money = (x) => '€' + x.toFixed(2);

export const date = (iso) => new Date(iso).toLocaleDateString('en-GB');

const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' };
export const statusText = (status) => STATUS[status] ?? status;
 

export const money = (x) => '€' + x.toFixed(2); export const date = (iso) => new Date(iso).toLocaleDateString('en-GB'); const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' }; export const statusText = (status) => STATUS[status] ?? status;

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; }
header strong { margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }
main { padding: 0 16px 24px; }
h1 { font-size: 1.4rem; }
input, select, button { font: inherit; padding: 4px 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; }
.card h2 { font-size: 1rem; margin: 0 0 4px; }
.card p { margin: 0; }
.muted { color: #5c6168; font-size: 0.85rem; }
.price { font-weight: 600; }
.cart, .orders { list-style: none; padding: 0; }
.cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.cart li span:first-child { flex: 1; }
.orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.orders h2 { font-size: 1rem; margin: 0; }
.orders p { margin: 2px 0; }
.field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; }
.field input[aria-invalid="true"] { border-color: #b42318; }
.error { color: #b42318; font-size: 0.85rem; }
 

* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; } header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; } header strong { margin-right: auto; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: inherit; } nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; } main { padding: 0 16px 24px; } h1 { font-size: 1.4rem; } input, select, button { font: inherit; padding: 4px 8px; } .filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; } .card h2 { font-size: 1rem; margin: 0 0 4px; } .card p { margin: 0; } .muted { color: #5c6168; font-size: 0.85rem; } .price { font-weight: 600; } .cart, .orders { list-style: none; padding: 0; } .cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .cart li span:first-child { flex: 1; } .orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .orders h2 { font-size: 1rem; margin: 0; } .orders p { margin: 2px 0; } .field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; } .field input[aria-invalid="true"] { border-color: #b42318; } .error { color: #b42318; font-size: 0.85rem; }

Check▶ Run

Exercise

Step 2: the product page

The name in ProductCard becomes a link to /product/:id. ProductPage takes id from the address, loads the product with getProduct(id) and shows the name, category, price and stock: "In stock: 18 pcs" or "Sold out". Below it is "More from this category": up to three other products from the same category, with links.

Watch for:

• The link belongs to the router: <Link to={…}>, not <a href>. A plain link loads the whole page again. In the sandbox it goes nowhere.
• Same page, another parameter. From "White cheese" to "Kashkaval cheese" the router does not make a new ProductPage, it only changes id. The effect has [id].
• The id from the address is a string: "7", not 7. getProduct(id) puts it in the address, and that is fine. If you look it up in an array with ===, you compare a string with a number.

The details are in the routing lesson.

Make the name in ProductCard a link and write ProductPage. The check opens "White cheese", then "Kashkaval cheese" from "More from this category", goes back to the catalogue and opens the sold-out "Cheese banitsa".

React

main.jsxApp.jsxpages/CatalogPage.jsxpages/ProductPage.jsxpages/CartPage.jsxpages/CheckoutPage.jsxpages/OrdersPage.jsxpages/NotFoundPage.jsxcomponents/ProductCard.jsxcomponents/Filter.jsxcomponents/Field.jsxstore/cart.jsxapi.jsformat.jsstyle.css

import { createRoot } from 'react-dom/client';
import { MemoryRouter } from 'react-router';
import App from './App.jsx';
import { CartProvider } from './store/cart.jsx';
import './style.css';

// The sandbox has no address bar, so the history is kept in memory.
// In a real project: BrowserRouter.
createRoot(document.getElementById('root')).render(
  <MemoryRouter>
    <CartProvider>
      <App />
    </CartProvider>
  </MemoryRouter>,
);
 

import { createRoot } from 'react-dom/client'; import { MemoryRouter } from 'react-router'; import App from './App.jsx'; import { CartProvider } from './store/cart.jsx'; import './style.css'; // The sandbox has no address bar, so the history is kept in memory. // In a real project: BrowserRouter. createRoot(document.getElementById('root')).render( <MemoryRouter> <CartProvider> <App /> </CartProvider> </MemoryRouter>, );

import { NavLink, Route, Routes } from 'react-router';
import CartPage from './pages/CartPage.jsx';
import CatalogPage from './pages/CatalogPage.jsx';
import CheckoutPage from './pages/CheckoutPage.jsx';
import NotFoundPage from './pages/NotFoundPage.jsx';
import OrdersPage from './pages/OrdersPage.jsx';
import ProductPage from './pages/ProductPage.jsx';
import { useCart } from './store/cart.jsx';

export default function App() {
  const cart = useCart();
  return (
    <>
      <header>
        <strong>The shop</strong>
        <nav aria-label="Main menu">
          <NavLink to="/" end>Catalogue</NavLink>
          <NavLink to="/cart">Cart ({cart.count})</NavLink>
          <NavLink to="/orders">My orders</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<CatalogPage />} />
          <Route path="/product/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </>
  );
}
 

import { NavLink, Route, Routes } from 'react-router'; import CartPage from './pages/CartPage.jsx'; import CatalogPage from './pages/CatalogPage.jsx'; import CheckoutPage from './pages/CheckoutPage.jsx'; import NotFoundPage from './pages/NotFoundPage.jsx'; import OrdersPage from './pages/OrdersPage.jsx'; import ProductPage from './pages/ProductPage.jsx'; import { useCart } from './store/cart.jsx'; export default function App() { const cart = useCart(); return ( <> <header> <strong>The shop</strong> <nav aria-label="Main menu"> <NavLink to="/" end>Catalogue</NavLink> <NavLink to="/cart">Cart ({cart.count})</NavLink> <NavLink to="/orders">My orders</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<CatalogPage />} /> <Route path="/product/:id" element={<ProductPage />} /> <Route path="/cart" element={<CartPage />} /> <Route path="/checkout" element={<CheckoutPage />} /> <Route path="/orders" element={<OrdersPage />} /> <Route path="*" element={<NotFoundPage />} /> </Routes> </main> </> ); }

import { useEffect, useState } from 'react';
import { getCategories, getProducts } from '../api.js';
import Filter from '../components/Filter.jsx';
import ProductCard from '../components/ProductCard.jsx';

export default function CatalogPage() {
  const [q, setQ] = useState('');
  const [category, setCategory] = useState('');
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    getCategories()
      .then(setCategories)
      .catch(() => setCategories([]));
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    setProducts(null);
    setError(null);
    getProducts({ q, category }, controller.signal)
      .then(setProducts)
      .catch((e) => {
        if (e.name !== 'AbortError') setError(e.message);
      });
    return () => controller.abort();
  }, [q, category]);

  return (
    <>
      <h1>Catalogue</h1>
      <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} />
      {error && <p role="alert">{error}</p>}
      {!error && !products && <p role="status">Loading…</p>}
      {products && products.length === 0 && <p>No such products.</p>}
      {products && products.length > 0 && (
        <ul className="grid">
          {products.map((p) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </ul>
      )}
    </>
  );
}
 

import { useEffect, useState } from 'react'; import { getCategories, getProducts } from '../api.js'; import Filter from '../components/Filter.jsx'; import ProductCard from '../components/ProductCard.jsx'; export default function CatalogPage() { const [q, setQ] = useState(''); const [category, setCategory] = useState(''); const [categories, setCategories] = useState([]); const [products, setProducts] = useState(null); const [error, setError] = useState(null); useEffect(() => { getCategories() .then(setCategories) .catch(() => setCategories([])); }, []); useEffect(() => { const controller = new AbortController(); setProducts(null); setError(null); getProducts({ q, category }, controller.signal) .then(setProducts) .catch((e) => { if (e.name !== 'AbortError') setError(e.message); }); return () => controller.abort(); }, [q, category]); return ( <> <h1>Catalogue</h1> <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} /> {error && <p role="alert">{error}</p>} {!error && !products && <p role="status">Loading…</p>} {products && products.length === 0 && <p>No such products.</p>} {products && products.length > 0 && ( <ul className="grid"> {products.map((p) => ( <ProductCard key={p.id} product={p} /> ))} </ul> )} </> ); }

export default function ProductPage() {
  return (
    <>
      <h1>Product</h1>
      <p>The product comes here.</p>
    </>
  );
}
 

export default function ProductPage() { return ( <> <h1>Product</h1> <p>The product comes here.</p> </> ); }

export default function CartPage() {
  return (
    <>
      <h1>Cart</h1>
      <p>The cart comes here.</p>
    </>
  );
}
 

export default function CartPage() { return ( <> <h1>Cart</h1> <p>The cart comes here.</p> </> ); }

export default function CheckoutPage() {
  return (
    <>
      <h1>Checkout</h1>
      <p>The checkout comes here.</p>
    </>
  );
}
 

export default function CheckoutPage() { return ( <> <h1>Checkout</h1> <p>The checkout comes here.</p> </> ); }

export default function OrdersPage() {
  return (
    <>
      <h1>My orders</h1>
      <p>Your orders come here.</p>
    </>
  );
}
 

export default function OrdersPage() { return ( <> <h1>My orders</h1> <p>Your orders come here.</p> </> ); }

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <>
      <h1>No such page</h1>
      <p>
        <Link to="/">Back to the catalogue</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFoundPage() { return ( <> <h1>No such page</h1> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); }

import { money } from '../format.js';

export default function ProductCard({ product }) {
  return (
    <li className="card">
      <h2>{product.name}</h2>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
    </li>
  );
}
 

import { money } from '../format.js'; export default function ProductCard({ product }) { return ( <li className="card"> <h2>{product.name}</h2> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> </li> ); }

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) {
  // Products live in the subcategories: "Food" and "Home" are only groups.
  const groups = categories.filter((c) => c.parentId !== null);
  return (
    <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}>
      <label>
        Search
        <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} />
      </label>
      <label>
        Category
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All</option>
          {groups.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </select>
      </label>
    </form>
  );
}
 

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) { // Products live in the subcategories: "Food" and "Home" are only groups. const groups = categories.filter((c) => c.parentId !== null); return ( <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}> <label> Search <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} /> </label> <label> Category <select value={category} onChange={(e) => onCategoryChange(e.target.value)}> <option value="">All</option> {groups.map((c) => ( <option key={c.id} value={c.id}> {c.name} </option> ))} </select> </label> </form> ); }

export default function Field({ name, label, type = 'text', value, error, onChange }) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {error && (
        <span id={errorId} className="error">
          {error}
        </span>
      )}
    </div>
  );
}
 

export default function Field({ name, label, type = 'text', value, error, onChange }) { const errorId = `${name}-error`; return ( <div className="field"> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} value={value} onChange={onChange} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? errorId : undefined} /> {error && ( <span id={errorId} className="error"> {error} </span> )} </div> ); }

// The cart comes in step 3. Until then it is empty and does not change.
export function CartProvider({ children }) {
  return children;
}

export function useCart() {
  return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} };
}
 

// The cart comes in step 3. Until then it is empty and does not change. export function CartProvider({ children }) { return children; } export function useCart() { return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} }; }

// Every request to the shop's API is here: the pages do not know the addresses.
async function request(path, options = {}) {
  const res = await fetch(path, options);
  const data = await res.json();
  if (!res.ok) {
    const error = new Error(data.error ?? `The server answered ${res.status}`);
    error.status = res.status;
    error.errors = data.errors;
    throw error;
  }
  return data;
}

export function getCategories() {
  return request('/api/categories');
}

export function getProducts({ q = '', category = '' } = {}, signal) {
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (category) params.set('category', category);
  return request(`/api/products?${params}`, { signal });
}

export function getProduct(id, signal) {
  return request(`/api/products/${id}`, { signal });
}

export function placeOrder(order) {
  return request('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order),
  });
}

// The training API has no login and returns the orders of every customer. You are customer 1.
// A real server returns only yours: it knows who you are from the session.
export const ME = 1;
export function getOrders(signal) {
  return request('/api/orders', { signal });
}
 

// Every request to the shop's API is here: the pages do not know the addresses. async function request(path, options = {}) { const res = await fetch(path, options); const data = await res.json(); if (!res.ok) { const error = new Error(data.error ?? `The server answered ${res.status}`); error.status = res.status; error.errors = data.errors; throw error; } return data; } export function getCategories() { return request('/api/categories'); } export function getProducts({ q = '', category = '' } = {}, signal) { const params = new URLSearchParams(); if (q) params.set('q', q); if (category) params.set('category', category); return request(`/api/products?${params}`, { signal }); } export function getProduct(id, signal) { return request(`/api/products/${id}`, { signal }); } export function placeOrder(order) { return request('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order), }); } // The training API has no login and returns the orders of every customer. You are customer 1. // A real server returns only yours: it knows who you are from the session. export const ME = 1; export function getOrders(signal) { return request('/api/orders', { signal }); }

export const money = (x) => '€' + x.toFixed(2);

export const date = (iso) => new Date(iso).toLocaleDateString('en-GB');

const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' };
export const statusText = (status) => STATUS[status] ?? status;
 

export const money = (x) => '€' + x.toFixed(2); export const date = (iso) => new Date(iso).toLocaleDateString('en-GB'); const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' }; export const statusText = (status) => STATUS[status] ?? status;

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; }
header strong { margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }
main { padding: 0 16px 24px; }
h1 { font-size: 1.4rem; }
input, select, button { font: inherit; padding: 4px 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; }
.card h2 { font-size: 1rem; margin: 0 0 4px; }
.card p { margin: 0; }
.muted { color: #5c6168; font-size: 0.85rem; }
.price { font-weight: 600; }
.cart, .orders { list-style: none; padding: 0; }
.cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.cart li span:first-child { flex: 1; }
.orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.orders h2 { font-size: 1rem; margin: 0; }
.orders p { margin: 2px 0; }
.field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; }
.field input[aria-invalid="true"] { border-color: #b42318; }
.error { color: #b42318; font-size: 0.85rem; }
 

* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; } header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; } header strong { margin-right: auto; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: inherit; } nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; } main { padding: 0 16px 24px; } h1 { font-size: 1.4rem; } input, select, button { font: inherit; padding: 4px 8px; } .filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; } .card h2 { font-size: 1rem; margin: 0 0 4px; } .card p { margin: 0; } .muted { color: #5c6168; font-size: 0.85rem; } .price { font-weight: 600; } .cart, .orders { list-style: none; padding: 0; } .cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .cart li span:first-child { flex: 1; } .orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .orders h2 { font-size: 1rem; margin: 0; } .orders p { margin: 2px 0; } .field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; } .field input[aria-invalid="true"] { border-color: #b42318; } .error { color: #b42318; font-size: 0.85rem; }

Check▶ Run

Exercise

Step 3: the cart

ProductPage and the menu already call useCart(): an "Add to cart" button, "In the cart: 2" and "Cart (2)". For now useCart is a placeholder. Write the real cart and CartPage.

store/cart.jsx has a CartProvider with useState and a CartContext, as in the shared state lesson. useCart() returns useContext(CartContext): items, count, total, add, setQty, remove, clear. count and total are worked out from items, not kept separately. Every change makes a new array: [...items, …], items.map(…), items.filter(…).

CartPage shows a row per product: the name, a drop-down "Quantity: White cheese" (from 1 up to the stock, at most 10), the row's sum and a "Remove" button named "Remove White cheese". Below them is "Total: …" and a "To checkout" link. An empty cart says "The cart is empty."

Write store/cart and CartPage. The check adds two white cheeses and apples, opens the cart, changes the cheese to 3 and removes the apples, watching the menu and the total.

React

main.jsxApp.jsxpages/CatalogPage.jsxpages/ProductPage.jsxpages/CartPage.jsxpages/CheckoutPage.jsxpages/OrdersPage.jsxpages/NotFoundPage.jsxcomponents/ProductCard.jsxcomponents/Filter.jsxcomponents/Field.jsxstore/cart.jsxapi.jsformat.jsstyle.css

import { createRoot } from 'react-dom/client';
import { MemoryRouter } from 'react-router';
import App from './App.jsx';
import { CartProvider } from './store/cart.jsx';
import './style.css';

// The sandbox has no address bar, so the history is kept in memory.
// In a real project: BrowserRouter.
createRoot(document.getElementById('root')).render(
  <MemoryRouter>
    <CartProvider>
      <App />
    </CartProvider>
  </MemoryRouter>,
);
 

import { createRoot } from 'react-dom/client'; import { MemoryRouter } from 'react-router'; import App from './App.jsx'; import { CartProvider } from './store/cart.jsx'; import './style.css'; // The sandbox has no address bar, so the history is kept in memory. // In a real project: BrowserRouter. createRoot(document.getElementById('root')).render( <MemoryRouter> <CartProvider> <App /> </CartProvider> </MemoryRouter>, );

import { NavLink, Route, Routes } from 'react-router';
import CartPage from './pages/CartPage.jsx';
import CatalogPage from './pages/CatalogPage.jsx';
import CheckoutPage from './pages/CheckoutPage.jsx';
import NotFoundPage from './pages/NotFoundPage.jsx';
import OrdersPage from './pages/OrdersPage.jsx';
import ProductPage from './pages/ProductPage.jsx';
import { useCart } from './store/cart.jsx';

export default function App() {
  const cart = useCart();
  return (
    <>
      <header>
        <strong>The shop</strong>
        <nav aria-label="Main menu">
          <NavLink to="/" end>Catalogue</NavLink>
          <NavLink to="/cart">Cart ({cart.count})</NavLink>
          <NavLink to="/orders">My orders</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<CatalogPage />} />
          <Route path="/product/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </>
  );
}
 

import { NavLink, Route, Routes } from 'react-router'; import CartPage from './pages/CartPage.jsx'; import CatalogPage from './pages/CatalogPage.jsx'; import CheckoutPage from './pages/CheckoutPage.jsx'; import NotFoundPage from './pages/NotFoundPage.jsx'; import OrdersPage from './pages/OrdersPage.jsx'; import ProductPage from './pages/ProductPage.jsx'; import { useCart } from './store/cart.jsx'; export default function App() { const cart = useCart(); return ( <> <header> <strong>The shop</strong> <nav aria-label="Main menu"> <NavLink to="/" end>Catalogue</NavLink> <NavLink to="/cart">Cart ({cart.count})</NavLink> <NavLink to="/orders">My orders</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<CatalogPage />} /> <Route path="/product/:id" element={<ProductPage />} /> <Route path="/cart" element={<CartPage />} /> <Route path="/checkout" element={<CheckoutPage />} /> <Route path="/orders" element={<OrdersPage />} /> <Route path="*" element={<NotFoundPage />} /> </Routes> </main> </> ); }

import { useEffect, useState } from 'react';
import { getCategories, getProducts } from '../api.js';
import Filter from '../components/Filter.jsx';
import ProductCard from '../components/ProductCard.jsx';

export default function CatalogPage() {
  const [q, setQ] = useState('');
  const [category, setCategory] = useState('');
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    getCategories()
      .then(setCategories)
      .catch(() => setCategories([]));
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    setProducts(null);
    setError(null);
    getProducts({ q, category }, controller.signal)
      .then(setProducts)
      .catch((e) => {
        if (e.name !== 'AbortError') setError(e.message);
      });
    return () => controller.abort();
  }, [q, category]);

  return (
    <>
      <h1>Catalogue</h1>
      <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} />
      {error && <p role="alert">{error}</p>}
      {!error && !products && <p role="status">Loading…</p>}
      {products && products.length === 0 && <p>No such products.</p>}
      {products && products.length > 0 && (
        <ul className="grid">
          {products.map((p) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </ul>
      )}
    </>
  );
}
 

import { useEffect, useState } from 'react'; import { getCategories, getProducts } from '../api.js'; import Filter from '../components/Filter.jsx'; import ProductCard from '../components/ProductCard.jsx'; export default function CatalogPage() { const [q, setQ] = useState(''); const [category, setCategory] = useState(''); const [categories, setCategories] = useState([]); const [products, setProducts] = useState(null); const [error, setError] = useState(null); useEffect(() => { getCategories() .then(setCategories) .catch(() => setCategories([])); }, []); useEffect(() => { const controller = new AbortController(); setProducts(null); setError(null); getProducts({ q, category }, controller.signal) .then(setProducts) .catch((e) => { if (e.name !== 'AbortError') setError(e.message); }); return () => controller.abort(); }, [q, category]); return ( <> <h1>Catalogue</h1> <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} /> {error && <p role="alert">{error}</p>} {!error && !products && <p role="status">Loading…</p>} {products && products.length === 0 && <p>No such products.</p>} {products && products.length > 0 && ( <ul className="grid"> {products.map((p) => ( <ProductCard key={p.id} product={p} /> ))} </ul> )} </> ); }

import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router';
import { getProduct, getProducts } from '../api.js';
import { money } from '../format.js';
import { useCart } from '../store/cart.jsx';

export default function ProductPage() {
  const { id } = useParams();
  const cart = useCart();
  const [product, setProduct] = useState(null);
  const [related, setRelated] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    async function load() {
      const p = await getProduct(id, controller.signal);
      setProduct(p);
      if (p.categoryId === null) return;
      const same = await getProducts({ category: p.categoryId }, controller.signal);
      setRelated(same.filter((x) => x.id !== p.id).slice(0, 3));
    }
    setProduct(null);
    setRelated([]);
    setError(null);
    load().catch((e) => {
      if (e.name !== 'AbortError') setError(e.status === 404 ? 'No such product.' : e.message);
    });
    return () => controller.abort();
  }, [id]);

  if (error) return <p role="alert">{error}</p>;
  if (!product) return <p role="status">Loading…</p>;
  const inCart = cart.items.find((i) => i.id === product.id)?.qty ?? 0;
  return (
    <article>
      <p>
        <Link to="/">← Back to the catalogue</Link>
      </p>
      <h1>{product.name}</h1>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
      <p>{product.stock > 0 ? `In stock: ${product.stock} pcs` : 'Sold out'}</p>
      <button type="button" disabled={product.stock === 0} onClick={() => cart.add(product)}>
        Add to cart
      </button>
      {inCart > 0 && <p role="status">In the cart: {inCart}</p>}
      {related.length > 0 && (
        <section aria-labelledby="related-title">
          <h2 id="related-title">More from this category</h2>
          <ul>
            {related.map((p) => (
              <li key={p.id}>
                <Link to={`/product/${p.id}`}>{p.name}</Link>
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  );
}
 

import { useEffect, useState } from 'react'; import { Link, useParams } from 'react-router'; import { getProduct, getProducts } from '../api.js'; import { money } from '../format.js'; import { useCart } from '../store/cart.jsx'; export default function ProductPage() { const { id } = useParams(); const cart = useCart(); const [product, setProduct] = useState(null); const [related, setRelated] = useState([]); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); async function load() { const p = await getProduct(id, controller.signal); setProduct(p); if (p.categoryId === null) return; const same = await getProducts({ category: p.categoryId }, controller.signal); setRelated(same.filter((x) => x.id !== p.id).slice(0, 3)); } setProduct(null); setRelated([]); setError(null); load().catch((e) => { if (e.name !== 'AbortError') setError(e.status === 404 ? 'No such product.' : e.message); }); return () => controller.abort(); }, [id]); if (error) return <p role="alert">{error}</p>; if (!product) return <p role="status">Loading…</p>; const inCart = cart.items.find((i) => i.id === product.id)?.qty ?? 0; return ( <article> <p> <Link to="/">← Back to the catalogue</Link> </p> <h1>{product.name}</h1> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> <p>{product.stock > 0 ? `In stock: ${product.stock} pcs` : 'Sold out'}</p> <button type="button" disabled={product.stock === 0} onClick={() => cart.add(product)}> Add to cart </button> {inCart > 0 && <p role="status">In the cart: {inCart}</p>} {related.length > 0 && ( <section aria-labelledby="related-title"> <h2 id="related-title">More from this category</h2> <ul> {related.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link> </li> ))} </ul> </section> )} </article> ); }

export default function CartPage() {
  return (
    <>
      <h1>Cart</h1>
      <p>The cart comes here.</p>
    </>
  );
}
 

export default function CartPage() { return ( <> <h1>Cart</h1> <p>The cart comes here.</p> </> ); }

export default function CheckoutPage() {
  return (
    <>
      <h1>Checkout</h1>
      <p>The checkout comes here.</p>
    </>
  );
}
 

export default function CheckoutPage() { return ( <> <h1>Checkout</h1> <p>The checkout comes here.</p> </> ); }

export default function OrdersPage() {
  return (
    <>
      <h1>My orders</h1>
      <p>Your orders come here.</p>
    </>
  );
}
 

export default function OrdersPage() { return ( <> <h1>My orders</h1> <p>Your orders come here.</p> </> ); }

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <>
      <h1>No such page</h1>
      <p>
        <Link to="/">Back to the catalogue</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFoundPage() { return ( <> <h1>No such page</h1> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); }

import { Link } from 'react-router';
import { money } from '../format.js';

export default function ProductCard({ product }) {
  return (
    <li className="card">
      <h2>
        <Link to={`/product/${product.id}`}>{product.name}</Link>
      </h2>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
    </li>
  );
}
 

import { Link } from 'react-router'; import { money } from '../format.js'; export default function ProductCard({ product }) { return ( <li className="card"> <h2> <Link to={`/product/${product.id}`}>{product.name}</Link> </h2> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> </li> ); }

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) {
  // Products live in the subcategories: "Food" and "Home" are only groups.
  const groups = categories.filter((c) => c.parentId !== null);
  return (
    <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}>
      <label>
        Search
        <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} />
      </label>
      <label>
        Category
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All</option>
          {groups.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </select>
      </label>
    </form>
  );
}
 

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) { // Products live in the subcategories: "Food" and "Home" are only groups. const groups = categories.filter((c) => c.parentId !== null); return ( <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}> <label> Search <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} /> </label> <label> Category <select value={category} onChange={(e) => onCategoryChange(e.target.value)}> <option value="">All</option> {groups.map((c) => ( <option key={c.id} value={c.id}> {c.name} </option> ))} </select> </label> </form> ); }

export default function Field({ name, label, type = 'text', value, error, onChange }) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {error && (
        <span id={errorId} className="error">
          {error}
        </span>
      )}
    </div>
  );
}
 

export default function Field({ name, label, type = 'text', value, error, onChange }) { const errorId = `${name}-error`; return ( <div className="field"> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} value={value} onChange={onChange} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? errorId : undefined} /> {error && ( <span id={errorId} className="error"> {error} </span> )} </div> ); }

// The cart comes in step 3. Until then it is empty and does not change.
export function CartProvider({ children }) {
  return children;
}

export function useCart() {
  return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} };
}
 

// The cart comes in step 3. Until then it is empty and does not change. export function CartProvider({ children }) { return children; } export function useCart() { return { items: [], count: 0, total: 0, add() {}, setQty() {}, remove() {}, clear() {} }; }

// Every request to the shop's API is here: the pages do not know the addresses.
async function request(path, options = {}) {
  const res = await fetch(path, options);
  const data = await res.json();
  if (!res.ok) {
    const error = new Error(data.error ?? `The server answered ${res.status}`);
    error.status = res.status;
    error.errors = data.errors;
    throw error;
  }
  return data;
}

export function getCategories() {
  return request('/api/categories');
}

export function getProducts({ q = '', category = '' } = {}, signal) {
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (category) params.set('category', category);
  return request(`/api/products?${params}`, { signal });
}

export function getProduct(id, signal) {
  return request(`/api/products/${id}`, { signal });
}

export function placeOrder(order) {
  return request('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order),
  });
}

// The training API has no login and returns the orders of every customer. You are customer 1.
// A real server returns only yours: it knows who you are from the session.
export const ME = 1;
export function getOrders(signal) {
  return request('/api/orders', { signal });
}
 

// Every request to the shop's API is here: the pages do not know the addresses. async function request(path, options = {}) { const res = await fetch(path, options); const data = await res.json(); if (!res.ok) { const error = new Error(data.error ?? `The server answered ${res.status}`); error.status = res.status; error.errors = data.errors; throw error; } return data; } export function getCategories() { return request('/api/categories'); } export function getProducts({ q = '', category = '' } = {}, signal) { const params = new URLSearchParams(); if (q) params.set('q', q); if (category) params.set('category', category); return request(`/api/products?${params}`, { signal }); } export function getProduct(id, signal) { return request(`/api/products/${id}`, { signal }); } export function placeOrder(order) { return request('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order), }); } // The training API has no login and returns the orders of every customer. You are customer 1. // A real server returns only yours: it knows who you are from the session. export const ME = 1; export function getOrders(signal) { return request('/api/orders', { signal }); }

export const money = (x) => '€' + x.toFixed(2);

export const date = (iso) => new Date(iso).toLocaleDateString('en-GB');

const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' };
export const statusText = (status) => STATUS[status] ?? status;
 

export const money = (x) => '€' + x.toFixed(2); export const date = (iso) => new Date(iso).toLocaleDateString('en-GB'); const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' }; export const statusText = (status) => STATUS[status] ?? status;

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; }
header strong { margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }
main { padding: 0 16px 24px; }
h1 { font-size: 1.4rem; }
input, select, button { font: inherit; padding: 4px 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; }
.card h2 { font-size: 1rem; margin: 0 0 4px; }
.card p { margin: 0; }
.muted { color: #5c6168; font-size: 0.85rem; }
.price { font-weight: 600; }
.cart, .orders { list-style: none; padding: 0; }
.cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.cart li span:first-child { flex: 1; }
.orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.orders h2 { font-size: 1rem; margin: 0; }
.orders p { margin: 2px 0; }
.field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; }
.field input[aria-invalid="true"] { border-color: #b42318; }
.error { color: #b42318; font-size: 0.85rem; }
 

* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; } header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; } header strong { margin-right: auto; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: inherit; } nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; } main { padding: 0 16px 24px; } h1 { font-size: 1.4rem; } input, select, button { font: inherit; padding: 4px 8px; } .filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; } .card h2 { font-size: 1rem; margin: 0 0 4px; } .card p { margin: 0; } .muted { color: #5c6168; font-size: 0.85rem; } .price { font-weight: 600; } .cart, .orders { list-style: none; padding: 0; } .cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .cart li span:first-child { flex: 1; } .orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .orders h2 { font-size: 1rem; margin: 0; } .orders p { margin: 2px 0; } .field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; } .field input[aria-invalid="true"] { border-color: #b42318; } .error { color: #b42318; font-size: 0.85rem; }

Check▶ Run

Exercise

Step 4: the checkout

CheckoutPage has a form with three Fields: "Name", "Email", "Address". On "Place order":

1. A check in the browser. An empty name: "Enter your name." An email without @: "Enter your email." An empty address: "Enter your address." If there is an error, no request goes out.
2. The request. placeOrder({ name, email, address, items }), where items is [{ productId, qty }] from the cart.
3. The answer. On 201 the page says, for example, "Order #61 for €15.80." and the cart is emptied. On 400 err.errors is an object per field, for example { email: "The email is not valid" }, and every message goes next to its field.

Field already shows error next to the field, with aria-invalid and aria-describedby. The form has noValidate, so that your messages speak, not the browser's bubbles. The check in the browser is a convenience: it catches the empty fields before a request goes out. The server has the last word, so "maria@shop" passes in the browser and the server sends it back. How to build a form is in the forms lesson.

Write CheckoutPage. The check adds two white cheeses, presses "Place order" with an empty form, then with the email "maria@shop" (the server rejects it) and last with a valid email.

React

main.jsxApp.jsxpages/CatalogPage.jsxpages/ProductPage.jsxpages/CartPage.jsxpages/CheckoutPage.jsxpages/OrdersPage.jsxpages/NotFoundPage.jsxcomponents/ProductCard.jsxcomponents/Filter.jsxcomponents/Field.jsxstore/cart.jsxapi.jsformat.jsstyle.css

import { createRoot } from 'react-dom/client';
import { MemoryRouter } from 'react-router';
import App from './App.jsx';
import { CartProvider } from './store/cart.jsx';
import './style.css';

// The sandbox has no address bar, so the history is kept in memory.
// In a real project: BrowserRouter.
createRoot(document.getElementById('root')).render(
  <MemoryRouter>
    <CartProvider>
      <App />
    </CartProvider>
  </MemoryRouter>,
);
 

import { createRoot } from 'react-dom/client'; import { MemoryRouter } from 'react-router'; import App from './App.jsx'; import { CartProvider } from './store/cart.jsx'; import './style.css'; // The sandbox has no address bar, so the history is kept in memory. // In a real project: BrowserRouter. createRoot(document.getElementById('root')).render( <MemoryRouter> <CartProvider> <App /> </CartProvider> </MemoryRouter>, );

import { NavLink, Route, Routes } from 'react-router';
import CartPage from './pages/CartPage.jsx';
import CatalogPage from './pages/CatalogPage.jsx';
import CheckoutPage from './pages/CheckoutPage.jsx';
import NotFoundPage from './pages/NotFoundPage.jsx';
import OrdersPage from './pages/OrdersPage.jsx';
import ProductPage from './pages/ProductPage.jsx';
import { useCart } from './store/cart.jsx';

export default function App() {
  const cart = useCart();
  return (
    <>
      <header>
        <strong>The shop</strong>
        <nav aria-label="Main menu">
          <NavLink to="/" end>Catalogue</NavLink>
          <NavLink to="/cart">Cart ({cart.count})</NavLink>
          <NavLink to="/orders">My orders</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<CatalogPage />} />
          <Route path="/product/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </>
  );
}
 

import { NavLink, Route, Routes } from 'react-router'; import CartPage from './pages/CartPage.jsx'; import CatalogPage from './pages/CatalogPage.jsx'; import CheckoutPage from './pages/CheckoutPage.jsx'; import NotFoundPage from './pages/NotFoundPage.jsx'; import OrdersPage from './pages/OrdersPage.jsx'; import ProductPage from './pages/ProductPage.jsx'; import { useCart } from './store/cart.jsx'; export default function App() { const cart = useCart(); return ( <> <header> <strong>The shop</strong> <nav aria-label="Main menu"> <NavLink to="/" end>Catalogue</NavLink> <NavLink to="/cart">Cart ({cart.count})</NavLink> <NavLink to="/orders">My orders</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<CatalogPage />} /> <Route path="/product/:id" element={<ProductPage />} /> <Route path="/cart" element={<CartPage />} /> <Route path="/checkout" element={<CheckoutPage />} /> <Route path="/orders" element={<OrdersPage />} /> <Route path="*" element={<NotFoundPage />} /> </Routes> </main> </> ); }

import { useEffect, useState } from 'react';
import { getCategories, getProducts } from '../api.js';
import Filter from '../components/Filter.jsx';
import ProductCard from '../components/ProductCard.jsx';

export default function CatalogPage() {
  const [q, setQ] = useState('');
  const [category, setCategory] = useState('');
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    getCategories()
      .then(setCategories)
      .catch(() => setCategories([]));
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    setProducts(null);
    setError(null);
    getProducts({ q, category }, controller.signal)
      .then(setProducts)
      .catch((e) => {
        if (e.name !== 'AbortError') setError(e.message);
      });
    return () => controller.abort();
  }, [q, category]);

  return (
    <>
      <h1>Catalogue</h1>
      <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} />
      {error && <p role="alert">{error}</p>}
      {!error && !products && <p role="status">Loading…</p>}
      {products && products.length === 0 && <p>No such products.</p>}
      {products && products.length > 0 && (
        <ul className="grid">
          {products.map((p) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </ul>
      )}
    </>
  );
}
 

import { useEffect, useState } from 'react'; import { getCategories, getProducts } from '../api.js'; import Filter from '../components/Filter.jsx'; import ProductCard from '../components/ProductCard.jsx'; export default function CatalogPage() { const [q, setQ] = useState(''); const [category, setCategory] = useState(''); const [categories, setCategories] = useState([]); const [products, setProducts] = useState(null); const [error, setError] = useState(null); useEffect(() => { getCategories() .then(setCategories) .catch(() => setCategories([])); }, []); useEffect(() => { const controller = new AbortController(); setProducts(null); setError(null); getProducts({ q, category }, controller.signal) .then(setProducts) .catch((e) => { if (e.name !== 'AbortError') setError(e.message); }); return () => controller.abort(); }, [q, category]); return ( <> <h1>Catalogue</h1> <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} /> {error && <p role="alert">{error}</p>} {!error && !products && <p role="status">Loading…</p>} {products && products.length === 0 && <p>No such products.</p>} {products && products.length > 0 && ( <ul className="grid"> {products.map((p) => ( <ProductCard key={p.id} product={p} /> ))} </ul> )} </> ); }

import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router';
import { getProduct, getProducts } from '../api.js';
import { money } from '../format.js';
import { useCart } from '../store/cart.jsx';

export default function ProductPage() {
  const { id } = useParams();
  const cart = useCart();
  const [product, setProduct] = useState(null);
  const [related, setRelated] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    async function load() {
      const p = await getProduct(id, controller.signal);
      setProduct(p);
      if (p.categoryId === null) return;
      const same = await getProducts({ category: p.categoryId }, controller.signal);
      setRelated(same.filter((x) => x.id !== p.id).slice(0, 3));
    }
    setProduct(null);
    setRelated([]);
    setError(null);
    load().catch((e) => {
      if (e.name !== 'AbortError') setError(e.status === 404 ? 'No such product.' : e.message);
    });
    return () => controller.abort();
  }, [id]);

  if (error) return <p role="alert">{error}</p>;
  if (!product) return <p role="status">Loading…</p>;
  const inCart = cart.items.find((i) => i.id === product.id)?.qty ?? 0;
  return (
    <article>
      <p>
        <Link to="/">← Back to the catalogue</Link>
      </p>
      <h1>{product.name}</h1>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
      <p>{product.stock > 0 ? `In stock: ${product.stock} pcs` : 'Sold out'}</p>
      <button type="button" disabled={product.stock === 0} onClick={() => cart.add(product)}>
        Add to cart
      </button>
      {inCart > 0 && <p role="status">In the cart: {inCart}</p>}
      {related.length > 0 && (
        <section aria-labelledby="related-title">
          <h2 id="related-title">More from this category</h2>
          <ul>
            {related.map((p) => (
              <li key={p.id}>
                <Link to={`/product/${p.id}`}>{p.name}</Link>
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  );
}
 

import { useEffect, useState } from 'react'; import { Link, useParams } from 'react-router'; import { getProduct, getProducts } from '../api.js'; import { money } from '../format.js'; import { useCart } from '../store/cart.jsx'; export default function ProductPage() { const { id } = useParams(); const cart = useCart(); const [product, setProduct] = useState(null); const [related, setRelated] = useState([]); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); async function load() { const p = await getProduct(id, controller.signal); setProduct(p); if (p.categoryId === null) return; const same = await getProducts({ category: p.categoryId }, controller.signal); setRelated(same.filter((x) => x.id !== p.id).slice(0, 3)); } setProduct(null); setRelated([]); setError(null); load().catch((e) => { if (e.name !== 'AbortError') setError(e.status === 404 ? 'No such product.' : e.message); }); return () => controller.abort(); }, [id]); if (error) return <p role="alert">{error}</p>; if (!product) return <p role="status">Loading…</p>; const inCart = cart.items.find((i) => i.id === product.id)?.qty ?? 0; return ( <article> <p> <Link to="/">← Back to the catalogue</Link> </p> <h1>{product.name}</h1> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> <p>{product.stock > 0 ? `In stock: ${product.stock} pcs` : 'Sold out'}</p> <button type="button" disabled={product.stock === 0} onClick={() => cart.add(product)}> Add to cart </button> {inCart > 0 && <p role="status">In the cart: {inCart}</p>} {related.length > 0 && ( <section aria-labelledby="related-title"> <h2 id="related-title">More from this category</h2> <ul> {related.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link> </li> ))} </ul> </section> )} </article> ); }

import { Link } from 'react-router';
import { money } from '../format.js';
import { useCart } from '../store/cart.jsx';

const upTo = (n) => Array.from({ length: Math.min(n, 10) }, (_, i) => i + 1);

export default function CartPage() {
  const cart = useCart();
  if (cart.items.length === 0)
    return (
      <>
        <h1>Cart</h1>
        <p>The cart is empty.</p>
        <p>
          <Link to="/">Back to the catalogue</Link>
        </p>
      </>
    );
  return (
    <>
      <h1>Cart</h1>
      <ul className="cart">
        {cart.items.map((item) => (
          <li key={item.id}>
            <span>{item.name}</span>
            <select
              aria-label={`Quantity: ${item.name}`}
              value={item.qty}
              onChange={(e) => cart.setQty(item.id, Number(e.target.value))}
            >
              {upTo(item.stock).map((n) => (
                <option key={n}>{n}</option>
              ))}
            </select>
            <span>{money(item.price * item.qty)}</span>
            <button type="button" aria-label={`Remove ${item.name}`} onClick={() => cart.remove(item.id)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
      <p className="price">
        Total: {money(cart.total)}
      </p>
      <Link to="/checkout">To checkout</Link>
    </>
  );
}
 

import { Link } from 'react-router'; import { money } from '../format.js'; import { useCart } from '../store/cart.jsx'; const upTo = (n) => Array.from({ length: Math.min(n, 10) }, (_, i) => i + 1); export default function CartPage() { const cart = useCart(); if (cart.items.length === 0) return ( <> <h1>Cart</h1> <p>The cart is empty.</p> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); return ( <> <h1>Cart</h1> <ul className="cart"> {cart.items.map((item) => ( <li key={item.id}> <span>{item.name}</span> <select aria-label={`Quantity: ${item.name}`} value={item.qty} onChange={(e) => cart.setQty(item.id, Number(e.target.value))} > {upTo(item.stock).map((n) => ( <option key={n}>{n}</option> ))} </select> <span>{money(item.price * item.qty)}</span> <button type="button" aria-label={`Remove ${item.name}`} onClick={() => cart.remove(item.id)}> Remove </button> </li> ))} </ul> <p className="price"> Total: {money(cart.total)} </p> <Link to="/checkout">To checkout</Link> </> ); }

export default function CheckoutPage() {
  return (
    <>
      <h1>Checkout</h1>
      <p>The checkout comes here.</p>
    </>
  );
}
 

export default function CheckoutPage() { return ( <> <h1>Checkout</h1> <p>The checkout comes here.</p> </> ); }

export default function OrdersPage() {
  return (
    <>
      <h1>My orders</h1>
      <p>Your orders come here.</p>
    </>
  );
}
 

export default function OrdersPage() { return ( <> <h1>My orders</h1> <p>Your orders come here.</p> </> ); }

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <>
      <h1>No such page</h1>
      <p>
        <Link to="/">Back to the catalogue</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFoundPage() { return ( <> <h1>No such page</h1> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); }

import { Link } from 'react-router';
import { money } from '../format.js';

export default function ProductCard({ product }) {
  return (
    <li className="card">
      <h2>
        <Link to={`/product/${product.id}`}>{product.name}</Link>
      </h2>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
    </li>
  );
}
 

import { Link } from 'react-router'; import { money } from '../format.js'; export default function ProductCard({ product }) { return ( <li className="card"> <h2> <Link to={`/product/${product.id}`}>{product.name}</Link> </h2> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> </li> ); }

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) {
  // Products live in the subcategories: "Food" and "Home" are only groups.
  const groups = categories.filter((c) => c.parentId !== null);
  return (
    <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}>
      <label>
        Search
        <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} />
      </label>
      <label>
        Category
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All</option>
          {groups.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </select>
      </label>
    </form>
  );
}
 

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) { // Products live in the subcategories: "Food" and "Home" are only groups. const groups = categories.filter((c) => c.parentId !== null); return ( <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}> <label> Search <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} /> </label> <label> Category <select value={category} onChange={(e) => onCategoryChange(e.target.value)}> <option value="">All</option> {groups.map((c) => ( <option key={c.id} value={c.id}> {c.name} </option> ))} </select> </label> </form> ); }

export default function Field({ name, label, type = 'text', value, error, onChange }) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {error && (
        <span id={errorId} className="error">
          {error}
        </span>
      )}
    </div>
  );
}
 

export default function Field({ name, label, type = 'text', value, error, onChange }) { const errorId = `${name}-error`; return ( <div className="field"> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} value={value} onChange={onChange} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? errorId : undefined} /> {error && ( <span id={errorId} className="error"> {error} </span> )} </div> ); }

import { createContext, useContext, useState } from 'react';

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);

  function add(product) {
    const found = items.find((i) => i.id === product.id);
    if (found) setItems(items.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i)));
    else setItems([...items, { id: product.id, name: product.name, price: product.price, stock: product.stock, qty: 1 }]);
  }
  function setQty(id, qty) {
    setItems(items.map((i) => (i.id === id ? { ...i, qty } : i)));
  }
  function remove(id) {
    setItems(items.filter((i) => i.id !== id));
  }
  function clear() {
    setItems([]);
  }

  const count = items.reduce((sum, i) => sum + i.qty, 0);
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  return <CartContext value={{ items, count, total, add, setQty, remove, clear }}>{children}</CartContext>;
}

export function useCart() {
  return useContext(CartContext);
}
 

import { createContext, useContext, useState } from 'react'; const CartContext = createContext(null); export function CartProvider({ children }) { const [items, setItems] = useState([]); function add(product) { const found = items.find((i) => i.id === product.id); if (found) setItems(items.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i))); else setItems([...items, { id: product.id, name: product.name, price: product.price, stock: product.stock, qty: 1 }]); } function setQty(id, qty) { setItems(items.map((i) => (i.id === id ? { ...i, qty } : i))); } function remove(id) { setItems(items.filter((i) => i.id !== id)); } function clear() { setItems([]); } const count = items.reduce((sum, i) => sum + i.qty, 0); const total = items.reduce((sum, i) => sum + i.price * i.qty, 0); return <CartContext value={{ items, count, total, add, setQty, remove, clear }}>{children}</CartContext>; } export function useCart() { return useContext(CartContext); }

// Every request to the shop's API is here: the pages do not know the addresses.
async function request(path, options = {}) {
  const res = await fetch(path, options);
  const data = await res.json();
  if (!res.ok) {
    const error = new Error(data.error ?? `The server answered ${res.status}`);
    error.status = res.status;
    error.errors = data.errors;
    throw error;
  }
  return data;
}

export function getCategories() {
  return request('/api/categories');
}

export function getProducts({ q = '', category = '' } = {}, signal) {
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (category) params.set('category', category);
  return request(`/api/products?${params}`, { signal });
}

export function getProduct(id, signal) {
  return request(`/api/products/${id}`, { signal });
}

export function placeOrder(order) {
  return request('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order),
  });
}

// The training API has no login and returns the orders of every customer. You are customer 1.
// A real server returns only yours: it knows who you are from the session.
export const ME = 1;
export function getOrders(signal) {
  return request('/api/orders', { signal });
}
 

// Every request to the shop's API is here: the pages do not know the addresses. async function request(path, options = {}) { const res = await fetch(path, options); const data = await res.json(); if (!res.ok) { const error = new Error(data.error ?? `The server answered ${res.status}`); error.status = res.status; error.errors = data.errors; throw error; } return data; } export function getCategories() { return request('/api/categories'); } export function getProducts({ q = '', category = '' } = {}, signal) { const params = new URLSearchParams(); if (q) params.set('q', q); if (category) params.set('category', category); return request(`/api/products?${params}`, { signal }); } export function getProduct(id, signal) { return request(`/api/products/${id}`, { signal }); } export function placeOrder(order) { return request('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order), }); } // The training API has no login and returns the orders of every customer. You are customer 1. // A real server returns only yours: it knows who you are from the session. export const ME = 1; export function getOrders(signal) { return request('/api/orders', { signal }); }

export const money = (x) => '€' + x.toFixed(2);

export const date = (iso) => new Date(iso).toLocaleDateString('en-GB');

const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' };
export const statusText = (status) => STATUS[status] ?? status;
 

export const money = (x) => '€' + x.toFixed(2); export const date = (iso) => new Date(iso).toLocaleDateString('en-GB'); const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' }; export const statusText = (status) => STATUS[status] ?? status;

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; }
header strong { margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }
main { padding: 0 16px 24px; }
h1 { font-size: 1.4rem; }
input, select, button { font: inherit; padding: 4px 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; }
.card h2 { font-size: 1rem; margin: 0 0 4px; }
.card p { margin: 0; }
.muted { color: #5c6168; font-size: 0.85rem; }
.price { font-weight: 600; }
.cart, .orders { list-style: none; padding: 0; }
.cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.cart li span:first-child { flex: 1; }
.orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.orders h2 { font-size: 1rem; margin: 0; }
.orders p { margin: 2px 0; }
.field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; }
.field input[aria-invalid="true"] { border-color: #b42318; }
.error { color: #b42318; font-size: 0.85rem; }
 

* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; } header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; } header strong { margin-right: auto; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: inherit; } nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; } main { padding: 0 16px 24px; } h1 { font-size: 1.4rem; } input, select, button { font: inherit; padding: 4px 8px; } .filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; } .card h2 { font-size: 1rem; margin: 0 0 4px; } .card p { margin: 0; } .muted { color: #5c6168; font-size: 0.85rem; } .price { font-weight: 600; } .cart, .orders { list-style: none; padding: 0; } .cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .cart li span:first-child { flex: 1; } .orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .orders h2 { font-size: 1rem; margin: 0; } .orders p { margin: 2px 0; } .field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; } .field input[aria-invalid="true"] { border-color: #b42318; } .error { color: #b42318; font-size: 0.85rem; }

Check▶ Run

Exercise

Step 5: my orders and the whole path

OrdersPage loads getOrders() every time it opens and shows the orders of customer ME, newest on top: "Order #61", the date, the status, the total and the lines ("White cheese × 3"). While it waits, "Loading…", and with no orders, "You have no orders yet."

The training API has no login and returns the orders of every customer. So the page filters by customerId === ME. A real server returns only yours.

Now the app is whole. The check walks the path from the start of the lesson: it looks at the old orders, filters "Dairy", opens the white cheese, adds 2, makes them 3 in the cart, orders with a wrong email, sees the error next to the field, fixes it, orders and finds the new order on top of "My orders".

Write OrdersPage. The check walks the buyer's whole path and at the end looks for the new order on top of "My orders".

React

main.jsxApp.jsxpages/CatalogPage.jsxpages/ProductPage.jsxpages/CartPage.jsxpages/CheckoutPage.jsxpages/OrdersPage.jsxpages/NotFoundPage.jsxcomponents/ProductCard.jsxcomponents/Filter.jsxcomponents/Field.jsxstore/cart.jsxapi.jsformat.jsstyle.css

import { createRoot } from 'react-dom/client';
import { MemoryRouter } from 'react-router';
import App from './App.jsx';
import { CartProvider } from './store/cart.jsx';
import './style.css';

// The sandbox has no address bar, so the history is kept in memory.
// In a real project: BrowserRouter.
createRoot(document.getElementById('root')).render(
  <MemoryRouter>
    <CartProvider>
      <App />
    </CartProvider>
  </MemoryRouter>,
);
 

import { createRoot } from 'react-dom/client'; import { MemoryRouter } from 'react-router'; import App from './App.jsx'; import { CartProvider } from './store/cart.jsx'; import './style.css'; // The sandbox has no address bar, so the history is kept in memory. // In a real project: BrowserRouter. createRoot(document.getElementById('root')).render( <MemoryRouter> <CartProvider> <App /> </CartProvider> </MemoryRouter>, );

import { NavLink, Route, Routes } from 'react-router';
import CartPage from './pages/CartPage.jsx';
import CatalogPage from './pages/CatalogPage.jsx';
import CheckoutPage from './pages/CheckoutPage.jsx';
import NotFoundPage from './pages/NotFoundPage.jsx';
import OrdersPage from './pages/OrdersPage.jsx';
import ProductPage from './pages/ProductPage.jsx';
import { useCart } from './store/cart.jsx';

export default function App() {
  const cart = useCart();
  return (
    <>
      <header>
        <strong>The shop</strong>
        <nav aria-label="Main menu">
          <NavLink to="/" end>Catalogue</NavLink>
          <NavLink to="/cart">Cart ({cart.count})</NavLink>
          <NavLink to="/orders">My orders</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<CatalogPage />} />
          <Route path="/product/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/orders" element={<OrdersPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
    </>
  );
}
 

import { NavLink, Route, Routes } from 'react-router'; import CartPage from './pages/CartPage.jsx'; import CatalogPage from './pages/CatalogPage.jsx'; import CheckoutPage from './pages/CheckoutPage.jsx'; import NotFoundPage from './pages/NotFoundPage.jsx'; import OrdersPage from './pages/OrdersPage.jsx'; import ProductPage from './pages/ProductPage.jsx'; import { useCart } from './store/cart.jsx'; export default function App() { const cart = useCart(); return ( <> <header> <strong>The shop</strong> <nav aria-label="Main menu"> <NavLink to="/" end>Catalogue</NavLink> <NavLink to="/cart">Cart ({cart.count})</NavLink> <NavLink to="/orders">My orders</NavLink> </nav> </header> <main> <Routes> <Route path="/" element={<CatalogPage />} /> <Route path="/product/:id" element={<ProductPage />} /> <Route path="/cart" element={<CartPage />} /> <Route path="/checkout" element={<CheckoutPage />} /> <Route path="/orders" element={<OrdersPage />} /> <Route path="*" element={<NotFoundPage />} /> </Routes> </main> </> ); }

import { useEffect, useState } from 'react';
import { getCategories, getProducts } from '../api.js';
import Filter from '../components/Filter.jsx';
import ProductCard from '../components/ProductCard.jsx';

export default function CatalogPage() {
  const [q, setQ] = useState('');
  const [category, setCategory] = useState('');
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    getCategories()
      .then(setCategories)
      .catch(() => setCategories([]));
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    setProducts(null);
    setError(null);
    getProducts({ q, category }, controller.signal)
      .then(setProducts)
      .catch((e) => {
        if (e.name !== 'AbortError') setError(e.message);
      });
    return () => controller.abort();
  }, [q, category]);

  return (
    <>
      <h1>Catalogue</h1>
      <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} />
      {error && <p role="alert">{error}</p>}
      {!error && !products && <p role="status">Loading…</p>}
      {products && products.length === 0 && <p>No such products.</p>}
      {products && products.length > 0 && (
        <ul className="grid">
          {products.map((p) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </ul>
      )}
    </>
  );
}
 

import { useEffect, useState } from 'react'; import { getCategories, getProducts } from '../api.js'; import Filter from '../components/Filter.jsx'; import ProductCard from '../components/ProductCard.jsx'; export default function CatalogPage() { const [q, setQ] = useState(''); const [category, setCategory] = useState(''); const [categories, setCategories] = useState([]); const [products, setProducts] = useState(null); const [error, setError] = useState(null); useEffect(() => { getCategories() .then(setCategories) .catch(() => setCategories([])); }, []); useEffect(() => { const controller = new AbortController(); setProducts(null); setError(null); getProducts({ q, category }, controller.signal) .then(setProducts) .catch((e) => { if (e.name !== 'AbortError') setError(e.message); }); return () => controller.abort(); }, [q, category]); return ( <> <h1>Catalogue</h1> <Filter categories={categories} q={q} category={category} onQChange={setQ} onCategoryChange={setCategory} /> {error && <p role="alert">{error}</p>} {!error && !products && <p role="status">Loading…</p>} {products && products.length === 0 && <p>No such products.</p>} {products && products.length > 0 && ( <ul className="grid"> {products.map((p) => ( <ProductCard key={p.id} product={p} /> ))} </ul> )} </> ); }

import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router';
import { getProduct, getProducts } from '../api.js';
import { money } from '../format.js';
import { useCart } from '../store/cart.jsx';

export default function ProductPage() {
  const { id } = useParams();
  const cart = useCart();
  const [product, setProduct] = useState(null);
  const [related, setRelated] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    async function load() {
      const p = await getProduct(id, controller.signal);
      setProduct(p);
      if (p.categoryId === null) return;
      const same = await getProducts({ category: p.categoryId }, controller.signal);
      setRelated(same.filter((x) => x.id !== p.id).slice(0, 3));
    }
    setProduct(null);
    setRelated([]);
    setError(null);
    load().catch((e) => {
      if (e.name !== 'AbortError') setError(e.status === 404 ? 'No such product.' : e.message);
    });
    return () => controller.abort();
  }, [id]);

  if (error) return <p role="alert">{error}</p>;
  if (!product) return <p role="status">Loading…</p>;
  const inCart = cart.items.find((i) => i.id === product.id)?.qty ?? 0;
  return (
    <article>
      <p>
        <Link to="/">← Back to the catalogue</Link>
      </p>
      <h1>{product.name}</h1>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
      <p>{product.stock > 0 ? `In stock: ${product.stock} pcs` : 'Sold out'}</p>
      <button type="button" disabled={product.stock === 0} onClick={() => cart.add(product)}>
        Add to cart
      </button>
      {inCart > 0 && <p role="status">In the cart: {inCart}</p>}
      {related.length > 0 && (
        <section aria-labelledby="related-title">
          <h2 id="related-title">More from this category</h2>
          <ul>
            {related.map((p) => (
              <li key={p.id}>
                <Link to={`/product/${p.id}`}>{p.name}</Link>
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  );
}
 

import { useEffect, useState } from 'react'; import { Link, useParams } from 'react-router'; import { getProduct, getProducts } from '../api.js'; import { money } from '../format.js'; import { useCart } from '../store/cart.jsx'; export default function ProductPage() { const { id } = useParams(); const cart = useCart(); const [product, setProduct] = useState(null); const [related, setRelated] = useState([]); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); async function load() { const p = await getProduct(id, controller.signal); setProduct(p); if (p.categoryId === null) return; const same = await getProducts({ category: p.categoryId }, controller.signal); setRelated(same.filter((x) => x.id !== p.id).slice(0, 3)); } setProduct(null); setRelated([]); setError(null); load().catch((e) => { if (e.name !== 'AbortError') setError(e.status === 404 ? 'No such product.' : e.message); }); return () => controller.abort(); }, [id]); if (error) return <p role="alert">{error}</p>; if (!product) return <p role="status">Loading…</p>; const inCart = cart.items.find((i) => i.id === product.id)?.qty ?? 0; return ( <article> <p> <Link to="/">← Back to the catalogue</Link> </p> <h1>{product.name}</h1> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> <p>{product.stock > 0 ? `In stock: ${product.stock} pcs` : 'Sold out'}</p> <button type="button" disabled={product.stock === 0} onClick={() => cart.add(product)}> Add to cart </button> {inCart > 0 && <p role="status">In the cart: {inCart}</p>} {related.length > 0 && ( <section aria-labelledby="related-title"> <h2 id="related-title">More from this category</h2> <ul> {related.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link> </li> ))} </ul> </section> )} </article> ); }

import { Link } from 'react-router';
import { money } from '../format.js';
import { useCart } from '../store/cart.jsx';

const upTo = (n) => Array.from({ length: Math.min(n, 10) }, (_, i) => i + 1);

export default function CartPage() {
  const cart = useCart();
  if (cart.items.length === 0)
    return (
      <>
        <h1>Cart</h1>
        <p>The cart is empty.</p>
        <p>
          <Link to="/">Back to the catalogue</Link>
        </p>
      </>
    );
  return (
    <>
      <h1>Cart</h1>
      <ul className="cart">
        {cart.items.map((item) => (
          <li key={item.id}>
            <span>{item.name}</span>
            <select
              aria-label={`Quantity: ${item.name}`}
              value={item.qty}
              onChange={(e) => cart.setQty(item.id, Number(e.target.value))}
            >
              {upTo(item.stock).map((n) => (
                <option key={n}>{n}</option>
              ))}
            </select>
            <span>{money(item.price * item.qty)}</span>
            <button type="button" aria-label={`Remove ${item.name}`} onClick={() => cart.remove(item.id)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
      <p className="price">
        Total: {money(cart.total)}
      </p>
      <Link to="/checkout">To checkout</Link>
    </>
  );
}
 

import { Link } from 'react-router'; import { money } from '../format.js'; import { useCart } from '../store/cart.jsx'; const upTo = (n) => Array.from({ length: Math.min(n, 10) }, (_, i) => i + 1); export default function CartPage() { const cart = useCart(); if (cart.items.length === 0) return ( <> <h1>Cart</h1> <p>The cart is empty.</p> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); return ( <> <h1>Cart</h1> <ul className="cart"> {cart.items.map((item) => ( <li key={item.id}> <span>{item.name}</span> <select aria-label={`Quantity: ${item.name}`} value={item.qty} onChange={(e) => cart.setQty(item.id, Number(e.target.value))} > {upTo(item.stock).map((n) => ( <option key={n}>{n}</option> ))} </select> <span>{money(item.price * item.qty)}</span> <button type="button" aria-label={`Remove ${item.name}`} onClick={() => cart.remove(item.id)}> Remove </button> </li> ))} </ul> <p className="price"> Total: {money(cart.total)} </p> <Link to="/checkout">To checkout</Link> </> ); }

import { useState } from 'react';
import { Link } from 'react-router';
import { placeOrder } from '../api.js';
import Field from '../components/Field.jsx';
import { money } from '../format.js';
import { useCart } from '../store/cart.jsx';

function check(form) {
  const errors = {};
  if (!form.name.trim()) errors.name = 'Enter your name.';
  if (!form.email.includes('@')) errors.email = 'Enter your email.';
  if (!form.address.trim()) errors.address = 'Enter your address.';
  return errors;
}

export default function CheckoutPage() {
  const cart = useCart();
  const [form, setForm] = useState({ name: '', email: '', address: '' });
  const [errors, setErrors] = useState({});
  const [sending, setSending] = useState(false);
  const [order, setOrder] = useState(null);

  const change = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  async function submit(e) {
    e.preventDefault();
    const found = check(form);
    setErrors(found);
    if (Object.keys(found).length > 0) return;
    setSending(true);
    try {
      const items = cart.items.map((i) => ({ productId: i.id, qty: i.qty }));
      setOrder(await placeOrder({ ...form, items }));
      cart.clear();
    } catch (err) {
      setErrors(err.errors ?? { form: err.message });
    } finally {
      setSending(false);
    }
  }

  if (order)
    return (
      <>
        <h1>Order received</h1>
        <p role="status">
          Order #{order.id} for {money(order.total)}.
        </p>
        <p>
          <Link to="/orders">My orders</Link>
        </p>
      </>
    );
  if (cart.items.length === 0)
    return (
      <>
        <h1>Checkout</h1>
        <p>The cart is empty.</p>
      </>
    );
  return (
    <>
      <h1>Checkout</h1>
      <p className="price">
        Total: {money(cart.total)}
      </p>
      <form noValidate onSubmit={submit}>
        <Field name="name" label="Name" value={form.name} error={errors.name} onChange={change} />
        <Field name="email" label="Email" type="email" value={form.email} error={errors.email} onChange={change} />
        <Field name="address" label="Address" value={form.address} error={errors.address} onChange={change} />
        {errors.items && <p role="alert">{errors.items}</p>}
        {errors.form && <p role="alert">{errors.form}</p>}
        <button disabled={sending}>{sending ? 'Sending…' : 'Place order'}</button>
      </form>
    </>
  );
}
 

import { useState } from 'react'; import { Link } from 'react-router'; import { placeOrder } from '../api.js'; import Field from '../components/Field.jsx'; import { money } from '../format.js'; import { useCart } from '../store/cart.jsx'; function check(form) { const errors = {}; if (!form.name.trim()) errors.name = 'Enter your name.'; if (!form.email.includes('@')) errors.email = 'Enter your email.'; if (!form.address.trim()) errors.address = 'Enter your address.'; return errors; } export default function CheckoutPage() { const cart = useCart(); const [form, setForm] = useState({ name: '', email: '', address: '' }); const [errors, setErrors] = useState({}); const [sending, setSending] = useState(false); const [order, setOrder] = useState(null); const change = (e) => setForm({ ...form, [e.target.name]: e.target.value }); async function submit(e) { e.preventDefault(); const found = check(form); setErrors(found); if (Object.keys(found).length > 0) return; setSending(true); try { const items = cart.items.map((i) => ({ productId: i.id, qty: i.qty })); setOrder(await placeOrder({ ...form, items })); cart.clear(); } catch (err) { setErrors(err.errors ?? { form: err.message }); } finally { setSending(false); } } if (order) return ( <> <h1>Order received</h1> <p role="status"> Order #{order.id} for {money(order.total)}. </p> <p> <Link to="/orders">My orders</Link> </p> </> ); if (cart.items.length === 0) return ( <> <h1>Checkout</h1> <p>The cart is empty.</p> </> ); return ( <> <h1>Checkout</h1> <p className="price"> Total: {money(cart.total)} </p> <form noValidate onSubmit={submit}> <Field name="name" label="Name" value={form.name} error={errors.name} onChange={change} /> <Field name="email" label="Email" type="email" value={form.email} error={errors.email} onChange={change} /> <Field name="address" label="Address" value={form.address} error={errors.address} onChange={change} /> {errors.items && <p role="alert">{errors.items}</p>} {errors.form && <p role="alert">{errors.form}</p>} <button disabled={sending}>{sending ? 'Sending…' : 'Place order'}</button> </form> </> ); }

export default function OrdersPage() {
  return (
    <>
      <h1>My orders</h1>
      <p>Your orders come here.</p>
    </>
  );
}
 

export default function OrdersPage() { return ( <> <h1>My orders</h1> <p>Your orders come here.</p> </> ); }

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <>
      <h1>No such page</h1>
      <p>
        <Link to="/">Back to the catalogue</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFoundPage() { return ( <> <h1>No such page</h1> <p> <Link to="/">Back to the catalogue</Link> </p> </> ); }

import { Link } from 'react-router';
import { money } from '../format.js';

export default function ProductCard({ product }) {
  return (
    <li className="card">
      <h2>
        <Link to={`/product/${product.id}`}>{product.name}</Link>
      </h2>
      {product.category && <p className="muted">{product.category}</p>}
      <p className="price">{money(product.price)}</p>
    </li>
  );
}
 

import { Link } from 'react-router'; import { money } from '../format.js'; export default function ProductCard({ product }) { return ( <li className="card"> <h2> <Link to={`/product/${product.id}`}>{product.name}</Link> </h2> {product.category && <p className="muted">{product.category}</p>} <p className="price">{money(product.price)}</p> </li> ); }

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) {
  // Products live in the subcategories: "Food" and "Home" are only groups.
  const groups = categories.filter((c) => c.parentId !== null);
  return (
    <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}>
      <label>
        Search
        <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} />
      </label>
      <label>
        Category
        <select value={category} onChange={(e) => onCategoryChange(e.target.value)}>
          <option value="">All</option>
          {groups.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </select>
      </label>
    </form>
  );
}
 

export default function Filter({ categories, q, category, onQChange, onCategoryChange }) { // Products live in the subcategories: "Food" and "Home" are only groups. const groups = categories.filter((c) => c.parentId !== null); return ( <form className="filter" role="search" onSubmit={(e) => e.preventDefault()}> <label> Search <input type="search" value={q} onChange={(e) => onQChange(e.target.value)} /> </label> <label> Category <select value={category} onChange={(e) => onCategoryChange(e.target.value)}> <option value="">All</option> {groups.map((c) => ( <option key={c.id} value={c.id}> {c.name} </option> ))} </select> </label> </form> ); }

export default function Field({ name, label, type = 'text', value, error, onChange }) {
  const errorId = `${name}-error`;
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input
        id={name}
        name={name}
        type={type}
        value={value}
        onChange={onChange}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? errorId : undefined}
      />
      {error && (
        <span id={errorId} className="error">
          {error}
        </span>
      )}
    </div>
  );
}
 

export default function Field({ name, label, type = 'text', value, error, onChange }) { const errorId = `${name}-error`; return ( <div className="field"> <label htmlFor={name}>{label}</label> <input id={name} name={name} type={type} value={value} onChange={onChange} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? errorId : undefined} /> {error && ( <span id={errorId} className="error"> {error} </span> )} </div> ); }

import { createContext, useContext, useState } from 'react';

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);

  function add(product) {
    const found = items.find((i) => i.id === product.id);
    if (found) setItems(items.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i)));
    else setItems([...items, { id: product.id, name: product.name, price: product.price, stock: product.stock, qty: 1 }]);
  }
  function setQty(id, qty) {
    setItems(items.map((i) => (i.id === id ? { ...i, qty } : i)));
  }
  function remove(id) {
    setItems(items.filter((i) => i.id !== id));
  }
  function clear() {
    setItems([]);
  }

  const count = items.reduce((sum, i) => sum + i.qty, 0);
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  return <CartContext value={{ items, count, total, add, setQty, remove, clear }}>{children}</CartContext>;
}

export function useCart() {
  return useContext(CartContext);
}
 

import { createContext, useContext, useState } from 'react'; const CartContext = createContext(null); export function CartProvider({ children }) { const [items, setItems] = useState([]); function add(product) { const found = items.find((i) => i.id === product.id); if (found) setItems(items.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i))); else setItems([...items, { id: product.id, name: product.name, price: product.price, stock: product.stock, qty: 1 }]); } function setQty(id, qty) { setItems(items.map((i) => (i.id === id ? { ...i, qty } : i))); } function remove(id) { setItems(items.filter((i) => i.id !== id)); } function clear() { setItems([]); } const count = items.reduce((sum, i) => sum + i.qty, 0); const total = items.reduce((sum, i) => sum + i.price * i.qty, 0); return <CartContext value={{ items, count, total, add, setQty, remove, clear }}>{children}</CartContext>; } export function useCart() { return useContext(CartContext); }

// Every request to the shop's API is here: the pages do not know the addresses.
async function request(path, options = {}) {
  const res = await fetch(path, options);
  const data = await res.json();
  if (!res.ok) {
    const error = new Error(data.error ?? `The server answered ${res.status}`);
    error.status = res.status;
    error.errors = data.errors;
    throw error;
  }
  return data;
}

export function getCategories() {
  return request('/api/categories');
}

export function getProducts({ q = '', category = '' } = {}, signal) {
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (category) params.set('category', category);
  return request(`/api/products?${params}`, { signal });
}

export function getProduct(id, signal) {
  return request(`/api/products/${id}`, { signal });
}

export function placeOrder(order) {
  return request('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(order),
  });
}

// The training API has no login and returns the orders of every customer. You are customer 1.
// A real server returns only yours: it knows who you are from the session.
export const ME = 1;
export function getOrders(signal) {
  return request('/api/orders', { signal });
}
 

// Every request to the shop's API is here: the pages do not know the addresses. async function request(path, options = {}) { const res = await fetch(path, options); const data = await res.json(); if (!res.ok) { const error = new Error(data.error ?? `The server answered ${res.status}`); error.status = res.status; error.errors = data.errors; throw error; } return data; } export function getCategories() { return request('/api/categories'); } export function getProducts({ q = '', category = '' } = {}, signal) { const params = new URLSearchParams(); if (q) params.set('q', q); if (category) params.set('category', category); return request(`/api/products?${params}`, { signal }); } export function getProduct(id, signal) { return request(`/api/products/${id}`, { signal }); } export function placeOrder(order) { return request('/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(order), }); } // The training API has no login and returns the orders of every customer. You are customer 1. // A real server returns only yours: it knows who you are from the session. export const ME = 1; export function getOrders(signal) { return request('/api/orders', { signal }); }

export const money = (x) => '€' + x.toFixed(2);

export const date = (iso) => new Date(iso).toLocaleDateString('en-GB');

const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' };
export const statusText = (status) => STATUS[status] ?? status;
 

export const money = (x) => '€' + x.toFixed(2); export const date = (iso) => new Date(iso).toLocaleDateString('en-GB'); const STATUS = { new: 'New', paid: 'Paid', shipped: 'Shipped', delivered: 'Delivered' }; export const statusText = (status) => STATUS[status] ?? status;

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; }
header strong { margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
nav a { color: inherit; }
nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; }
main { padding: 0 16px 24px; }
h1 { font-size: 1.4rem; }
input, select, button { font: inherit; padding: 4px 8px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; }
.card h2 { font-size: 1rem; margin: 0 0 4px; }
.card p { margin: 0; }
.muted { color: #5c6168; font-size: 0.85rem; }
.price { font-weight: 600; }
.cart, .orders { list-style: none; padding: 0; }
.cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.cart li span:first-child { flex: 1; }
.orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; }
.orders h2 { font-size: 1rem; margin: 0; }
.orders p { margin: 2px 0; }
.field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; }
.field input[aria-invalid="true"] { border-color: #b42318; }
.error { color: #b42318; font-size: 0.85rem; }
 

* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #1f2328; background: #fbfaf7; } header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #f3efe6; } header strong { margin-right: auto; } nav { display: flex; flex-wrap: wrap; gap: 12px; } nav a { color: inherit; } nav a[aria-current="page"] { font-weight: 600; text-decoration-thickness: 2px; } main { padding: 0 16px 24px; } h1 { font-size: 1.4rem; } input, select, button { font: inherit; padding: 4px 8px; } .filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; } .filter label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .card { background: #fff; border: 1px solid #ddd6c8; border-radius: 8px; padding: 8px 10px; } .card h2 { font-size: 1rem; margin: 0 0 4px; } .card p { margin: 0; } .muted { color: #5c6168; font-size: 0.85rem; } .price { font-weight: 600; } .cart, .orders { list-style: none; padding: 0; } .cart li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .cart li span:first-child { flex: 1; } .orders li { padding: 6px 0; border-bottom: 1px solid #ddd6c8; } .orders h2 { font-size: 1rem; margin: 0; } .orders p { margin: 2px 0; } .field { display: flex; flex-direction: column; gap: 2px; max-width: 320px; margin-bottom: 10px; } .field input[aria-invalid="true"] { border-color: #b42318; } .error { color: #b42318; font-size: 0.85rem; }

Check▶ Run

The idea

What is simplified here

The app is real, but some things around it are simplified. In a real shop:

• The server knows who you are. You log in with a password and the server returns only your orders, by the session. A filter in the browser protects nothing: anyone can change ME.
• The price lives on the server. The order sends only productId and qty. The total comes back in the answer, worked out from the prices in the database.
• The cart survives. Here it lives in memory and is gone on reload. A real one is in localStorage or on the server.
• The addresses are real. BrowserRouter instead of the memory history, and hosting that returns index.html for every address.

More precisely, if you are curious

The two libraries. The path is the same: addresses, data from an API, a shared cart, a form with errors per field. React does it with hooks: useEffect with dependencies, Context for the cart, controlled fields with value and onChange. The other library solves the same tasks its own way.

Tests. The checks of the steps click and type like a person. You write the same with Testing Library: render, screen.getByRole, userEvent. How is in the testing lesson.

Speed. The catalogue loads on every key press. With the old request cancelled this is correct, but wasteful. In a real project the search waits for 300 ms of quiet before it goes out (debounce).

The idea

What next

Move the shop front into a real project, as in the lesson "From the sandbox to a project":

npm create vite@latest shop -- --template react
cd shop
npm install react-router

Copy the folders pages/, components/, store/ and the files api.js, format.js, style.css into src/. In main.jsx swap MemoryRouter for BrowserRouter.

The API is no longer pretend. Run a real server with the addresses /api/products, /api/orders, or point /api at it with server.proxy in vite.config.js. Then npm run build and publish dist/ with a rule that returns index.html for every address.

More tasks

• Order details. /orders/:id with GET /api/orders/:id and a link from "My orders". An unknown number shows "No such order."
• A cart that survives. Keep items in localStorage and read them on start.
• Tests. A test for CartPage: changing a quantity changes the total. A test for CheckoutPage: an empty form shows the three errors and sends no request.

Test

Check yourself

1. You pick "Dairy" and the list keeps every product. The effect that loads the products ends with []. What is missing?

await before getProductsA new key on the listq and category in the dependency list: without them the effect runs only once

2. On "White cheese" you click "Kashkaval cheese" under "More from this category". The address becomes /product/8, yet the page still shows the white cheese. Why?

The router keeps the same ProductPage and only changes id; an effect with [] does not run again, it needs [id]Link does not work between two productsThe server returns the old product

3. The check in the browser let "maria@shop" through, and the server answered 400 with { errors: { email: "The email is not valid" } }. What does the page do?

Shows the message next to the "Email" field, linked with aria-describedby, and keeps the cartShows "The server answered 400" above the formEmpties the cart and sends the buyer to "My orders"

4. useCart keeps the cart in a useState inside itself, without Context. ProductPage adds, and the menu says "Cart (0)". Why?

The menu renders before ProductPageuseState does not work in a custom hookEvery component that calls useCart gets its own state: two carts

5. Why does the order send only productId and qty, without the prices?

To make the request smallerBecause JSON cannot hold decimal numbersThe server works out the price and the total from its own data: a price from the browser cannot be trusted

Check

Start the lesson over

Related lessons

• Builds on: Shared state · Routing · Testing components · From the sandbox to a project
• Tasks on this topic: Project: the shop front