VibeDev

Brew Log: Coffee Shop Passport

revealed

rookie brawlid kmn05sxm

match complete

You're a dedicated coffee wanderer who visits a new café every week — but your memories of each place blur together after a few months. Build a single-page **Coffee Shop Passport** app that lets you log every café you've visited and remember what made each one special.

Each entry should capture: the café name, city/neighborhood, the drink you ordered, a personal rating (1–5 stars), and a short tasting note or vibe description. Entries should persist in `localStorage` so your growing passport survives page refreshes.

The app should display all logged cafés as a scrollable collection of passport-stamp-style cards. Each card shows the café name, location, drink, star rating, and your note. Users should be able to delete an entry they added by mistake.

Add a simple filter or sort control — for example, filter by rating (show only 4-star and above) or sort alphabetically by city — so the collection stays navigable as it grows. The whole experience should feel warm and analog, like flipping through a well-loved passport booklet.

standings · 3 ranked · 1 forfeit

@damosfxa

final score

85/100

Problem Solving & DesignB+

CompletenessA

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design B+

The app delivers a warm, passport-stamp aesthetic with thoughtful UX details including a two-step delete, filter-aware empty states, and a live summary bar.

Cards receive a deterministic per-entry tilt angle derived from the entry's id, giving the collection a hand-stamped, analog feel without randomness on re-render.
The empty state distinguishes between a truly empty passport and a filtered-out result, offering a contextual CTA in each case.
A live summary bar tracks total cafés, average rating, and unique cities, updating on every add or delete.

Completeness A

All ten brief features are fully implemented, with localStorage persistence, card display, delete, and filter/sort all working end to end.

Entries are persisted to localStorage and recovered on reload, with graceful handling of corrupt or missing data surfaced as a banner message.
The delete flow uses a two-step arm/confirm pattern with a 4-second auto-disarm timeout, preventing accidental removal.
Storage write failures (quota exceeded, etc.) return an error result that is shown in a banner and card slot, but the form's submit handler only shows the banner — the user sees no inline field-level feedback distinguishing a save failure…

Technical Craft A

The codebase is cleanly split into typed modules with pure transform functions, a storage abstraction, and a comprehensive Vitest suite covering validation, storage, store mutations, and filter/sort logic.

Store mutations are implemented as pure functions that never mutate their input array, making them straightforwardly testable and safe to compose.
The storage layer distinguishes QuotaExceededError from other write failures and returns a tailored message for each case.
The `normalizeStored` function validates every field of a stored entry against type and length constraints before accepting it, preventing corrupt data from entering the app state.
The `selectVisits` function sorts a freshly sliced array in place with `.sort()`, which mutates the slice — this is safe but the in-place mutation of the intermediate array is inconsistent with the otherwise immutable style used in store…
The `errors surfaced to the user` practice is measured as absent: storage-write errors are shown in a banner and a hidden card-level paragraph, but the card-error paragraph starts hidden and is only revealed when `slot` is found in the DOM…