Ember & Oak, online store
A complete e-commerce template for a coffee roaster: product options, subscriptions, cart and a validated checkout.
Ember & Oak, online store
A complete e-commerce template for a coffee roaster: product options, subscriptions, cart and a validated checkout.
- Slide-out cart, saved in the browser between visits
- Free-shipping threshold, tracked by a progress bar in the cart
- Subscribe & save, chosen right on the product page
Context
Ember & Oak is a fictional coffee roaster based in Hamilton, Canada. The business is fictional: names, prices, reviews and figures are demo content. The code is complete and deployable.
The challenge
Show that a store can be fast and polished without a heavy platform: catalogue, options, subscriptions and checkout, all as a static site.
What I did
- A shop with filters (type, roast) and sorting.
- Product pages with size, grind, quantity and subscribe & save pricing.
- A two-question coffee finder that recommends a coffee.
- A slide-out cart (native
<dialog>, focus trapped) and a cart page, saved in the browser. - Checkout with inline validation (including Canadian postal codes) and a confirmation page. No card fields: in production this step hands off to Stripe Checkout or Shopify.
- Illustrated coffee bags generated from the product data, so the catalogue always looks consistent.
Outcome
A Nuxt site pre-rendered to static pages, hosted on Cloudflare, ready to connect to real payments. The code is public on GitHub.
A similar project in mind?
Tell me about your project in a few lines. I reply personally, with questions or a first estimate.