Online store// built to buy
Morrow Coffee
An online store that helps a beginner choose, sells subscriptions next to one-off bags, and posts every order to accounting on its own.
A fictional small-batch coffee roaster · Next.js 16 App Router
/store
Morrow Coffee
Small-batch coffee roaster
What was asked of us
The brief.
Written for this demo, the way briefs reach us. Morrow Coffee is a fictional company.
We sell most of our coffee at markets and to cafés. Our webshop takes orders, but every one is copied by hand into accounting, subscriptions live in a spreadsheet and we cannot tell which campaigns sell. We want a shop that feels like us, makes choosing easy for someone new to good coffee, and posts every order to accounting on its own.
- 01Help a beginner choose by taste rather than by origin.
- 02Make a subscription a choice on every coffee, not a separate journey.
- 03Orders, payments and stock reach accounting and inventory with no re-keying.
What we delivered
The pages and journeys in the build.
- [01]A shop that sorts by tasteFilters for type, flavour, roast, brew method and process, a sort, and search that answers as you type. The choice stays in the address, so a filtered shop can be shared.
- [02]Find your coffeeFive questions, one per screen, that end in a match with its percentage and reasons, two alternatives, and the grind set from the brew method.
- [03]Product pages that sell the repeatSize, grind, and one-off or subscribe side by side with the saving shown, the bags left in the lot, the origin and a recipe for each brew method.
- [04]Basket and checkoutA basket drawer with a free delivery bar, a discount code and undo, and a checkout in three steps with delivery dates worked out from the roast days.
- [05]Confirmation and accountAn order confirmation with what happens next, past orders, and subscriptions the customer can skip, pause, change or cancel.
- [06]Subscriptions and brew guidesA subscription builder with the price per delivery and per month, and four brew guides with a step timer and a ratio calculator.
What we built
How it works underneath.
- 01Orders created on the serverCheckout posts to the site's own server, which checks every field again, prices the order from the catalogue, ignores any price the browser sends, checks the stock in each lot and returns an order number.
- 02Card details stay in the pageThe card number, expiry and security code are checked in the browser and never sent. The server receives the card type and the last four digits.
- 03Payment to accountingOn a client build the captured payment creates the invoice in accounting. Here the live feed shows each step in order: order, payment, invoice, stock, subscription, email and the roast list.
- 04Stock that counts downEach order reduces the stock of its lot, and the product page shows the bags left, with a warning when only a few remain.
- 05Subscriptions as repeat ordersA subscription is stored with its frequency and next delivery date. Each change from the account goes through the server and on to the subscriptions system.
- 06Consent before measurementProduct views, adds to basket and the purchase are measured, and sent to the ad platform, only with the matching consent. The order goes through either way.
Why it is built this way
The decisions, and the reason for each.
- 01Taste firstPeople new to speciality coffee do not shop by country. They know whether they like fruity or chocolatey.
- 02Subscribe beside the pricePutting the subscription next to the one-off price makes the cheaper repeat order an easy choice.
- 03Free delivery as progressA bar that fills toward the threshold shows how close the customer is, without a pop-up.
- 04Three checkout stepsContact, delivery and payment each fit one phone screen, and the summary folds away, so nothing is missed on a small display.
- 05Dates from the roast daysThe coffee is roasted to order, so each delivery date is worked out from Tuesday and Friday instead of a general promise.
The wiring
Where each part sends what a visitor did.
The parts the X-ray marks inside the demo. Open the demo notes on any page and choose X-ray to see them in place.
- 1SearchAnswers as the visitor types, from the same catalogue the shop is built from.// CatalogueOn Shop →
- 2Taste filtersNarrow the catalogue by type, flavour, roast, brew method and process, and keep the choice in the address so it can be shared.// CatalogueOn Shop →
- 3One-off or subscribeA subscription is created with its frequency when the order is placed, 10% off and delivered free.// SubscriptionsOn a coffee page →
- 4Add to basketAdds the line with its size and grind, and checks the stock left in that lot.// InventoryOn a product page →
- 5PayPayment is captured and the order created, then the invoice posts to accounting, stock is reduced and the coffee joins the next roast list.// Payments and accountingOn Checkout, step 3 →
- 6Manage a subscriptionSkip, pause, change the coffee or how often, or cancel. Each change is sent to the subscriptions system.// SubscriptionsOn Your account →
- 7Cookie choiceDecides whether the purchase is measured and shared with the ad platform. The order goes through either way.// ConsentOn every page →
Try it
Three things to do in the demo.
Built with Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, Motion, Zod in the browser and on the server.
Let's talk about what you are building.
A discovery session maps where visitors drop out and which systems the site should feed.