Shopping List App
Case study
Overview
A shopping list app built with React, TypeScript, and Vite, featuring item management, persistence, and reordering. This started as a recruitment coding challenge and became a portfolio rebuild: same brief, no time limit, built with my current stack and tested throughout.
The origin
This began as a 6-hour coding challenge for a front end developer role I applied for. The brief listed ten user stories, from basic CRUD through to budget tracking, sharing, and authentication. I aimed for five stories in the time available and completed three. The feedback was that it wasn't enough for the time given, which was fair. The code had real issues: a direct state mutation bug, dead code, and minimal structure.
I didn't get the role, and stepped away from job hunting for a while afterwards. I always intended to come back to this project once I had the headspace for it.
The rebuild
Returning to it for my portfolio, I rebuilt from scratch rather than patching the original. The original was Create React App; this rebuild uses Vite, React, and TypeScript, matching my current stack across other portfolio projects.
Working with Claude as a pair-programming collaborator, I defined the data model, planned a story-by-story build where each story is a working, tested, committed increment, and wrote tests alongside each feature using Vitest and Testing Library. This is an honest record of an AI-assisted build: I made the scoping and design decisions, and used Claude to generate code, explain concepts, and catch issues along the way.
Key decisions
TypeScript rebuild over extending the original. The original had a genuine React bug (direct state mutation) and minimal structure. A clean rebuild in my current stack was faster and more honest than patching code I'd already flagged as weak.
Story-by-story commits, never broken. Each story is its own commit, and the app is runnable and tested at every step. This makes the git history a readable record of incremental delivery.
Up/down buttons instead of drag-and-drop for reordering. I originally planned drag-and-drop, but chose simple up/down buttons instead. They're trivial to implement, need no extra dependency, and are naturally accessible via keyboard and screen reader without additional configuration. Accessibility-by-default felt like the stronger choice for a portfolio piece demonstrating UX thinking, not just feature completeness.
Styling pass
With the core functionality built and tested, I did a quick styling pass: a small set of colour and spacing tokens, adapted from the palette I used in my original 6-hour attempt. The result is a cohesive, branded look without a full Figma design process, "before" screenshots saved for comparison with a future visual design pass.
What's next
- Budget tracking: item cost, running total, spending limit with alert
- A full visual design pass in Figma, building on the current styling
- Category support, enabling sort by category, cost, or alphabetically
- Drag-and-drop reordering as a progressive enhancement alongside the existing buttons