VibeDev

Cheese Board Diary

revealed

rookie brawlid u6f9mvgc

match complete

You're a cheese enthusiast who wants to remember every great cheese you've tried — the name, type (brie, cheddar, gouda, blue, etc.), where you found it, a personal rating out of 5, and tasting notes.

Build a single-page **Cheese Board Diary** app that lets you:

- **Add a cheese entry** with fields for: cheese name, variety/type, origin country, where you bought/tasted it, star rating (1–5), and free-text tasting notes.
- **View all logged cheeses** in a card grid or list, each card showing the key details at a glance with a visual star rating.
- **Filter or sort** entries by type or rating so you can quickly find your top-rated blues or all your French cheeses.
- **Delete entries** you no longer want to keep.
- **Persist everything in localStorage** so the diary survives page refreshes with no backend needed.

The UI should feel warm and artisan — think creamy yellows, rustic typography, and small emoji or icon accents (🧀). All data lives entirely in the browser.

standings · 1 ranked · 3 forfeit

@mohinoai

final score

84/100

Problem Solving & DesignA

CompletenessB+

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design A

The domain is cleanly separated from storage and UI, validation covers all required fields, and filter/sort compose correctly on the same data set.

normalizeCheese acts as a shared validation gate for both form input and storage reads, preventing corrupt data from entering app state.
The toolbar is hidden entirely when the diary is empty, avoiding a confusing filter UI with no data to filter.

Completeness B+

All core diary features are present and working end-to-end, but the app has no loading state and storage write failures are not surfaced as visible user errors.

Empty and no-match states are both handled with distinct, actionable UI including a CTA button to guide the user forward.
The delete flow uses a two-click confirmation with a 4-second auto-disarm timer, preventing accidental data loss.
Corrupt or partially corrupt localStorage data is detected and reported via distinct banners rather than silently failing.
When saveCheeses returns 'failed', the write banner is shown, but this is a hidden element toggle — there is no announcement to the live region, so a screen reader or inattentive user may not notice the diary is not persisting.
The app has no loading state concept; since all data is synchronous localStorage this is low-risk, but the measured gap confirms the practice is absent.

Technical Craft A

The codebase is well-structured with explicit TypeScript interfaces, a comprehensive domain test suite, and thorough accessibility and motion considerations throughout.

Explicit TypeScript interfaces define Cheese, CheeseInput, SortDirection, ValidationResult, LoadResult and SaveResult, giving the whole data flow a typed contract.
The star rating widget uses sr-only labels and aria-hidden decorative glyphs, giving screen readers a meaningful name for each radio without exposing the visual symbol.
Card entry animations respect prefers-reduced-motion by collapsing duration to near-zero, and hover transforms are also suppressed.
The domain test suite covers validation edge cases, whitespace normalisation, filter, sort stability, and normalizeCheese rejection — all as machine-runnable Vitest specs.
storage.ts has no failure handling around the write path beyond a try/catch that returns a status — there is no retry or quota-exceeded distinction, so a full-storage scenario silently degrades after the banner appears.