2026-09-21 06:52:12 +00:00
6 changed files with 2152 additions and 0 deletions
@@ -0,0 +1,28 @@
+# dev
+.yarn/
+!.yarn/releases
+.vscode/*
+!.vscode/launch.json
+!.vscode/*.code-snippets
+.idea/workspace.xml
+.idea/usage.statistics.xml
+.idea/shelf
+
+# deps
+node_modules/
+
+# env
+.env
+.env.production
+
+# logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# misc
+.DS_Store
@@ -0,0 +1,134 @@
+# Movie Collection API
+
+A simple Movie Collection REST API built with **Node.js + Express**, plus a single-page
+frontend that talks to it with `fetch()`.
+
+A **Movie** is one entry in the collection; the collection is `/api/movies`. Movies are
+kept in a plain JavaScript array, so **there is no database — records added through the
+API disappear when the server restarts.**
+
+## Running
+
+```sh
+npm install
+npm start          # node server.js
+```
+
+Open <http://localhost:3000>.
+
+```sh
+npm run dev        # node --watch server.js
+PORT=4000 npm start
+```
+
+## Schema
+
+Each movie has four fields:
+
+| Field | Type | Notes |
+| --- | --- | --- |
+| `id` | integer ≥ 1 | **assigned by the server**, never sent by the client |
+| `title` | string, 1–120 chars | required, trimmed |
+| `genre` | string, 1–60 chars | required, trimmed |
+| `year` | integer, 1888–2100 | required; `"2010"` and `2010` are both accepted |
+
+The three request fields are required. Anything missing or blank comes back as a `400`
+with one message per field.
+
+## Endpoints
+
+| Method | Path | Result |
+| --- | --- | --- |
+| `GET` | `/api/movies` | all movies → `200` |
+| `GET` | `/api/movies/:id` | one movie → `200`, or `404` if there is no such id |
+| `POST` | `/api/movies` | add a movie → `201` with a `Location` header |
+| `GET` | `/` | the frontend |
+
+Errors come back as a message plus the offending fields:
+
+```json
+{ "error": "Title is required.", "fields": { "title": "Title is required.", "year": "Year is required." } }
+```
+
+## Examples
+
+```sh
+curl http://localhost:3000/api/movies
+curl http://localhost:3000/api/movies/2
+
+curl -X POST http://localhost:3000/api/movies \
+  -H 'content-type: application/json' \
+  -d '{"title":"Inception","genre":"science fiction","year":2010}'
+```
+
+`GET /api/movies` → `200`
+
+```json
+[
+  { "id": 1, "title": "Interstellar", "genre": "Science Fiction", "year": 2014 },
+  { "id": 2, "title": "Avengers: Endgame", "genre": "Action", "year": 2019 },
+  { "id": 3, "title": "Coco", "genre": "Animation", "year": 2017 }
+]
+```
+
+`POST /api/movies` → `201` · `Location: /api/movies/4`
+
+```json
+{ "id": 4, "title": "Inception", "genre": "science fiction", "year": 2010 }
+```
+
+`POST /api/movies` with `{}` → `400`
+
+```json
+{
+  "error": "Title is required.",
+  "fields": {
+    "title": "Title is required.",
+    "genre": "Genre is required.",
+    "year": "Year is required."
+  }
+}
+```
+
+`GET /api/movies/abc` → `400`
+
+```json
+{ "error": "ID must be a whole number, like 1." }
+```
+
+`GET /api/movies/99` → `404`
+
+```json
+{ "error": "No movie with ID 99." }
+```
+
+## Frontend
+
+`index.html` is a single file (no build step, no framework) served by the same Express
+app. It:
+
+- displays the movie list in a table,
+- has a form for adding a movie (title, genre, year),
+- uses `fetch()` for every call to the API,
+- refreshes the list after a movie is added.
+
+Clicking a row fetches that one movie from `GET /api/movies/:id` and shows it in a detail
+panel, so all three endpoints are exercised from the UI.
+
+## Files
+
+```
+server.js      Express app: schemas, in-memory store, routes, error handling
+index.html     the frontend (styles + fetch logic, no dependencies)
+package.json   express + zod
+```
+
+## Project structure notes
+
+- **Storage** is `const movies = []` in `server.js`, with a `nextId` counter for the
+  auto-assigned `id`. It is seeded with three movies on startup.
+- **Validation** uses [zod](https://zod.dev). One schema per shape (`movieDraftSchema`
+  for the request body, `movieSchema` for what is stored and returned), and a small
+  helper turns a failure into the `{ error, fields }` response the frontend renders next
+  to each input.
+- `node_modules/` is git-ignored.
@@ -0,0 +1,872 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="dark">
+  <title>Movie Collection · Movie API</title>
+  <style>
+    /* ---------------------------------------------------------------------
+       Design tokens, mirroring the it3206-minisys / meal-api look:
+       neutral-900 page, white text, white/10 hairlines, white/5 fills.
+       --------------------------------------------------------------------- */
+    :root {
+      --bg: #171717;                        /* neutral-900      */
+      --panel: rgba(255, 255, 255, 0.05);   /* white/5          */
+      --panel-hover: rgba(255, 255, 255, 0.05);
+      --line: rgba(255, 255, 255, 0.1);     /* white/10         */
+      --line-strong: rgba(255, 255, 255, 0.15);
+      --on: #ffffff;
+      --muted: rgba(255, 255, 255, 0.5);    /* white/50         */
+      --muted-2: rgba(255, 255, 255, 0.4);  /* white/40         */
+      --muted-3: rgba(255, 255, 255, 0.3);  /* white/30         */
+      --danger: #f87171;                    /* red-400          */
+      --radius-md: 0.375rem;
+      --radius-lg: 0.5rem;
+      --radius-xl: 0.75rem;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100svh;
+      padding: 6rem 1rem 2rem;              /* clears the fixed navbar (pt-24) */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: var(--bg);
+      color: var(--on);
+      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* ---- navbar ---------------------------------------------------------- */
+
+    .nav {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 50;
+      margin-top: 0.5rem;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 0 0.75rem;
+    }
+
+    .nav-inner {
+      width: 100%;
+      max-width: 48rem;                     /* max-w-3xl */
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.75rem;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xl);
+      background: rgba(23, 23, 23, 0.8);
+      backdrop-filter: blur(8px);
+    }
+
+    .brand {
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+      text-decoration: none;
+      color: var(--on);
+    }
+
+    .nav-links {
+      display: flex;
+      gap: 0.25rem;
+    }
+
+    .nav-link {
+      padding: 0.25rem 0.625rem;
+      border-radius: var(--radius-md);
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.6);
+      text-decoration: none;
+      transition: color 0.15s, background-color 0.15s;
+    }
+
+    .nav-link:hover {
+      color: var(--on);
+    }
+
+    .nav-link.is-active {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--on);
+    }
+
+    /* ---- layout ---------------------------------------------------------- */
+
+    main {
+      width: 100%;
+      max-width: 48rem;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .page-head {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .page-head.is-centered {
+      align-items: center;
+      text-align: center;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 1.5rem;
+      font-weight: 600;
+      letter-spacing: -0.025em;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    .subtitle {
+      margin: 0;
+      font-size: 0.875rem;
+      color: var(--muted);
+    }
+
+    .subtle {
+      font-size: 0.75rem;
+      color: var(--muted-3);
+    }
+
+    .section-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+    }
+
+    /* ---- controls -------------------------------------------------------- */
+
+    .input {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-lg);
+      background: rgba(23, 23, 23, 0.6);
+      color: var(--on);
+      font: inherit;
+      font-size: 0.875rem;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .input::placeholder {
+      color: var(--muted-3);
+    }
+
+    .input:focus {
+      border-color: var(--muted-2);
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: var(--radius-lg);
+      font: inherit;
+      font-size: 0.875rem;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+    }
+
+    .btn-primary {
+      background: var(--on);
+      color: #171717;
+      font-weight: 600;
+    }
+
+    .btn-primary:hover {
+      background: rgba(255, 255, 255, 0.9);
+    }
+
+    .btn-ghost {
+      border: 1px solid var(--line-strong);
+      background: transparent;
+      color: rgba(255, 255, 255, 0.7);
+      font-weight: 500;
+    }
+
+    .btn-ghost:hover {
+      border-color: rgba(255, 255, 255, 0.3);
+      color: var(--on);
+    }
+
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* ---- panels, fields, errors ------------------------------------------ */
+
+    .panel {
+      padding: 1.25rem;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xl);
+      background: var(--panel);
+    }
+
+    .panel-head {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      margin-bottom: 1rem;
+    }
+
+    /* The photo's one-line form: title · genre · year · button. */
+    .form-row {
+      display: grid;
+      gap: 0.75rem;
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 720px) {
+      .form-row {
+        grid-template-columns: 1.6fr 1.15fr 0.7fr auto;
+        align-items: start;
+      }
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+      min-width: 0;
+    }
+
+    .label {
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--muted);
+    }
+
+    .error {
+      margin: 0;
+      font-size: 0.75rem;
+      color: var(--danger);
+    }
+
+    /* ---- notice ---------------------------------------------------------- */
+
+    .notice {
+      margin: 0;
+      padding: 0.625rem 0.75rem;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-lg);
+      background: var(--panel);
+      font-size: 0.875rem;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .notice.is-error {
+      border-color: rgba(248, 113, 113, 0.35);
+      background: rgba(248, 113, 113, 0.1);
+      color: var(--danger);
+    }
+
+    /* ---- table ----------------------------------------------------------- */
+
+    .table-wrap {
+      overflow: hidden;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-xl);
+      background: var(--panel);
+    }
+
+    .table-scroll {
+      overflow-x: auto;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    thead {
+      border-bottom: 1px solid var(--line);
+      background: var(--panel);
+    }
+
+    th {
+      padding: 0.75rem 1rem;
+      text-align: left;
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--muted-2);                /* white/40 */
+      white-space: nowrap;
+    }
+
+    tbody tr {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      transition: background-color 0.15s;
+    }
+
+    tbody tr:last-child {
+      border-bottom: none;
+    }
+
+    tbody tr:hover {
+      background: var(--panel-hover);
+    }
+
+    tbody tr.is-selected {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    /* Rows fetch their own movie, so they behave like buttons. */
+    tbody tr[data-id] {
+      cursor: pointer;
+    }
+
+    tbody tr[data-id]:focus-visible {
+      outline: 2px solid rgba(255, 255, 255, 0.4);
+      outline-offset: -2px;
+    }
+
+    td {
+      padding: 0.75rem 1rem;
+      font-size: 0.875rem;
+      color: rgba(255, 255, 255, 0.8);
+      vertical-align: top;
+    }
+
+    .movie-title {
+      font-weight: 500;
+      color: var(--on);
+    }
+
+    .num {
+      font-variant-numeric: tabular-nums;
+      color: var(--muted-2);
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 0.125rem 0.5rem;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-md);
+      background: var(--panel);
+      font-size: 0.75rem;
+      color: rgba(255, 255, 255, 0.8);
+      white-space: nowrap;
+    }
+
+    /* ---- detail (GET /api/movies/:id) ------------------------------------ */
+
+    .panel-head.is-row {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    .facts {
+      display: grid;
+      gap: 0.75rem;
+      margin: 0;
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 640px) {
+      .facts {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+
+    .facts dt {
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--muted);
+    }
+
+    .facts dd {
+      margin: 0.25rem 0 0;
+      font-size: 0.875rem;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .endpoint {
+      margin: 1rem 0 0;
+      font-size: 0.75rem;
+      color: var(--muted-3);
+    }
+
+    .link-btn {
+      padding: 0;
+      border: none;
+      background: none;
+      font: inherit;
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.6);
+      text-decoration: underline;
+      text-underline-offset: 4px;
+      cursor: pointer;
+      transition: color 0.15s;
+    }
+
+    .link-btn:hover {
+      color: var(--on);
+    }
+
+    code {
+      padding: 0.1rem 0.3rem;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-md);
+      background: rgba(255, 255, 255, 0.05);
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.8125em;
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    /* ---- empty state ----------------------------------------------------- */
+
+    .empty {
+      padding: 3.5rem 1.5rem;
+      border: 1px dashed var(--line-strong);
+      border-radius: var(--radius-xl);
+      background: var(--panel);
+      text-align: center;
+    }
+
+    .empty p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    .empty p + p {
+      margin-top: 0.25rem;
+      font-size: 0.75rem;
+      color: rgba(255, 255, 255, 0.35);
+    }
+
+    /* ---- footer ---------------------------------------------------------- */
+
+    footer {
+      width: 100%;
+      max-width: 48rem;
+      margin-top: 2rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--line);
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: 0.5rem;
+      font-size: 0.75rem;
+      color: var(--muted-3);
+    }
+
+    footer a {
+      color: var(--muted-2);
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    footer a:hover {
+      color: var(--on);
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+  </style>
+</head>
+<body>
+  <nav class="nav">
+    <div class="nav-inner">
+      <a class="brand" href="/">Movie API</a>
+      <div class="nav-links">
+        <a class="nav-link is-active" href="/" aria-current="page">collection</a>
+        <a class="nav-link" href="/api/movies" target="_blank" rel="noreferrer">api</a>
+      </div>
+    </div>
+  </nav>
+
+  <main>
+    <header class="page-head is-centered">
+      <h1>Movie Collection</h1>
+      <p class="subtitle" id="count">Loading…</p>
+    </header>
+
+    <p class="notice" id="notice" role="status" aria-live="polite" hidden></p>
+
+    <section class="panel" id="panel-form">
+      <div class="panel-head">
+        <h2>Add Movie</h2>
+        <p class="subtitle">Saved through <code>POST /api/movies</code>. The id is assigned by the server.</p>
+      </div>
+
+      <form id="movie-form" novalidate>
+        <div class="form-row">
+          <div class="field">
+            <label class="label" for="m-title">Title</label>
+            <input class="input" id="m-title" name="title" maxlength="120" placeholder="Inception" autocomplete="off">
+            <p class="error" id="err-title" hidden></p>
+          </div>
+
+          <div class="field">
+            <label class="label" for="m-genre">Genre</label>
+            <input class="input" id="m-genre" name="genre" maxlength="60" placeholder="science fiction" autocomplete="off">
+            <p class="error" id="err-genre" hidden></p>
+          </div>
+
+          <div class="field">
+            <label class="label" for="m-year">Year</label>
+            <input class="input" id="m-year" name="year" type="number" min="1888" max="2100" step="1" placeholder="2010" autocomplete="off">
+            <p class="error" id="err-year" hidden></p>
+          </div>
+
+          <div class="field">
+            <span class="label" aria-hidden="true">&nbsp;</span>
+            <button class="btn btn-primary" id="form-submit" type="submit">Add Movie</button>
+          </div>
+        </div>
+      </form>
+    </section>
+
+    <div class="section-head">
+      <h2>Movies</h2>
+      <button class="btn btn-ghost" id="load-movies" type="button">Load Movies</button>
+    </div>
+
+    <div class="table-wrap" id="table-wrap" hidden>
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Title</th>
+              <th>Genre</th>
+              <th>Year</th>
+            </tr>
+          </thead>
+          <tbody id="rows"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="empty" id="empty" hidden>
+      <p id="empty-title">No movies to show.</p>
+      <p id="empty-hint">Add one with the form above.</p>
+    </div>
+
+    <section class="panel" id="panel-detail" hidden aria-live="polite">
+      <div class="panel-head is-row">
+        <h2 id="detail-title">Movie</h2>
+        <button class="link-btn" id="detail-close" type="button">close</button>
+      </div>
+      <dl class="facts" id="detail-facts"></dl>
+      <p class="endpoint" id="detail-endpoint"></p>
+    </section>
+  </main>
+
+  <footer>
+    <span>Express + zod · <span id="movie-total">0</span> movies in memory</span>
+    <span><a href="/api/movies" target="_blank" rel="noreferrer">GET /api/movies</a> · records vanish on restart</span>
+  </footer>
+
+  <script>
+    const els = {
+      count: document.getElementById('count'),
+      notice: document.getElementById('notice'),
+      rows: document.getElementById('rows'),
+      tableWrap: document.getElementById('table-wrap'),
+      empty: document.getElementById('empty'),
+      emptyTitle: document.getElementById('empty-title'),
+      emptyHint: document.getElementById('empty-hint'),
+      total: document.getElementById('movie-total'),
+      form: document.getElementById('movie-form'),
+      submit: document.getElementById('form-submit'),
+      load: document.getElementById('load-movies'),
+      detail: document.getElementById('panel-detail'),
+      detailTitle: document.getElementById('detail-title'),
+      detailFacts: document.getElementById('detail-facts'),
+      detailEndpoint: document.getElementById('detail-endpoint'),
+      detailClose: document.getElementById('detail-close'),
+      fields: {
+        title: document.getElementById('m-title'),
+        genre: document.getElementById('m-genre'),
+        year: document.getElementById('m-year'),
+      },
+    }
+
+    const state = {
+      movies: [],
+      selectedId: null,
+    }
+
+    // ---- talking to the API -------------------------------------------------
+
+    /** fetch + JSON, never throwing on an error status. */
+    async function api(path, options = {}) {
+      const init = { ...options }
+
+      if (init.body !== undefined) {
+        init.headers = { 'content-type': 'application/json', ...init.headers }
+        init.body = JSON.stringify(init.body)
+      }
+
+      try {
+        const res = await fetch(path, init)
+        const text = await res.text()
+
+        let body = null
+        try {
+          body = text ? JSON.parse(text) : null
+        } catch {
+          body = text
+        }
+
+        return { ok: res.ok, status: res.status, body }
+      } catch {
+        return { ok: false, status: 0, body: { error: 'Could not reach the API. Is the server running?' } }
+      }
+    }
+
+    // ---- rendering ----------------------------------------------------------
+
+    /** Built with createElement/textContent so movie text can never inject markup. */
+    function row(movie) {
+      const tr = document.createElement('tr')
+      tr.dataset.id = movie.id
+      tr.tabIndex = 0
+      tr.setAttribute('role', 'button')
+      tr.setAttribute('aria-label', `Show ${movie.title} from GET /api/movies/${movie.id}`)
+      if (state.selectedId === movie.id) tr.className = 'is-selected'
+
+      const id = document.createElement('td')
+      id.className = 'num'
+      id.textContent = movie.id
+
+      const title = document.createElement('td')
+      const titleText = document.createElement('div')
+      titleText.className = 'movie-title'
+      titleText.textContent = movie.title
+      title.append(titleText)
+
+      const genre = document.createElement('td')
+      const badge = document.createElement('span')
+      badge.className = 'badge'
+      badge.textContent = movie.genre
+      genre.append(badge)
+
+      const year = document.createElement('td')
+      year.className = 'num'
+      year.textContent = movie.year
+
+      const open = () => showMovie(movie.id)
+      tr.addEventListener('click', open)
+      tr.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          open()
+        }
+      })
+
+      tr.append(id, title, genre, year)
+      return tr
+    }
+
+    function render() {
+      els.rows.replaceChildren(...state.movies.map(row))
+      els.tableWrap.hidden = state.movies.length === 0
+      els.empty.hidden = state.movies.length > 0
+
+      const n = state.movies.length
+      els.count.textContent = `${n} movie${n === 1 ? '' : 's'} in the collection.`
+      els.total.textContent = n
+      els.load.disabled = false
+    }
+
+    function setNotice(text, kind = 'info') {
+      els.notice.textContent = text
+      els.notice.className = kind === 'error' ? 'notice is-error' : 'notice'
+      els.notice.hidden = false
+    }
+
+    function clearNotice() {
+      els.notice.hidden = true
+    }
+
+    // ---- loading ------------------------------------------------------------
+
+    /** GET /api/movies — the whole collection. */
+    async function load() {
+      els.load.disabled = true
+      const { ok, body } = await api('/api/movies')
+      els.load.disabled = false
+
+      if (!ok) {
+        state.movies = []
+        render()
+        setNotice(body?.error ?? 'Could not load the collection.', 'error')
+        return false
+      }
+
+      state.movies = body
+      render()
+      return true
+    }
+
+    /** GET /api/movies/:id — one movie, fetched on its own. */
+    async function showMovie(id) {
+      const { ok, body } = await api(`/api/movies/${id}`)
+
+      if (!ok) {
+        state.selectedId = null
+        render()
+        els.detail.hidden = true
+        setNotice(body?.error ?? 'Could not load that movie.', 'error')
+        return
+      }
+
+      state.selectedId = id
+      render()
+      renderDetail(body)
+    }
+
+    function renderDetail(movie) {
+      els.detailTitle.textContent = movie.title
+      els.detailFacts.replaceChildren(...facts(movie))
+      els.detailEndpoint.replaceChildren(
+        document.createTextNode('Fetched from '),
+        code(`GET /api/movies/${movie.id}`),
+      )
+      els.detail.hidden = false
+      els.detail.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    }
+
+    function facts(movie) {
+      return [
+        ['ID', String(movie.id)],
+        ['Title', movie.title],
+        ['Genre', movie.genre],
+        ['Year', String(movie.year)],
+      ].flatMap(([label, value]) => {
+        const dt = document.createElement('dt')
+        dt.textContent = label
+        const dd = document.createElement('dd')
+        dd.textContent = value
+        return [dt, dd]
+      })
+    }
+
+    function code(text) {
+      const el = document.createElement('code')
+      el.textContent = text
+      return el
+    }
+
+    els.detailClose.addEventListener('click', () => {
+      state.selectedId = null
+      els.detail.hidden = true
+      render()
+    })
+
+    els.load.addEventListener('click', async () => {
+      clearNotice()
+      await load()
+    })
+
+    // ---- create form --------------------------------------------------------
+
+    function clearFieldErrors() {
+      for (const key of Object.keys(els.fields)) {
+        const message = document.getElementById(`err-${key}`)
+        message.textContent = ''
+        message.hidden = true
+      }
+    }
+
+    function showFieldErrors(body) {
+      const fields = body?.fields ?? {}
+      let focused = false
+
+      for (const [key, message] of Object.entries(fields)) {
+        const target = document.getElementById(`err-${key}`)
+        if (!target) continue
+        target.textContent = message
+        target.hidden = false
+
+        if (!focused && els.fields[key]) {
+          els.fields[key].focus()
+          focused = true
+        }
+      }
+
+      setNotice(body?.error ?? 'Please fix the highlighted fields.', 'error')
+    }
+
+    function readForm() {
+      const year = els.fields.year.value.trim()
+
+      return {
+        title: els.fields.title.value,
+        genre: els.fields.genre.value,
+        // "" is sent as-is so the API answers "Year is required."
+        year: year === '' ? '' : Number(year),
+      }
+    }
+
+    els.form.addEventListener('submit', async (event) => {
+      event.preventDefault()
+      clearFieldErrors()
+      clearNotice()
+
+      const { ok, body } = await api('/api/movies', { method: 'POST', body: readForm() })
+
+      if (!ok) {
+        showFieldErrors(body)
+        return
+      }
+
+      els.form.reset()
+
+      // Refresh the list so the new row appears with its server-assigned id.
+      await load()
+
+      if (state.selectedId !== null) {
+        await showMovie(state.selectedId)
+      }
+
+      setNotice(`Movie added successfully — “${body.title}” is now movie #${body.id}.`)
+      els.fields.title.focus()
+    })
+
+    load()
+  </script>
+</body>
+</html>
@@ -0,0 +1,899 @@
+{
+  "name": "bonpin-adrian-movie-api",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "bonpin-adrian-movie-api",
+      "version": "1.0.0",
+      "dependencies": {
+        "express": "^5.1.0",
+        "zod": "^4.6.5"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
+      "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^2.0.0",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.1",
+        "iconv-lite": "^0.7.2",
+        "on-finished": "^2.4.1",
+        "qs": "^6.15.2",
+        "raw-body": "^3.0.2",
+        "type-is": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+      "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
+      "integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.1.tgz",
+      "integrity": "sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.1.0.tgz",
+      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/negotiator/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.8.tgz",
+      "integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz",
+      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
+      "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.0.0",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/zod": {
+      "version": "4.6.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.5.tgz",
+      "integrity": "sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
@@ -0,0 +1,15 @@
+{
+  "name": "bonpin-adrian-movie-api",
+  "version": "1.0.0",
+  "description": "A simple movie collection REST API (Node.js + Express) with a frontend.",
+  "type": "module",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node --watch server.js"
+  },
+  "dependencies": {
+    "express": "^5.1.0",
+    "zod": "^4.6.5"
+  }
+}
@@ -0,0 +1,204 @@
+/**
+ * Movie Collection API — the whole backend in one file.
+ *
+ * - Domain: a **Movie** is one entry in the collection. The collection lives at /api/movies.
+ * - Storage: a plain JavaScript array. There is no database, so anything you add
+ *   disappears when the server restarts.
+ * - Validation: zod v4 schemas are the single source of truth. They validate the
+ *   request and produce the per-field error messages the frontend renders.
+ * - Runs on Node (`node server.js`), which is all this assignment needs.
+ */
+import express from 'express'
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import { z } from 'zod'
+
+const PORT = process.env.PORT || 3000
+
+// ---------------------------------------------------------------------------
+// Schemas
+// ---------------------------------------------------------------------------
+
+const ID_MESSAGE = 'ID must be a whole number, like 1.'
+
+/** `:id` path param. Accepts "2", rejects "abc", "0", "-1" and "1.5". */
+const movieIdSchema = z.coerce.number({ error: ID_MESSAGE }).int(ID_MESSAGE).min(1, ID_MESSAGE)
+
+/** "2010" (from a form or a query string) and 2010 are the same year. */
+const yearSchema = z.preprocess(
+  (value) => {
+    if (value === null || value === undefined) return undefined
+    if (typeof value !== 'string') return value
+
+    const trimmed = value.trim()
+    if (trimmed === '') return undefined
+    return /^-?[0-9]+(\.[0-9]+)?$/.test(trimmed) ? Number(trimmed) : value
+  },
+  z
+    .number({
+      error: (issue) =>
+        issue.input === undefined ? 'Year is required.' : 'Year must be a number, like 2010.',
+    })
+    .int('Year must be a whole year, like 2010.')
+    .min(1888, 'Year must be 1888 or later.')
+    .max(2100, 'Year must be 2100 or earlier.'),
+)
+
+/** The fields a client sends. All three are required. */
+const movieFields = {
+  title: z
+    .string({ error: 'Title is required.' })
+    .trim()
+    .min(1, 'Title is required.')
+    .max(120, 'Keep the title under 120 characters.'),
+  genre: z
+    .string({ error: 'Genre is required.' })
+    .trim()
+    .min(1, 'Genre is required.')
+    .max(60, 'Keep the genre under 60 characters.'),
+  year: yearSchema,
+}
+
+/** What a client sends to add a movie. */
+const movieDraftSchema = z.object(movieFields)
+
+/** What the API stores and returns: the draft, plus the server-assigned id. */
+const movieSchema = z.object({ id: z.number().int().min(1), ...movieFields })
+
+/** Every response that returns more than one movie. */
+const movieListSchema = z.array(movieSchema)
+
+/** Every error the API returns: a message, plus per-field messages when relevant. */
+const errorSchema = z.object({
+  error: z.string(),
+  fields: z.record(z.string(), z.string()).optional(),
+})
+
+// ---------------------------------------------------------------------------
+// Store — in-memory, seeded with the three movies the frontend starts with
+// ---------------------------------------------------------------------------
+
+let nextId = 1
+
+/** @type {Array<z.infer<typeof movieSchema>>} */
+const movies = []
+
+function seed(title, genre, year) {
+  movies.push({ id: nextId++, title, genre, year })
+}
+
+seed('Interstellar', 'Science Fiction', 2014)
+seed('Avengers: Endgame', 'Action', 2019)
+seed('Coco', 'Animation', 2017)
+
+const findMovie = (id) => movies.find((movie) => movie.id === id)
+
+/** The message every "no such movie" response uses. */
+const missingMovie = (id) => ({ error: `No movie with ID ${id}.` })
+
+// ---------------------------------------------------------------------------
+// Validation helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Turns a zod failure into the API's one error shape: a summary message plus a
+ * `fields` map the frontend can render next to each input.
+ */
+function validationError(error) {
+  const fields = {}
+
+  for (const issue of error.issues) {
+    const key = issue.path[0]
+    if (typeof key === 'string' && !(key in fields)) fields[key] = issue.message
+  }
+
+  return { error: error.issues[0]?.message ?? 'Invalid request.', fields }
+}
+
+/** Validates a body/params object; returns either `{ data }` or `{ error }`. */
+function parse(schema, value) {
+  const result = schema.safeParse(value)
+  return result.success ? { data: result.data } : { error: validationError(result.error) }
+}
+
+// ---------------------------------------------------------------------------
+// The frontend
+// ---------------------------------------------------------------------------
+
+const INDEX_HTML_PATH = fileURLToPath(new URL('./index.html', import.meta.url))
+
+// Read per request, so editing index.html shows up without restarting the server.
+async function indexResponse(req, res) {
+  const html = await readFile(INDEX_HTML_PATH, 'utf8')
+  res.type('html').send(html)
+}
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
+
+const app = express()
+app.disable('x-powered-by')
+app.use(express.json())
+
+// ---- Read -------------------------------------------------------------------
+
+// GET /api/movies -> the whole collection
+app.get('/api/movies', (req, res) => {
+  res.json(movieListSchema.parse(movies))
+})
+
+// GET /api/movies/:id -> one movie
+app.get('/api/movies/:id', (req, res) => {
+  const params = parse(z.object({ id: movieIdSchema }), req.params)
+  if (params.error) return res.status(400).json(params.error)
+
+  const movie = findMovie(params.data.id)
+  if (!movie) return res.status(404).json(missingMovie(params.data.id))
+
+  res.json(movieSchema.parse(movie))
+})
+
+// ---- Create -----------------------------------------------------------------
+
+// POST /api/movies -> add a movie, with the id assigned by the server
+app.post('/api/movies', (req, res) => {
+  const body = parse(movieDraftSchema, req.body)
+  if (body.error) return res.status(400).json(body.error)
+
+  const movie = { id: nextId++, ...body.data }
+  movies.push(movie)
+
+  res.status(201).location(`/api/movies/${movie.id}`).json(movieSchema.parse(movie))
+})
+
+// ---- Frontend ---------------------------------------------------------------
+
+app.get('/', indexResponse)
+app.get('/index.html', indexResponse)
+
+// ---- Fallbacks --------------------------------------------------------------
+
+app.use('/api', (req, res) => {
+  res.status(404).json({ error: `No route for ${req.method} ${req.originalUrl}.` })
+})
+
+// Anything the API did not answer is a dead link, not a JSON error.
+app.use((req, res) => {
+  res.status(404).type('txt').send('Not found')
+})
+
+// Malformed JSON and anything unexpected land here.
+app.use((error, req, res, next) => {
+  if (error?.type === 'entity.parse.failed') {
+    return res.status(400).json({ error: 'Request body must be valid JSON.' })
+  }
+
+  console.error('Unhandled error:', error)
+  res.status(500).json({ error: 'Internal server error.' })
+})
+
+app.listen(PORT, () => {
+  console.log(`Movie API running at http://localhost:${PORT}`)
+  console.log(`${movies.length} movies in the in-memory collection`)
+})