Add movie collection API and frontend #1

2026-09-21T06:52:04Z

adrianbonpin commented

2026-09-21 06:52:04 +00:00

A Movie Collection REST API built with Node.js + Express, plus a single-page frontend.

Storage: a plain JavaScript array (const movies = []) with a nextId counter — no database, so added records disappear on restart, as the brief specifies.

Endpoints

Method	Path	Result
`GET`	`/api/movies`	all movies
`GET`	`/api/movies/:id`	one movie, `404` when unknown
`POST`	`/api/movies`	add a movie, `id` assigned by the server, `201` + `Location`

Validation: zod schemas are the single source of truth. A missing title, genre or year returns 400 with one message per field:

{ "error": "Title is required.", "fields": { "title": "Title is required." } }

Frontend (index.html): follows the layout from the brief (centered Movie Collection heading, one-line Add Movie form, Load Movies button, ID/Title/Genre/Year table) using the dark panel/table/badge styling from bonpin-adrian-meal-api. It uses fetch() throughout and refreshes the list after adding. Rows also fetch a single movie from GET /api/movies/:id into a detail panel, so all three endpoints are exercised from the UI.

Verified: every endpoint exercised with curl (including 404, bad ids, empty fields, bad year, malformed JSON), and the add / field-error / detail-panel flows driven in a real browser.

node_modules/ is git-ignored.

A Movie Collection REST API built with Node.js + Express, plus a single-page frontend. **Storage:** a plain JavaScript array (`const movies = []`) with a `nextId` counter — no database, so added records disappear on restart, as the brief specifies. **Endpoints** | Method | Path | Result | | --- | --- | --- | | `GET` | `/api/movies` | all movies | | `GET` | `/api/movies/:id` | one movie, `404` when unknown | | `POST` | `/api/movies` | add a movie, `id` assigned by the server, `201` + `Location` | **Validation:** zod schemas are the single source of truth. A missing title, genre or year returns `400` with one message per field: ```json { "error": "Title is required.", "fields": { "title": "Title is required." } } ``` **Frontend (`index.html`):** follows the layout from the brief (centered *Movie Collection* heading, one-line *Add Movie* form, *Load Movies* button, ID/Title/Genre/Year table) using the dark panel/table/badge styling from `bonpin-adrian-meal-api`. It uses `fetch()` throughout and refreshes the list after adding. Rows also fetch a single movie from `GET /api/movies/:id` into a detail panel, so all three endpoints are exercised from the UI. **Verified:** every endpoint exercised with curl (including `404`, bad ids, empty fields, bad year, malformed JSON), and the add / field-error / detail-panel flows driven in a real browser. `node_modules/` is git-ignored.

adrianbonpin added 1 commit 2026-09-21 06:52:05 +00:00

Add movie collection API and frontend 6d00bb3cd1

Express app with an in-memory array as the store (no database) and three
endpoints:

- GET  /api/movies      -> the whole collection
- GET  /api/movies/:id  -> one movie, 404 when the id is unknown
- POST /api/movies      -> add a movie, id assigned by the server

zod schemas are the single source of truth for validation, so a missing
title, genre or year comes back as a 400 with one message per field.
index.html is served by the same app and drives all three endpoints with
fetch(), refreshing the list after a movie is added.

adrianbonpin merged commit c45878bd86 into prod

2026-09-21 06:52:12 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adrianbonpin/bonpin-adrian-movie-api#1