VibeDev

Fridge Expiry Watchlist

revealed

rookie duelid 19i0i74p

match complete

Build a single-page app that helps users track items in their fridge before they go bad.

A user can type in a food item name (e.g. "Greek Yogurt"), pick or type an expiry date, and add it to a live list. Each item in the list displays:
- The food name
- The expiry date
- A color-coded status badge: **Fresh** (more than 3 days away), **Expiring Soon** (1–3 days), or **Expired** (past today)
- A delete button to remove it

The list should automatically sort so the soonest-to-expire items appear at the top. No backend, no auth — all state lives in the browser (localStorage is encouraged so the list persists on refresh). The interface should be clean enough that someone could glance at it each morning before grocery shopping.

results

2 ranked

standings · 2 ranked

@abyanyudhistira

final score

94/100

Problem Solving & Design94/100

Completeness94/100

Technical Craft94/100

judge notes

Problem Solving & Design 94

Clean, considered visual design with responsive breakpoints, semantic HTML, and a coherent morning-glance UX that fits the brief exactly.

Viewport meta tag present in `index.html`; responsive grid breakpoints at 560px and 640px for item rows and form fields
Color-coded status system uses distinct oklch tokens for fresh/expiring_soon/expired with matching badge, row background, and relative text
`aria-labelledby` on sections, `aria-live` on summary, `role=alert` on form errors, `aria-label` on delete buttons — strong accessibility
Empty-state component with helpful copy and 'up next' eyebrow on the soonest item add meaningful UX polish
Typography uses two complementary typefaces (Fraunces display, Source Sans 3 body) with a warm paper-toned palette coherent with the product purpose
No mobile-specific navigation concern since it's SPA, but the max-width of 40rem could feel narrow on large desktop displays without further layout adaptation

Completeness 94

All brief-required features are present, wired, and working end-to-end with localStorage persistence, sorting, status badges, and delete.

All five required display fields (name, expiry date, status badge, delete button, sorted list) are implemented and rendered in `ItemList`/`ItemRow`
`localStorage` persistence via `storage.ts` with Zod validation on both read and write; storage failure surfaced to UI via `storageWarning`
Sorting on every add/delete via `sortByExpiry` called in both `handleAdd` and initial state
Status badge logic in `expiry.ts` matches brief exactly: fresh >3 days, expiring_soon 0-3 days, expired <0 days
Brief says 'Expiring Soon' covers 1-3 days; implementation includes day 0 (today) as `expiring_soon`, a minor spec deviation

Technical Craft 94

Technically excellent for the scope: Zod schemas guard storage I/O, date arithmetic avoids timezone bugs, TypeScript is strict throughout, and the code is cleanly separated into composable modules.

Zod used for both runtime validation of localStorage payloads and type derivation — `FridgeItemListSchema.safeParse` with graceful fallback on corrupt data
`parseLocalDate` uses local calendar arithmetic (new Date(year, month-1, day)) avoiding UTC offset bugs common in date-only string parsing
Strict TypeScript config (`noUnusedLocals`, `noUnusedParameters`, `strictMode`, `verbatimModuleSyntax`) with no type assertions or `any`
Clean separation: `lib/dates.ts`, `lib/expiry.ts`, `lib/storage.ts`, `lib/types.ts` each with single responsibility; components are thin
`todayIso` injectable as a parameter in `getStatus`/`daysUntil`/`countByStatus` enables deterministic testing without mocking
No test files present — the injectable `today` parameter design hints at testability but no tests are shipped
No `<ErrorBoundary>` wrapping the app root; a runtime error in a component would produce a blank screen