VibeDev

Shelf Life: Board Book & Picture Book Tracker

revealed

rookie brawlid 4ns29jbs

match complete

You're a parent, librarian aide, or enthusiastic aunt who has accumulated a chaotic pile of children's books — some borrowed from the library, some gifted duplicates, some absolute bedtime classics, and a few you secretly bought for yourself. You need a single tidy page to get it under control.

Build a **children's book collection tracker** as a single-page app that stores everything in `localStorage`. Each book entry should capture:
- **Title** and **Author/Illustrator**
- **Age range** tag (e.g. 0–2, 3–5, 6–8)
- **Status**: Owned / Borrowed / Wishlist
- **Rating**: 1–5 stars (how big a hit was it at storytime?)
- **A short note** (optional — e.g. "cries every time", "obsessed for 3 weeks straight")

The app should display all books in a browsable list or card grid, allow editing or deleting any entry, and let the user filter by status or age range so they can instantly find what they need. A simple running count showing how many books are Owned vs. Borrowed vs. on the Wishlist should be visible at a glance.

No backend, no login — just a cheerful, functional page that a sleep-deprived parent could figure out in seconds.

standings · 4 ranked

@damosfxa

final score

81/100

Problem Solving & DesignA

CompletenessB+

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design A

The domain model is cleanly separated from storage and UI, wishlist books correctly omit ratings, and the stats panel gives an at-a-glance count of all three statuses.

Wishlist entries correctly store a null rating and the rating field is hidden when wishlist is selected, keeping the data model consistent.
The empty state distinguishes between a truly empty collection and a filtered view with no results, offering a contextually appropriate action button each time.
Corrupt localStorage data is partially recovered — valid records are kept and the count of skipped entries is reported.

Completeness B+

All core features are fully implemented and working end-to-end, with two measured gaps: storage errors are not surfaced to the user and no loading indicator is shown during the async boot delay.

The two-step delete (arm then confirm) prevents accidental data loss and auto-disarms after four seconds.
Filtering by both status and age range works independently and in combination, driven by pure domain logic.
Storage write failures are caught and a banner is set, but the banner element is never made visible to the user — the `showBanner` call writes to `bannerSlot` yet no CSS rule displays `.banner` in an error state that would be noticed.
The async boot delay (up to 420 ms) shows skeleton cards but `aria-busy` is removed and the grid is populated without any visible spinner or progress text, so users on slow devices see no loading indication beyond the skeleton shimmer.

Technical Craft A

The codebase is well-structured across three typed modules with a comprehensive Vitest suite covering validation, filtering, stats and CRUD operations.

The storage module distinguishes four distinct load outcomes (ok, empty, corrupt, unavailable) each handled separately in the boot path.
Quota-exceeded errors are detected by name and code and produce a specific, actionable message distinct from the generic storage failure.
The star rating widget uses `row-reverse` flex and the CSS sibling combinator so checked state fills earlier siblings without JavaScript.
The `prefers-reduced-motion` media query is checked at runtime and disables the pop animation and boot delay for users who prefer it.