Problem Solving & Design B

The app models the embroidery domain carefully, with validated drafts, immutable store transforms, and a two-step delete confirmation that auto-disarms.

• +The delete flow requires a second click within four seconds, auto-disarming on timeout or any click outside the danger button, preventing accidental data loss.
• +The finish-date field is conditionally shown and disabled based on status, so it only appears and validates when the project is marked Finished.
• +Date validation uses a round-trip ISO check to reject impossible calendar dates like February 31st, not just a regex pattern.

Completeness A

All brief features are implemented end-to-end, with localStorage persistence, filtering, add/edit/delete, and a full set of project fields.

• +Storage failures are caught and a specific quota-exceeded message is shown in the banner, so users understand why a save did not work.
• +Corrupt localStorage entries are individually skipped and counted, with recovered projects still loaded, and the user is told how many were unreadable.
• +The empty state distinguishes between a truly empty notebook and a filtered view with no matches, offering a contextually appropriate call-to-action for each case.
• -Storage write failures from add/update/remove return an error result and show a banner, but the failed operation's outcome is never surfaced as a visible message to the user in the normal flow — the toast fires only on success, leaving a…

Technical Craft A

The codebase is split into focused TypeScript modules with explicit interfaces, pure store transforms, comprehensive Vitest tests, and a polished CSS design system with dark mode and reduced-motion support.

• +Store mutation functions are pure, returning new arrays without modifying their inputs, making them straightforwardly testable and safe to compose.
• +The CSS design system defines all colours, radii, and font stacks as custom properties in :root, with a complete dark-mode override block.
• +Cards animate in with a cubic-bezier overshoot and carry a per-card tilt derived from a hash of the project ID, with the entire animation block suppressed under prefers-reduced-motion.
• -The labelled controls practice is only partially met: form fields inside the modal use programmatic label association, but the filter select in the toolbar uses a wrapping label with a span rather than a proper label element with htmlFor,…