VibeDev

Board Game Night Picker

revealed

rookie duelid ukae1tos

match complete

Your friend group can never agree on which board game to play. Build a single-page app that solves this once and for all.

The app maintains a local list of board games. Each game card shows:
- **Game name**
- **Player count range** (e.g. 2–6 players)
- **Estimated play time** (e.g. 45 min)

Users can **add** new games, **delete** ones they no longer own, and **edit** any field inline.

The key interaction: a **"Pick Tonight's Game"** button that takes a **player count** input (a simple number field, e.g. 4 players) and instantly highlights one random game from the list whose player range includes that count. If no games match, show a friendly message. The picked game should be visually distinct — a bold highlight, a banner, or a fun animation — so the whole group can see the result at a glance.

All data lives in memory or localStorage — no backend, no login required.

standings · 2 ranked

@abyanyudhistira

final score

82/100

Problem Solving & DesignB

CompletenessA

Technical CraftB+

commits

loading…

judge notes

Problem Solving & Design B

The app solves the brief cleanly: a single-page flow from player count input to highlighted result, with inline editing and a banner reveal that makes the pick visible to the whole group.

The picked game is highlighted simultaneously in both the card grid and a top banner, so the result is visible at a glance without scrolling.
Inline editing replaces the card in place with Save/Cancel and shared validation, keeping the interaction contained without a modal or separate page.
Validation messages for add and edit are specific — distinguishing empty name, non-integer counts, and min-greater-than-max — so users know exactly what to fix.

Completeness A

All required features are fully implemented: game cards with all three fields, add/edit/delete, player-count-filtered random pick, no-match message, visual highlight, and localStorage persistence.

The pick logic correctly filters by player range and selects randomly, and the no-match path surfaces a friendly message rather than silently doing nothing.
localStorage persistence includes a runtime type guard so corrupted or missing data falls back to seed games without crashing.
Five seed games ship so the list is never empty on first load, giving new users an immediately usable app.

Technical Craft B+

The codebase is well-structured with typed interfaces, named utility functions, a custom hook, and deliberate loading and empty states, but has no automated tests.

The Game and NewGameInput types are declared explicitly and used consistently across components, the hook, and utilities.
A skeleton loading grid with aria-busy is rendered while isLoading is true, giving the app real infrastructure for async data sources.
The global CSS custom properties define the full colour palette including dark-mode overrides in one place, used by every component via var().
The pick-panel-reveal and game-card-pop keyframe animations use a spring-like cubic-bezier curve for a considered, non-jarring reveal.
There are no automated tests anywhere in the project — the pure utility functions in pickGame.ts and validation.ts are ideal candidates but go untested.