The brief
What needed solving
Independent chefs were selling recipes, classes and memberships across social posts, DMs and payment links — there was no single place where a home cook could find a chef, trust them, and buy from them. The product needed to be a storefront, a booking system and a subscription business at once, without feeling like three separate apps stitched together.
Approach
How it was built
01A design system before a single screen
The Figma work came first: type scale, spacing rhythm, and a component inventory covering cards, filters, media blocks and commerce states. Those decisions were translated into Tailwind tokens and a shared React component layer, so every later page was assembled from parts that already agreed with each other rather than styled from scratch.
02Discovery built for a growing catalogue
Recipe browsing is the heart of the product, so it was designed to stay fast as the catalogue grows — filterable, paginated views backed by normalized Redux state, with the list, the filters and the URL all reading from one source of truth instead of each keeping their own copy.
03Commerce flows treated as first-class UI
Bookings and subscriptions have far more states than a happy path: pending, confirmed, expired, payment-failed, already-owned. Each one got real interface design rather than a generic error, which is what keeps a marketplace feeling trustworthy at the exact moment money changes hands.
Scope
What shipped
- Curated chef storefronts with recipe, class and subscription offerings
- Filterable recipe discovery across the full chef catalogue
- One-to-one live class booking with scheduling states
- Subscription management for recurring premium content
- Responsive layout tuned from small phones to wide desktops
- Design-system-driven component library shared across every page
Engineering notes
The hard parts
Challenge
The pages are image-heavy by nature — food photography is the product — which puts continuous pressure on load time and layout stability.
Solution
Media was moved to responsive, lazily loaded images with reserved aspect ratios so nothing reflows as pictures arrive, and heavy list rendering was kept off the main path with memoized selectors.
Challenge
Purchase state had to stay coherent across discovery, booking and subscription screens, where the same chef or recipe can appear in several places at once.
Solution
A normalized Redux store keyed by entity id, with derived selectors for each view, so an update in one place is reflected everywhere without duplicated fetches or contradictory UI.
Outcome
Where it landed
- 01Shipped and live as a public marketplace at cooksbook.com
- 02A reusable component and token layer that made later pages materially quicker to build
- 03One coherent flow from discovery through booking to subscription, instead of scattered sales channels