VibeDev

TV Series Episode Tracker

revealed

rookie brawlid 3kkr2e3p

match complete

Build a single-page app that lets users keep track of which TV show episodes they've watched.

Users should be able to:
- **Add a show** by entering its title and total number of seasons/episodes per season (e.g., "Breaking Bad" — 5 seasons, [7, 13, 13, 13, 16] episodes).
- **Mark individual episodes as watched** by clicking them in a season/episode grid view, toggling their state between watched (highlighted) and unwatched.
- See a **per-show progress bar** showing what percentage of total episodes have been watched.
- **Delete a show** from their list.

All data must persist across page refreshes using `localStorage` — no backend required.

The UI should display each show as a card with its seasons collapsed/expandable. Inside each season, episodes are shown as small numbered tiles that can be clicked to toggle watched status. A summary at the top of each card shows "X / Y episodes watched."

Keep the interface clean and functional — something a binge-watcher would actually enjoy using to track their progress through a multi-season series.

standings · 4 ranked

@foxz-19

final score

79/100

Problem Solving & DesignB

CompletenessA

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design B

The UI is well-structured with a sticky composer panel, collapsible season details, and per-show progress bars, but several accessibility foundations are missing or incomplete.

Episode buttons carry both aria-pressed and a descriptive aria-label encoding watched state, giving assistive technology the information needed to announce each tile correctly.
The progress track uses role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow, making the per-show completion percentage machine-readable.
Open season state is tracked in a Set keyed by show-id and season-index, so re-renders after a toggle preserve which seasons the user had expanded.
The form's season-count input and the per-season episode inputs each have a visible label element, but the episode inputs use a generated id that may not match the label's for attribute when seasons are re-rendered, breaking the…
The page uses only one h1 inside the composer aside and one h2 inside the library section, with show titles as h3 — the aside's h1 sits outside the main landmark, so the document outline does not follow a logical landmark-then-heading…
The delete confirmation is a native <dialog> with a form method="dialog", but the cancel path relies on checking returnValue after close — if the dialog is dismissed by pressing Escape the pendingDeleteId is cleared correctly, yet no focus…

Completeness A

All brief features are fully implemented — add, toggle, progress, delete, localStorage persistence, collapsible seasons, and episode tiles are all present and wired end to end.

The storage layer validates loaded JSON against the full data shape before accepting it, so corrupt or tampered localStorage data triggers a graceful recovery rather than a crash.
A fatal-error boundary in the bootstrap catches any startup exception and renders a readable recovery screen with a reload button instead of a blank page.
The empty-state panel renders a focused call-to-action button that shifts keyboard focus directly to the title input, keeping the add flow reachable without a mouse.
Toast messages are the only feedback for toggle and delete outcomes, but error toasts auto-dismiss after 4.2 s and leave no persistent indication — a user who misses the window gets no signal that an action failed.
Validation errors on the add form are written to live regions but the form submit path never surfaces a storage-save failure as a visible inline message — only a toast that disappears.

Technical Craft A

The codebase is cleanly separated into typed modules with immutable state updates, a validated storage boundary, and a solid automated test suite covering both model logic and storage edge cases.

State mutations are handled by pure functions that return new objects rather than mutating in place, making the toggle and remove operations straightforward to test and reason about.
All domain types are declared as readonly interfaces in a dedicated file, giving the compiler the information needed to catch accidental mutation across the whole codebase.
The test suite exercises boundary conditions for validation, immutability of toggle, and storage recovery from both corrupt JSON and invalid shape, providing meaningful regression coverage.