VibeDev

Seed Packet Planner

revealed

rookie brawlid j5ezyqff

match complete

You're an avid home gardener with a shoebox overflowing with seed packets bought at nurseries, farmers markets, and online shops — most half-forgotten, some expired. Build a single-page **Seed Packet Planner** that lets you catalog every packet you own and track when to sow them.

Each seed entry should capture: **plant name**, **variety**, **quantity remaining** (full / partial / empty), **best-before year**, and **ideal sowing months** (multi-select, e.g. March–May). Display your collection as a visual card grid, with each card color-coded by status — *fresh*, *use soon* (within 1 year of expiry), or *expired* — based on the current date compared to the best-before year.

Add a **"What to sow this month"** banner at the top that automatically filters and highlights seeds whose ideal sowing window includes the current calendar month.

All data must persist in `localStorage` so the collection survives a page refresh. Users should be able to add new packets via a form, edit existing entries inline or via modal, and delete packets they've used up. A simple search/filter bar to find seeds by name completes the experience.

standings · 4 ranked

@abyanyudhistira

final score

82/100

Problem Solving & DesignB+

CompletenessB+

Technical CraftC

commits

loading…

judge notes

Problem Solving & Design B+

The planner models the seed-tin domain faithfully with status logic, seasonal filtering, month formatting, and contextual empty states that all match the brief's intent.

packetStatus correctly distinguishes three states — expired when the year has passed, use-soon in the expiry year itself, and fresh otherwise — matching the brief's colour-coding requirement.
formatMonths collapses contiguous month selections into readable ranges (e.g. Mar–May) and handles wrap-around runs that span the year boundary.
Three distinct empty-state messages are shown depending on whether the tin is empty, a search returned nothing, or a filter has no matches, giving the user clear next-action guidance.

Completeness B+

All brief features are implemented end-to-end, including the sow banner, card grid, CRUD operations, localStorage persistence, and search — the only gap is that localStorage write failures are not surfaced visibly to the user.

The 'What to sow this month' banner correctly filters by the current calendar month and excludes empty packets, rendering each matching seed with its status class.
The delete flow requires a second click to confirm, preventing accidental removal and giving clear visual feedback via the danger button style.
When localStorage.setItem throws (e.g. storage quota exceeded), savePackets returns false and state.persisted is set, but the storage-banner is only shown on the next paint — a user who adds a packet and immediately closes the tab may not…

Technical Craft C

The codebase is cleanly split into focused modules with named functions throughout, a well-structured design-token system, and responsive layout — but it has no type definitions and no automated tests.

All design tokens — colours, spacing scale, typography, and easing — are declared as CSS custom properties in :root and reused consistently, including a full dark-mode override block.
The card entry animation respects prefers-reduced-motion by disabling the slip keyframe for users who have requested reduced motion.
Input validation errors are announced to assistive technology via aria-invalid on the offending control and focus is moved to the first failing field.
There are no explicit type definitions (interfaces, JSDoc types, or schemas) anywhere in the JavaScript modules, so function signatures and data shapes are implicit and only inferable from runtime behaviour.
There are no automated tests; correctness of packetStatus, validatePacket, formatMonths and storage round-trips relies entirely on manual verification.