first commit

2025-02-24 21:08:29 +01:00 · 2025-02-24 21:08:29 +01:00 · 358e60d61a
commit 358e60d61a
69 changed files with 8848 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1 @@
 VITE_API_URL=""
--- a/.env.production
+++ b/.env.production
@ -0,0 +1 @@
 VITE_API_URL="https://pizza-server-app.onrender.com"
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
 node_modules
 dist/
 .env
 .DS_Store
 coverage/
 .vscode/
 routeTree.gen.ts
 coverage
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,36 @@
 import js from "@eslint/js";
 import globals from "globals";
 import prettier from "eslint-config-prettier";
 import reactPlugin from "eslint-plugin-react";
 import pluginQuery from "@tanstack/eslint-plugin-query";
 /** @type {import('eslint').Linter.Config[]} */
 export default [
  js.configs.recommended,
  {
    ...reactPlugin.configs.flat.recommended,
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  reactPlugin.configs.flat["jsx-runtime"],
  ...pluginQuery.configs["flat/recommended"],
  {
    files: ["**/*.js", "**/*.jsx"],
    languageOptions: {
      globals: { ...globals.browser, ...globals.node },
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      "react/no-unescaped-entities": "off",
      "react/prop-types": "off",
    },
  },
  prettier,
 ];
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/style.css" />
    <title>Padre Gino's</title>
  </head>
  <body>
    <div id="modal"></div>
    <div id="root">not rendered</div>
    <script type="module" src="./src/App.jsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,48 @@
 {
  "name": "citr-v9-projects",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "coverage": "vitest --coverage",
    "build": "vite build",
    "dev": "vite",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint",
    "preview": "vite preview",
    "test": "vitest",
    "test:ui": "vitest --ui"
  },
  "keywords": [],
  "type": "module",
  "author": "Brian Holt",
  "license": "Apache-2.0",
  "description": "The Complete Intro to React v9, as taught by Brian Holt for Frontend Masters",
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "5.59.7",
    "@tanstack/router-devtools": "1.65.0",
    "@tanstack/router-plugin": "1.65.0",
    "@testing-library/react": "16.0.1",
    "@vitejs/plugin-react": "4.3.1",
    "@vitest/browser": "2.1.3",
    "@vitest/coverage-v8": "^2.1.3",
    "@vitest/ui": "^2.1.3",
    "eslint": "9.9.1",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-react": "7.37.1",
    "globals": "15.9.0",
    "happy-dom": "15.7.4",
    "playwright": "1.48.0",
    "prettier": "3.3.3",
    "vite": "5.4.2",
    "vitest": "2.1.3",
    "vitest-browser-react": "0.0.1",
    "vitest-fetch-mock": "0.3.0"
  },
  "dependencies": {
    "@tanstack/react-query": "5.59.13",
    "@tanstack/react-query-devtools": "5.59.13",
    "@tanstack/react-router": "1.65.0",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  }
 }
--- a/public/Pacifico-Regular.ttf
+++ b/public/Pacifico-Regular.ttf
--- a/public/padre_gino.svg
+++ b/public/padre_gino.svg
--- a/public/pizzas/bbq_ckn.webp
+++ b/public/pizzas/bbq_ckn.webp
--- a/public/pizzas/big_meat.webp
+++ b/public/pizzas/big_meat.webp
--- a/public/pizzas/brie_carre.webp
+++ b/public/pizzas/brie_carre.webp
--- a/public/pizzas/calabrese.webp
+++ b/public/pizzas/calabrese.webp
--- a/public/pizzas/cali_ckn.webp
+++ b/public/pizzas/cali_ckn.webp
--- a/public/pizzas/ckn_alfredo.webp
+++ b/public/pizzas/ckn_alfredo.webp
--- a/public/pizzas/ckn_pesto.webp
+++ b/public/pizzas/ckn_pesto.webp
--- a/public/pizzas/classic_dlx.webp
+++ b/public/pizzas/classic_dlx.webp
--- a/public/pizzas/five_cheese.webp
+++ b/public/pizzas/five_cheese.webp
--- a/public/pizzas/four_cheese.webp
+++ b/public/pizzas/four_cheese.webp
--- a/public/pizzas/green_garden.webp
+++ b/public/pizzas/green_garden.webp
--- a/public/pizzas/hawaiian.webp
+++ b/public/pizzas/hawaiian.webp
--- a/public/pizzas/ital_cpcllo.webp
+++ b/public/pizzas/ital_cpcllo.webp
--- a/public/pizzas/ital_supr.webp
+++ b/public/pizzas/ital_supr.webp
--- a/public/pizzas/ital_veggie.webp
+++ b/public/pizzas/ital_veggie.webp
--- a/public/pizzas/mediterraneo.webp
+++ b/public/pizzas/mediterraneo.webp
--- a/public/pizzas/mexicana.webp
+++ b/public/pizzas/mexicana.webp
--- a/public/pizzas/napolitana.webp
+++ b/public/pizzas/napolitana.webp
--- a/public/pizzas/pep_msh_pep.webp
+++ b/public/pizzas/pep_msh_pep.webp
--- a/public/pizzas/pepperoni.webp
+++ b/public/pizzas/pepperoni.webp
--- a/public/pizzas/peppr_salami.webp
+++ b/public/pizzas/peppr_salami.webp
--- a/public/pizzas/prsc_argla.webp
+++ b/public/pizzas/prsc_argla.webp
--- a/public/pizzas/sicilian.webp
+++ b/public/pizzas/sicilian.webp
--- a/public/pizzas/soppressata.webp
+++ b/public/pizzas/soppressata.webp
--- a/public/pizzas/southw_ckn.webp
+++ b/public/pizzas/southw_ckn.webp
--- a/public/pizzas/spicy_ital.webp
+++ b/public/pizzas/spicy_ital.webp
--- a/public/pizzas/spin_pesto.webp
+++ b/public/pizzas/spin_pesto.webp
--- a/public/pizzas/spinach_fet.webp
+++ b/public/pizzas/spinach_fet.webp
--- a/public/pizzas/spinach_supr.webp
+++ b/public/pizzas/spinach_supr.webp
--- a/public/pizzas/thai_ckn.webp
+++ b/public/pizzas/thai_ckn.webp
--- a/public/pizzas/the_greek.webp
+++ b/public/pizzas/the_greek.webp
--- a/public/pizzas/veggie_veg.webp
+++ b/public/pizzas/veggie_veg.webp
--- a/public/style.css
+++ b/public/style.css
@ -0,0 +1,461 @@
 :root {
  --primary: #da2f04;
  --secondary: #33670a;
  --background: #fffaee;
  --border: #ccc;
  --font: Pacifico, cursive, sans-serif;
 }
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body {
  font-family: Arial, sans-serif;
  background-color: var(--background);
 }
 ul,
 ol {
  list-style: none;
 }
 a {
  text-decoration: none;
  color: inherit;
 }
 button,
 input,
 textarea {
  border: none;
  outline: none;
 }
 nav {
  width: 100%;
  display: grid;
  border-bottom: 1px solid #ccc;
  grid-template-areas: ". logo logo logo cart";
 }
 .logo {
  width: 100%;
  height: 110px;
  background-position: left;
  background-repeat: no-repeat;
  content: url("/padre_gino.svg");
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  padding-top: 20px;
 }
 nav .logo {
  width: inherit;
  grid-area: logo;
 }
 nav > a {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .nav-cart {
  grid-area: cart;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
 }
 .nav-cart-number {
  background-color: var(--secondary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -17px;
  left: -17px;
  width: 20px;
  height: 20px;
  font-size: 18px;
  border-radius: 50%;
 }
@font-face {
  font-family: Pacifico;
  src: url("/Pacifico-Regular.ttf");
 }
 h2 {
  font-family: var(--font);
  font-size: 40px;
  line-height: auto;
  font-weight: 400;
  color: var(--primary);
  text-align: center;
 }
 h2::after {
  content: "";
  display: inline-block;
  margin-left: 25px;
  width: 150px;
  height: 30px;
  background: conic-gradient(
    transparent 90deg,
    var(--primary) 90deg 180deg,
    transparent 180deg 270deg,
    var(--primary) 270deg
  );
  background-repeat: repeat;
  background-size: 30px 30px;
  background-position: top left;
 }
 .order {
  width: 100%;
  margin-left: 5%;
 }
 form div {
  margin: 10px 0;
  text-align: center;
 }
 form > div {
  padding: 15px;
  width: 100%;
 }
 form > div:first-child {
  border-right: 1px solid #ccc;
 }
 form > div > div > label {
  display: block;
  font-size: 20px;
  color: var(--secondary);
  margin-bottom: 10px;
 }
 form select {
  display: block;
  font-size: 16px;
  padding: 5px;
  margin-bottom: 30px;
  width: 100%;
 }
 form input[type="radio"] {
  display: none;
 }
 form input + label {
  height: 80px;
  width: 80px;
  border: 1px solid #999;
  background-color: #ccc;
  color: #999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 15px 10px 15px;
 }
 form input:checked + label {
  color: #333;
  background-color: #fff;
 }
 form > div > div > label {
  display: block;
  font-size: 20px;
  color: var(--secondary);
  margin-bottom: 10px;
 }
 .pizza {
  line-height: 1.5;
 }
 .pizza img {
  max-width: 200px;
  border: 1px solid var(--border);
  border-radius: 5px;
 }
 .pizza h1 {
  font-weight: normal;
  color: var(--secondary);
  font-size: 25px;
 }
 .pizza p {
  margin-bottom: 5px;
 }
 .order form {
  display: flex;
  justify-content: space-between;
 }
 button,
 .index li a {
  border: 1px solid var(--primary);
  background-color: transparent;
  color: var(--primary);
  font-family: var(--font);
  font-size: 20px;
  padding: 5px 15px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
 }
 button:disabled {
  opacity: 0.5;
  background-color: #ccc;
 }
 .order-pizza {
  width: 100%;
  margin-left: 25px;
 }
 .pizza {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .pizza-of-the-day {
  border-top: 1px solid var(--border);
  margin-top: 50px;
  width: 100%;
 }
 .pizza-of-the-day > div {
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .pizza-of-the-day > h2 {
  text-align: center;
 }
 .pizza-of-the-day-image {
  max-width: 200px;
  border-radius: 5px;
  border: 1px solid var(--border);
 }
 .pizza-of-the-day-info {
  margin-right: 30px;
  line-height: 2;
  text-align: center;
 }
 .order-page {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
 }
 .cart {
  border-left: 1px solid var(--border);
  line-height: 1.5;
  text-align: center;
  padding: 15px;
 }
 .cart p {
  margin: 15px 0;
 }
 .index h1 {
  color: var(--primary);
  font-family: var(--font);
  font-weight: normal;
 }
 .index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 700px;
  margin: 120px auto;
 }
 .index-brand {
  display: flex;
  flex-direction: column;
 }
 .index-brand p {
  color: var(--secondary);
  font-weight: bold;
  font-size: 40px;
  text-transform: uppercase;
  max-width: 315px;
 }
 .index ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .index li,
 .index li a {
  width: 100%;
  max-width: 250px;
  text-align: center;
 }
 .index li a {
  margin-bottom: 10px;
 }
 .past-orders {
  min-height: 650px;
  max-width: 900px;
  width: 90%;
  margin: 0 auto;
 }
 table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  border: 1px solid #dddddd;
 }
 thead tr {
  background-color: var(--secondary);
  color: #ffffff;
  text-align: left;
 }
 th,
 td {
  padding: 12px 15px;
  text-align: center;
 }
 tbody tr {
  border-bottom: 1px solid #dddddd;
 }
 tbody tr:nth-of-type(even) {
  background-color: #f6fef0;
 }
 tbody tr:last-of-type {
  border-bottom: 2px solid var(--secondary);
 }
 .pages {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
 }
 .pages > div {
  font-family: var(--font);
  color: var(--primary);
  font-size: 20px;
 }
 #modal {
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 #modal:empty {
  display: none;
 }
 #modal > div {
  padding: 15px;
  text-align: center;
  border-radius: 30px;
  background: var(--background);
 }
 td img {
  width: 50px;
 }
 .error-boundary {
  min-height: 400px;
  text-align: center;
 }
 .error-boundary a {
  color: var(--primary);
  text-decoration: underline;
 }
 .contact form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
 }
 .contact input,
 .contact textarea {
  width: 500px;
  padding: 8px;
  border: 2px solid var(--border);
  border-radius: 5px;
  margin-bottom: 15px;
  margin-top: 15px;
 }
 .contact textarea {
  min-height: 200px;
 }
 .contact input:focus,
 .contact textarea:focus {
  border-color: var(--primary);
 }
 .contact input:disabled {
  background-color: #999;
 }
 .contact h3 {
  font-family: var(--font);
  color: var(--secondary);
  text-align: center;
  margin: 50px;
  font-weight: normal;
  font-size: 30px;
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,22 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { routeTree } from "./routeTree.gen";
 const router = createRouter({ routeTree });
 const queryClient = new QueryClient();
 const App = () => {
  return (
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
      </QueryClientProvider>
    </StrictMode>
  );
 };
 const container = document.getElementById("root");
 const root = createRoot(container);
 root.render(<App />);
--- a/src/Cart.jsx
+++ b/src/Cart.jsx
@ -0,0 +1,28 @@
 const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD", // feel free to change to your local currency
 });
 export default function Cart({ cart, checkout }) {
  let total = 0;
  for (let i = 0; i < cart.length; i++) {
    const current = cart[i];
    total += current.pizza.sizes[current.size];
  }
  return (
    <div className="cart">
      <h2>Cart</h2>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>
            <span className="size">{item.size}</span> –
            <span className="type">{item.pizza.name}</span> –
            <span className="price">{item.price}</span>
          </li>
        ))}
      </ul>
      <p>Total: {intl.format(total)}</p>
      <button onClick={checkout}>Checkout</button>
    </div>
  );
 }
--- a/src/ErrorBoundary.jsx
+++ b/src/ErrorBoundary.jsx
@ -0,0 +1,30 @@
 // mostly code from reactjs.org/docs/error-boundaries.html
 import { Component } from "react";
 import { Link } from "@tanstack/react-router";
 class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error("ErrorBoundary caught an error", error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>Uh oh!</h2>
          <p>
            There was an error with this listing. <Link to="/">Click here</Link>{" "}
            to back to the home page.
          </p>
        </div>
      );
    }
    return this.props.children;
  }
 }
 export default ErrorBoundary;
--- a/src/Header.jsx
+++ b/src/Header.jsx
@ -0,0 +1,20 @@
 import { useContext } from "react";
 import { Link } from "@tanstack/react-router";
 import { CartContext } from "./contexts";
 export default function Header() {
  const [cart] = useContext(CartContext);
  return (
    <nav>
      <Link to={"/"}>
        <h1 className="logo">Padre Gino's Pizza</h1>
      </Link>
      <div className="nav-cart">
        🛒
        <span data-testid="cart-number" className="nav-cart-number">
          {cart.length}
        </span>
      </div>
    </nav>
  );
 }
--- a/src/Modal.jsx
+++ b/src/Modal.jsx
@ -0,0 +1,19 @@
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 const Modal = ({ children }) => {
  const elRef = useRef(null);
  if (!elRef.current) {
    elRef.current = document.createElement("div");
  }
  useEffect(() => {
    const modalRoot = document.getElementById("modal");
    modalRoot.appendChild(elRef.current);
    return () => modalRoot.removeChild(elRef.current);
  }, []);
  return createPortal(<div>{children}</div>, elRef.current);
 };
 export default Modal;
--- a/src/Pizza.jsx
+++ b/src/Pizza.jsx
@ -0,0 +1,14 @@
 const Pizza = (props) => {
  return (
    <div className="pizza">
      <h1>{props.name}</h1>
      <p>{props.description}</p>
      <img
        src={props.image ? props.image : "https://picsum.photos/200"}
        alt={props.name}
      />
    </div>
  );
 };
 export default Pizza;
--- a/src/PizzaOfTheDay.jsx
+++ b/src/PizzaOfTheDay.jsx
@ -0,0 +1,37 @@
 import { usePizzaOfTheDay } from "./usePizzaOfTheDay";
 // feel free to change en-US / USD to your locale
 const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
 });
 const PizzaOfTheDay = () => {
  const pizzaOfTheDay = usePizzaOfTheDay();
  if (!pizzaOfTheDay) {
    return <div>Loading...</div>;
  }
  return (
    <div className="pizza-of-the-day">
      <h2>Pizza of the Day</h2>
      <div>
        <div className="pizza-of-the-day-info">
          <h3>{pizzaOfTheDay.name}</h3>
          <p>{pizzaOfTheDay.description}</p>
          <p className="pizza-of-the-day-price">
            From: <span>{intl.format(pizzaOfTheDay.sizes.S)}</span>
          </p>
        </div>
        <img
          className="pizza-of-the-day-image"
          src={pizzaOfTheDay.image}
          alt={pizzaOfTheDay.name}
        />
      </div>
    </div>
  );
 };
 export default PizzaOfTheDay;
--- a/src/tests/Cart.browser.test.jsx
+++ b/src/tests/Cart.browser.test.jsx
@ -0,0 +1,68 @@
 import { expect, test } from "vitest";
 import { render } from "@testing-library/react";
 import Cart from "../Cart";
 test("snapshot with nothing in cart", () => {
  const { asFragment } = render(<Cart cart={[]} />);
  expect(asFragment()).toMatchSnapshot();
 });
 test("snapshot with some stuff in cart", () => {
  const { asFragment } = render(
    <Cart
      cart={[
        {
          pizza: {
            id: "pepperoni",
            name: "The Pepperoni Pizza",
            category: "Classic",
            description: "Mozzarella Cheese, Pepperoni",
            image: "/public/pizzas/pepperoni.webp",
            sizes: {
              S: 9.75,
              M: 12.5,
              L: 15.25,
            },
          },
          size: "M",
          price: "$12.50",
        },
        {
          pizza: {
            id: "ckn_pesto",
            name: "The Chicken Pesto Pizza",
            category: "Chicken",
            description:
              "Chicken, Tomatoes, Red Peppers, Spinach, Garlic, Pesto Sauce",
            image: "/public/pizzas/ckn_pesto.webp",
            sizes: {
              S: 12.75,
              M: 16.75,
              L: 20.75,
            },
          },
          size: "L",
          price: "$20.75",
        },
        {
          pizza: {
            id: "bbq_ckn",
            name: "The Barbecue Chicken Pizza",
            category: "Chicken",
            description:
              "Barbecued Chicken, Red Peppers, Green Peppers, Tomatoes, Red Onions, Barbecue Sauce",
            image: "/public/pizzas/bbq_ckn.webp",
            sizes: {
              S: 12.75,
              M: 16.75,
              L: 20.75,
            },
          },
          size: "S",
          price: "$12.75",
        },
      ]}
    />,
  );
  expect(asFragment()).toMatchSnapshot();
 });
--- a/src/tests/Header.browser.test.jsx
+++ b/src/tests/Header.browser.test.jsx
@ -0,0 +1,47 @@
 import { render } from "vitest-browser-react";
 import { expect, test } from "vitest";
 import Header from "../Header";
 import {
  RouterProvider,
  createRouter,
  createRootRoute,
 } from "@tanstack/react-router";
 import { CartContext } from "../contexts";
 test("correctly renders a header with a zero cart count", async () => {
  const rootRoute = createRootRoute({
    component: () => (
      <CartContext.Provider value={[[]]}>
        <Header />
      </CartContext.Provider>
    ),
  });
  const router = createRouter({ routeTree: rootRoute });
  const screen = render(<RouterProvider router={router}></RouterProvider>);
  const itemsInCart = await screen.getByTestId("cart-number");
  await expect.element(itemsInCart).toBeInTheDocument();
  await expect.element(itemsInCart).toHaveTextContent("0");
 });
 test("correctly renders a header with a three cart count", async () => {
  const rootRoute = createRootRoute({
    component: () => (
      <CartContext.Provider
        value={[[{ pizza: 1 }, { pizza: 2 }, { pizza: 3 }]]}
      >
        <Header />
      </CartContext.Provider>
    ),
  });
  const router = createRouter({ routeTree: rootRoute });
  const screen = render(<RouterProvider router={router}></RouterProvider>);
  const itemsInCart = await screen.getByTestId("cart-number");
  await expect.element(itemsInCart).toBeInTheDocument();
  await expect.element(itemsInCart).toHaveTextContent("3");
 });
--- a/src/tests/Pizza.browser.test.jsx
+++ b/src/tests/Pizza.browser.test.jsx
@ -0,0 +1,17 @@
 import { render } from "vitest-browser-react";
 import { expect, test } from "vitest";
 import Pizza from "../Pizza";
 test("alt text renders on image", async () => {
  const name = "My Favorite Pizza";
  const src = "https://picsum.photos/200";
  const screen = render(
    <Pizza name={name} description="super cool pizza" image={src} />,
  );
  const img = await screen.getByRole("img");
  await expect.element(img).toBeInTheDocument();
  await expect.element(img).toHaveAttribute("src", src);
  await expect.element(img).toHaveAttribute("alt", name);
 });
--- a/src/tests/Pizza.node.test.jsx
+++ b/src/tests/Pizza.node.test.jsx
@ -0,0 +1,26 @@
 import { render, cleanup } from "@testing-library/react";
 import { afterEach, expect, test } from "vitest";
 import Pizza from "../Pizza";
 afterEach(cleanup);
 test("alt text renders on image", async () => {
  const name = "My Favorite Pizza";
  const src = "https://picsum.photos/200";
  const screen = render(
    <Pizza name={name} description="super cool pizza" image={src} />,
  );
  const img = screen.getByRole("img");
  expect(img.src).toBe(src);
  expect(img.alt).toBe(name);
 });
 test("to have default image if none is provided", async () => {
  const screen = render(
    <Pizza name={"Cool Pizza"} description="super cool pizza" />,
  );
  const img = screen.getByRole("img");
  expect(img.src).not.toBe("");
 });
--- a/src/tests/snapshots/Cart.browser.test.jsx.snap
+++ b/src/tests/snapshots/Cart.browser.test.jsx.snap
@ -0,0 +1,97 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`snapshot with nothing in cart 1`] = `
 <DocumentFragment>
  <div
    class="cart"
  >
    <h2>
      Cart
    </h2>
    <ul />
    <p>
      Total: $0.00
    </p>
    <button>
      Checkout
    </button>
  </div>
 </DocumentFragment>
 `;
 exports[`snapshot with some stuff in cart 1`] = `
 <DocumentFragment>
  <div
    class="cart"
  >
    <h2>
      Cart
    </h2>
    <ul>
      <li>
        <span
          class="size"
        >
          M
        </span>
         –
        <span
          class="type"
        >
          The Pepperoni Pizza
        </span>
         –
        <span
          class="price"
        >
          $12.50
        </span>
      </li>
      <li>
        <span
          class="size"
        >
          L
        </span>
         –
        <span
          class="type"
        >
          The Chicken Pesto Pizza
        </span>
         –
        <span
          class="price"
        >
          $20.75
        </span>
      </li>
      <li>
        <span
          class="size"
        >
          S
        </span>
         –
        <span
          class="type"
        >
          The Barbecue Chicken Pizza
        </span>
         –
        <span
          class="price"
        >
          $12.75
        </span>
      </li>
    </ul>
    <p>
      Total: $46.00
    </p>
    <button>
      Checkout
    </button>
  </div>
 </DocumentFragment>
 `;
--- a/src/tests/snapshots/Cart.test.jsx.snap
+++ b/src/tests/snapshots/Cart.test.jsx.snap
@ -0,0 +1,97 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`snapshot with nothing in cart 1`] = `
 <DocumentFragment>
  <div
    class="cart"
  >
    <h2>
      Cart
    </h2>
    <ul />
    <p>
      Total: $0.00
    </p>
    <button>
      Checkout
    </button>
  </div>
 </DocumentFragment>
 `;
 exports[`snapshot with some stuff in cart 1`] = `
 <DocumentFragment>
  <div
    class="cart"
  >
    <h2>
      Cart
    </h2>
    <ul>
      <li>
        <span
          class="size"
        >
          M
        </span>
         –
        <span
          class="type"
        >
          The Pepperoni Pizza
        </span>
         –
        <span
          class="price"
        >
          $12.50
        </span>
      </li>
      <li>
        <span
          class="size"
        >
          L
        </span>
         –
        <span
          class="type"
        >
          The Chicken Pesto Pizza
        </span>
         –
        <span
          class="price"
        >
          $20.75
        </span>
      </li>
      <li>
        <span
          class="size"
        >
          S
        </span>
         –
        <span
          class="type"
        >
          The Barbecue Chicken Pizza
        </span>
         –
        <span
          class="price"
        >
          $12.75
        </span>
      </li>
    </ul>
    <p>
      Total: $46.00
    </p>
    <button>
      Checkout
    </button>
  </div>
 </DocumentFragment>
 `;
--- a/src/tests/contact.lazy.node.test.jsx
+++ b/src/tests/contact.lazy.node.test.jsx
@ -0,0 +1,52 @@
 import { render } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
 import createFetchMock from "vitest-fetch-mock";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { Route } from "../routes/contact.lazy";
 const queryClient = new QueryClient({});
 const fetchMocker = createFetchMock(vi);
 fetchMocker.enableMocks();
 test("can submit contact form", async () => {
  fetchMocker.mockResponse(JSON.stringify({ status: "ok" }));
  const screen = render(
    <QueryClientProvider client={queryClient}>
      <Route.options.component />
    </QueryClientProvider>,
  );
  const nameInput = screen.getByPlaceholderText("Name");
  const emailInput = screen.getByPlaceholderText("Email");
  const msgTextArea = screen.getByPlaceholderText("Message");
  const testData = {
    name: "Brian",
    email: "test@example.com",
    message: "This is a test message",
  };
  nameInput.value = testData.name;
  emailInput.value = testData.email;
  msgTextArea.value = testData.message;
  const btn = screen.getByRole("button");
  btn.click();
  const h3 = await screen.findByRole("heading", { level: 3 });
  expect(h3.innerText).toContain("Submitted");
  const requests = fetchMocker.requests();
  expect(requests.length).toBe(1);
  expect(requests[0].url).toBe("/api/contact");
  expect(fetchMocker).toHaveBeenCalledWith("/api/contact", {
    body: JSON.stringify(testData),
    headers: {
      "Content-Type": "application/json",
    },
    method: "POST",
  });
 });
--- a/src/tests/usePizzaOfTheDay.node.test.jsx
+++ b/src/tests/usePizzaOfTheDay.node.test.jsx
@ -0,0 +1,32 @@
 import { expect, test, vi } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import createFetchMock from "vitest-fetch-mock";
 import { usePizzaOfTheDay } from "../usePizzaOfTheDay";
 const fetchMocker = createFetchMock(vi);
 fetchMocker.enableMocks();
 const testPizza = {
  id: "calabrese",
  name: "The Calabrese Pizza",
  category: "Supreme",
  description:
    "Salami, Pancetta, Tomatoes, Red Onions, Friggitello Peppers, Garlic",
  image: "/public/pizzas/calabrese.webp",
  sizes: { S: 12.25, M: 16.25, L: 20.25 },
 };
 test("to be null on initial load", async () => {
  fetch.mockResponseOnce(JSON.stringify(testPizza));
  const { result } = renderHook(() => usePizzaOfTheDay(""));
  expect(result.current).toBeNull();
 });
 test("to call the API and give back the pizza of the day", async () => {
  fetch.mockResponseOnce(JSON.stringify(testPizza));
  const { result } = renderHook(() => usePizzaOfTheDay(""));
  await waitFor(() => {
    expect(result.current).toEqual(testPizza);
  });
  expect(fetchMocker).toBeCalledWith("/api/pizza-of-the-day");
 });
--- a/src/api/getPastOrder.js
+++ b/src/api/getPastOrder.js
@ -0,0 +1,6 @@
 export default async function getPastOrders(order) {
  const apiUrl = import.meta.env.VITE_API_URL;
  const response = await fetch(`${apiUrl}/api/past-order/${order}`);
  const data = await response.json();
  return data;
 }
--- a/src/api/getPastOrders.js
+++ b/src/api/getPastOrders.js
@ -0,0 +1,6 @@
 export default async function getPastOrders(page) {
  const apiUrl = import.meta.env.VITE_API_URL;
  const response = await fetch(`${apiUrl}/api/past-orders?page=${page}`);
  const data = await response.json();
  return data;
 }
--- a/src/api/postContact.js
+++ b/src/api/postContact.js
@ -0,0 +1,16 @@
 export default async function postContact(name, email, message) {
  const apiUrl = import.meta.env.VITE_API_URL;
  const response = await fetch(`${apiUrl}/api/contact`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name, email, message }),
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 }
--- a/src/contexts.jsx
+++ b/src/contexts.jsx
@ -0,0 +1,3 @@
 import { createContext } from "react";
 export const CartContext = createContext([[], () => {}]);
--- a/src/routes/__root.jsx
+++ b/src/routes/__root.jsx
@ -0,0 +1,26 @@
 import { useState } from "react";
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import PizzaOfTheDay from "../PizzaOfTheDay";
 import Header from "../Header";
 import { CartContext } from "../contexts";
 export const Route = createRootRoute({
  component: () => {
    const cartHook = useState([]);
    return (
      <>
        <CartContext.Provider value={cartHook}>
          <div>
            <Header />
            <Outlet />
            <PizzaOfTheDay />
          </div>
        </CartContext.Provider>
        <TanStackRouterDevtools />
        <ReactQueryDevtools />
      </>
    );
  },
 });
--- a/src/routes/contact.lazy.jsx
+++ b/src/routes/contact.lazy.jsx
@ -0,0 +1,37 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { useMutation } from "@tanstack/react-query";
 import postContact from "../api/postContact";
 export const Route = createLazyFileRoute("/contact")({
  component: ContactRoute,
 });
 function ContactRoute() {
  const mutation = useMutation({
    mutationFn: function (e) {
      e.preventDefault();
      const formData = new FormData(e.target);
      return postContact(
        formData.get("name"),
        formData.get("email"),
        formData.get("message"),
      );
    },
  });
  return (
    <div className="contact">
      <h2>Contact</h2>
      {mutation.isSuccess ? (
        <h3>Submitted!</h3>
      ) : (
        <form onSubmit={mutation.mutate}>
          <input name="name" placeholder="Name" />
          <input type="email" name="email" placeholder="Email" />
          <textarea placeholder="Message" name="message"></textarea>
          <button>Submit</button>
        </form>
      )}
    </div>
  );
 }
--- a/src/routes/index.lazy.jsx
+++ b/src/routes/index.lazy.jsx
@ -0,0 +1,27 @@
 import { createLazyFileRoute, Link } from "@tanstack/react-router";
 export const Route = createLazyFileRoute("/")({
  component: Index,
 });
 function Index() {
  return (
    <div className="index">
      <div className="index-brand">
        <h1>Padre Gino's</h1>
        <p>Pizza & Art at a location near you</p>
      </div>
      <ul>
        <li>
          <Link to="/order">Order</Link>
        </li>
        <li>
          <Link to="/past">Past Orders</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </div>
  );
 }
--- a/src/routes/order.lazy.jsx
+++ b/src/routes/order.lazy.jsx
@ -0,0 +1,147 @@
 import { useState, useEffect, useContext } from "react";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { CartContext } from "../contexts";
 import Cart from "../Cart";
 import Pizza from "../Pizza";
 // feel free to change en-US / USD to your locale
 const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
 });
 const apiUrl = import.meta.env.VITE_API_URL;
 export const Route = createLazyFileRoute("/order")({
  component: Order,
 });
 function Order() {
  const [pizzaType, setPizzaType] = useState("pepperoni");
  const [pizzaSize, setPizzaSize] = useState("M");
  const [pizzaTypes, setPizzaTypes] = useState([]);
  const [loading, setLoading] = useState(true);
  const [cart, setCart] = useContext(CartContext);
  async function checkout() {
    setLoading(true);
    await fetch(`${apiUrl}/api/order`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        cart,
      }),
    });
    setCart([]);
    setLoading(false);
  }
  let price, selectedPizza;
  if (!loading) {
    selectedPizza = pizzaTypes.find((pizza) => pizzaType === pizza.id);
    price = intl.format(
      selectedPizza.sizes ? selectedPizza.sizes[pizzaSize] : "",
    );
  }
  useEffect(() => {
    fetchPizzaTypes();
  }, []);
  async function fetchPizzaTypes() {
    const pizzasRes = await fetch(`${apiUrl}/api/pizzas`);
    const pizzasJson = await pizzasRes.json();
    setPizzaTypes(pizzasJson);
    setLoading(false);
  }
  return (
    <div className="order-page">
      <div className="order">
        <h2>Create Order</h2>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setCart([
              ...cart,
              { pizza: selectedPizza, size: pizzaSize, price },
            ]);
          }}
        >
          <div>
            <div>
              <label htmlFor="pizza-type">Pizza Type</label>
              <select
                onChange={(e) => setPizzaType(e.target.value)}
                name="pizza-type"
                value={pizzaType}
              >
                {pizzaTypes.map((pizza) => (
                  <option key={pizza.id} value={pizza.id}>
                    {pizza.name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label htmlFor="pizza-size">Pizza Size</label>
              <div>
                <span>
                  <input
                    onChange={(e) => setPizzaSize(e.target.value)}
                    checked={pizzaSize === "S"}
                    type="radio"
                    name="pizza-size"
                    value="S"
                    id="pizza-s"
                  />
                  <label htmlFor="pizza-s">Small</label>
                </span>
                <span>
                  <input
                    onChange={(e) => setPizzaSize(e.target.value)}
                    checked={pizzaSize === "M"}
                    type="radio"
                    name="pizza-size"
                    value="M"
                    id="pizza-m"
                  />
                  <label htmlFor="pizza-m">Medium</label>
                </span>
                <span>
                  <input
                    onChange={(e) => setPizzaSize(e.target.value)}
                    checked={pizzaSize === "L"}
                    type="radio"
                    name="pizza-size"
                    value="L"
                    id="pizza-l"
                  />
                  <label htmlFor="pizza-l">Large</label>
                </span>
              </div>
            </div>
            <button type="submit">Add to Cart</button>
          </div>
          {loading ? (
            <h3>LOADING …</h3>
          ) : (
            <div className="order-pizza">
              <Pizza
                name={selectedPizza.name}
                description={selectedPizza.description}
                image={selectedPizza.image}
              />
              <p>{price}</p>
            </div>
          )}
        </form>
      </div>
      {loading ? <h2>LOADING …</h2> : <Cart checkout={checkout} cart={cart} />}
    </div>
  );
 }
--- a/src/routes/past.lazy.jsx
+++ b/src/routes/past.lazy.jsx
@ -0,0 +1,120 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import getPastOrders from "../api/getPastOrders";
 import getPastOrder from "../api/getPastOrder";
 import Modal from "../Modal";
 import ErrorBoundary from "../ErrorBoundary";
 export const Route = createLazyFileRoute("/past")({
  component: ErrorBoundaryWrappedPastOrderRoutes,
 });
 const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
 });
 function ErrorBoundaryWrappedPastOrderRoutes() {
  return (
    <ErrorBoundary>
      <PastOrdersRoute />
    </ErrorBoundary>
  );
 }
 function PastOrdersRoute() {
  const [page, setPage] = useState(1);
  const [focusedOrder, setFocusedOrder] = useState();
  const { isLoading, data } = useQuery({
    queryKey: ["past-orders", page],
    queryFn: () => getPastOrders(page),
    staleTime: 30000,
  });
  const { isLoading: isLoadingPastOrder, data: pastOrderData } = useQuery({
    queryKey: ["past-order", focusedOrder],
    queryFn: () => getPastOrder(focusedOrder),
    enabled: !!focusedOrder,
    staleTime: 24 * 60 * 60 * 1000, // one day in milliseconds,
  });
  if (isLoading) {
    return (
      <div className="past-orders">
        <h2>LOADING …</h2>
      </div>
    );
  }
  return (
    <div className="past-orders">
      <table>
        <thead>
          <tr>
            <td>ID</td>
            <td>Date</td>
            <td>Time</td>
          </tr>
        </thead>
        <tbody>
          {data.map((order) => (
            <tr key={order.order_id}>
              <td>
                <button onClick={() => setFocusedOrder(order.order_id)}>
                  {order.order_id}
                </button>
              </td>
              <td>{order.date}</td>
              <td>{order.time}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="pages">
        <button disabled={page <= 1} onClick={() => setPage(page - 1)}>
          Previous
        </button>
        <div>{page}</div>
        <button disabled={data.length < 10} onClick={() => setPage(page + 1)}>
          Next
        </button>
      </div>
      {focusedOrder ? (
        <Modal>
          <h2>Order #{focusedOrder}</h2>
          {!isLoadingPastOrder ? (
            <table>
              <thead>
                <tr>
                  <td>Image</td>
                  <td>Name</td>
                  <td>Size</td>
                  <td>Quantity</td>
                  <td>Price</td>
                  <td>Total</td>
                </tr>
              </thead>
              <tbody>
                {pastOrderData.orderItems.map((pizza) => (
                  <tr key={`${pizza.pizzaTypeId}_${pizza.size}`}>
                    <td>
                      <img src={pizza.image} alt={pizza.name} />
                    </td>
                    <td>{pizza.name}</td>
                    <td>{pizza.size}</td>
                    <td>{pizza.quantity}</td>
                    <td>{intl.format(pizza.price)}</td>
                    <td>{intl.format(pizza.total)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <p>Loading …</p>
          )}
          <button onClick={() => setFocusedOrder()}>Close</button>
        </Modal>
      ) : null}
    </div>
  );
 }
--- a/src/usePizzaOfTheDay.jsx
+++ b/src/usePizzaOfTheDay.jsx
@ -0,0 +1,20 @@
 import { useState, useEffect, useDebugValue } from "react";
 export const usePizzaOfTheDay = () => {
  const [pizzaOfTheDay, setPizzaOfTheDay] = useState(null);
  useDebugValue(pizzaOfTheDay ? `${pizzaOfTheDay.name}` : "Loading...");
  useEffect(() => {
    async function fetchPizzaOfTheDay() {
      const apiUrl = import.meta.env.VITE_API_URL;
      const response = await fetch(`${apiUrl}/api/pizza-of-the-day`);
      const data = await response.json();
      setPizzaOfTheDay(data);
    }
    fetchPizzaOfTheDay();
  }, []);
  return pizzaOfTheDay;
 };
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,19 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000/",
        changeOrigin: true,
      }
    },
  },
  plugins: [TanStackRouterVite(), react()]
 });
--- a/vitest.workspace.js
+++ b/vitest.workspace.js
@ -0,0 +1,25 @@
 import { defineWorkspace } from "vitest/config";
 export default defineWorkspace([
  {
    extends: "./vite.config.js",
    test: {
      include: ["**/*.node.test.{js,jsx}"],
      name: "happy-dom",
      environment: "happy-dom",
    },
  },
  {
    extends: "./vite.config.js",
    test: {
      setupFiles: ["vitest-browser-react"],
      include: ["**/*.browser.test.{js,jsx}"],
      name: "browser",
      browser: {
        provider: "playwright",
        enabled: true,
        name: "firefox",
      },
    },
  },
 ]);
		`@ -0,0 +1 @@`
							`VITE_API_URL="https://pizza-server-app.onrender.com"`
		`@ -0,0 +1,3 @@`
							`import { createContext } from "react";`

							`export const CartContext = createContext([[], () => {}]);`