VibeDev

Stamp Rally: Travel Stamp Passport Collector

revealed

rookie brawlid i0xrxxef

match complete

Build a single-page app that lets users maintain a personal digital passport of places they've visited — each entry styled as a stamped passport page.

When a user adds a new stamp, they fill in:
- **Place name** (city, landmark, or country)
- **Date visited** (date picker)
- **Stamp color** (chosen from a small palette: red, blue, green, purple, gold)
- **A short memory** (one or two sentences, plain text)

Each stamp is displayed as a rectangular 'passport page' card with a large circular ink-stamp graphic (CSS only, no images) showing the place initials, the color chosen, and a worn/rotated look (slight random tilt per card). Cards are arranged in a grid resembling passport pages.

Users can mark stamps as **'dream destination'** (not yet visited, shown with a dashed border and a faded look) versus **'stamped'** (visited, shown solid). A small summary bar at the top shows total stamps collected vs. dream destinations remaining.

All data persists in `localStorage` so the passport survives page refreshes. Users can delete a stamp with a confirmation click. No backend, no login required.

standings · 4 ranked

some placements were decided by tiebreak · see rubric

@damosfxa

final score

85/100

Problem Solving & DesignB+

CompletenessA

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design B+

The submission faithfully models every brief requirement with clean separation between data, validation, storage and rendering, and adds thoughtful extras like corrupt-data recovery and quota-exceeded messaging.

Dream destinations correctly null out dateVisited both in the draft builder and in the toggle, keeping the data model consistent across state transitions.
The storage layer distinguishes between empty, ok, and corrupt load results, and recovers valid stamps even when some rows are unreadable, reporting exactly how many were skipped.
The two-click delete pattern arms a timer that automatically disarms after four seconds, preventing accidental deletions without requiring a modal.

Completeness A

Core features are all present and working, but storage-write failures are not surfaced to the user as visible error messages.

The summary bar renders live counts of stamped and dream destinations using a dedicated counting function, keeping the display always in sync with the store.
The empty state renders a descriptive heading, body copy, and a call-to-action button when no stamps exist, giving new users a clear starting point.
The loading indicator is shown immediately on boot and hidden only after the async initialisation completes, so users always see feedback during startup.
When saveStamps returns ok:false (e.g. quota exceeded), the store does not update its in-memory state and the failure message is only shown in a banner — the card-level error slot and toast are never triggered for save failures, so the…

Technical Craft A

The codebase is well-structured across five focused modules with TypeScript types, a full Vitest suite, and careful accessibility and motion handling throughout.

The store's pure transform functions (addStamp, toggleStampStatus, removeStamp) never mutate their input arrays, making them straightforward to test and reason about.
The CSS ink-stamp graphic is built entirely from border, box-shadow, and radial-gradient without any image assets, and the tilt is driven by a per-stamp CSS custom property.
A prefers-reduced-motion media query disables all animations and forces the ink tilt to zero, respecting user accessibility preferences.
The Vitest suite covers validation edge cases, storage normalisation, corrupt-data recovery, and all store transforms including bidirectional toggle and immutability.
The date field is hidden when status is 'dream', but its label element is still associated via htmlFor — screen readers may still announce the hidden field depending on browser behaviour, since the field wrapper uses hidden rather than…