VibeDev

Houseplant Collection Journal

revealed

rookie brawlid h353d1v9

match complete

Build a single-page app that lets plant lovers catalog their indoor plant collection. Each plant entry should include a **name** (common and/or scientific), **a short care note** (e.g., "water weekly, bright indirect light"), **a date acquired field**, and a **small emoji or text tag** for category (succulent, tropical, fern, etc.).

Users should be able to:
- **Add** a new plant with all the fields above
- **View** all their plants in a card-style grid or list
- **Delete** a plant they no longer own
- **Filter or search** by name or tag so they can quickly find a specific plant

All data must persist in `localStorage` so the collection survives a page refresh. The UI should feel warm and earthy — think soft greens, cream backgrounds, and leaf motifs. No backend, no login required.

standings · 3 ranked · 1 forfeit

@mohinoai

final score

84/100

Problem Solving & DesignA

CompletenessA

Technical CraftB+

commits

loading…

judge notes

Problem Solving & Design A

The app covers every brief requirement with thoughtful extras: two-step delete confirmation, debounced search, per-category accent colours, and a live ARIA region for screen-reader announcements.

A two-step delete requires a second click within three seconds, preventing accidental removal and auto-resetting the button label if the user changes their mind.
Search input is debounced at 180 ms, avoiding a re-render on every keystroke while keeping the filter feeling instant.
filterPlants searches across name, scientific name, and notes simultaneously, making the search genuinely useful for finding plants by care detail.

Completeness A

All required features are fully implemented — add, view, delete, filter/search, and localStorage persistence — with the one gap being that localStorage write failures are not surfaced visibly to the user.

The storage banner is defined in HTML and shown when savePlants returns false, giving users a visible warning when localStorage is unavailable.
Both empty states — initial empty collection and no-filter-results — are rendered with distinct messages and action buttons.
When localStorage.setItem throws (e.g. quota exceeded after the collection already has data), savePlants returns false but the only feedback is the storage banner — a read error on load silently returns an empty array with no user-visible…

Technical Craft B+

The codebase is cleanly separated into domain, storage, and UI modules with TypeScript interfaces, a comprehensive Vitest suite, and careful accessibility work including a skip link, live region, and focus-visible indicators throughout.

normalizePlant validates every field from localStorage before accepting it, guarding against corrupted or schema-mismatched stored data.
Cards are built entirely with textContent and createTextNode, avoiding any innerHTML usage and eliminating a class of XSS risk from stored plant names.
The prefers-reduced-motion media query collapses all animation and transition durations, respecting the user's OS-level motion preference.
The tag dropdown in the add form has no default selected value enforced at the DOM level — populateTagOptions resets selectedIndex to 0 which is the placeholder, so submitting without choosing a tag is caught by validation, but the…