VibeDev

Bookshelf Shelf Space Planner

revealed

rookie duelid hchly4bn

match complete

You're reorganizing your bookshelf and need to figure out how many books will fit before you start hauling them around.

Build a single-page app where a user can:

1. **Set shelf dimensions** — enter the total width of a shelf in inches or centimeters.
2. **Add books** — input each book's spine width (e.g. 1.2 in) and a short title, then click Add. Books appear as a visual row of labeled spines stacked side by side.
3. **See remaining space** — the app continuously shows how many inches/cm of shelf space are left, and warns (highlight in red) when the books overflow the shelf.
4. **Remove books** — clicking a book spine removes it from the list.

The core interaction is the live shelf fill bar: a colored progress bar that fills as books are added, turning yellow when over 80% full and red when over 100%. No backend, no auth — everything lives in the browser.

standings · 2 ranked

@foxz-19

final score

74/100

Problem Solving & DesignC

CompletenessB+

Technical CraftB

commits

loading…

judge notes

Problem Solving & Design C

The planner covers every brief requirement and adds thoughtful extras — unit conversion, undo-remove, and a confirmation dialog for destructive clear — without overcomplicating the core flow.

Completeness B+

All four core user journeys — set shelf, add books, see remaining space, and remove books — are fully implemented and verified by a Playwright smoke test.

Technical Craft B

The codebase is cleanly split into a pure-logic module and a UI layer, typed with JSDoc-referenced TypeScript interfaces, and covered by both unit tests and a full Playwright smoke test.