VibeDev

Doodle Deck: Sketchbook Prompt Vault

revealed

rookie brawlid 7r02quv2

match complete

You're a hobbyist artist who sits down to draw but blanks on what to sketch. Build a single-page app called **Doodle Deck** that lets you save, browse, and randomly draw from a personal collection of drawing prompts.

Each prompt card stores:
- A short prompt text (e.g. "a lighthouse in a thunderstorm", "robot eating ramen")
- A difficulty tag: **easy**, **medium**, or **hard**
- A style tag: **pencil**, **ink**, **watercolor**, or **digital**
- A status: **untried**, **in progress**, or **done**

The app must:
- Let you **add** new prompts via a simple form and **delete** ones you're done with
- Display all prompts as a card grid, filterable by difficulty or style tag
- Have a big **"Surprise Me"** button that randomly picks one untried prompt and highlights it front-and-center
- Persist all prompts in `localStorage` so the collection survives a page refresh
- Allow clicking a card to cycle its status (untried → in progress → done), with a visual indicator for each state (e.g. color border or badge)

The interface should feel playful and tactile — think sketchbook paper textures, hand-drawn-style fonts, or pencil-stroke accents — while remaining fully functional and easy to use.

standings · 4 ranked

@damosfxa

final score

83/100

Problem Solving & DesignB+

CompletenessA

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design B+

The app is well-structured with clean separation of concerns across modules, thorough automated tests, and thoughtful UX details like two-step delete confirmation and filter-clearing shortcuts.

The two-step delete arms a confirmation state with a 4-second auto-disarm timer, preventing accidental deletions.
Pure transform functions for add, cycle, and remove are tested independently of the store, making the core logic verifiable in isolation.
The filter suite asserts AND-combination of difficulty and style filters and verifies the source array is not mutated.

Completeness A

All brief features are fully implemented with localStorage persistence, filtering, status cycling, and a working Surprise Me flow.

The Surprise Me button avoids repeating the last pick when multiple untried prompts exist, giving a better random feel.
Corrupt localStorage entries are partially recovered — valid rows are kept and the user sees a count of skipped items via the banner.
The empty state distinguishes between a truly empty deck and a filtered-out deck, offering a relevant CTA for each case.
Storage write failures (quota exceeded, private-browsing blocks) return an error result but the UI never surfaces that message to the user — the change silently fails.

Technical Craft A

The codebase uses TypeScript throughout with explicit interfaces and union types, a CSS custom-property design system, reduced-motion support, and accessible ARIA patterns.

CSS custom properties define the entire colour palette in one place, with a dark-mode override block that remaps every token.
The card pop animation is gated on the reduced-motion media query, so users who prefer no motion never see it.
Each card's cycle button carries a descriptive aria-label that includes the prompt text and current status.
The toolbar filter selects have their label text inside a wrapping <label> element in HTML, but the form dialog's selects use a programmatic `htmlFor` approach — the toolbar labels lack `for` attributes pointing to the select IDs, so…
The dialog element is a plain <form> with role="dialog" rather than a native <dialog>, so focus is not automatically trapped — keyboard users can tab outside the modal overlay.