Skip to content

01E-commerce · Specialty coffee

Ash & Orbit

Small-batch coffee sold with poster typography: roast filters, variant product pages and a slide-out cart.

Self-initiated demonstration (live, completed)

Role
Design and development: Syed Ahad Haider
Type
E-commerce · Specialty coffee

Stack

  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • GSAP
Visit live site
Ash & Orbit home page: the headline "Wake up outside the lines" beside three coffee bags on a stone shelf

About the project

An editorial storefront for an independent coffee roaster, built as a demonstration of a full shopping interface. The shop filters the range by roast, every product page has size and grind selectors with add-to-cart, and a slide-out cart holds the selection; an account area and a subscription section complete the journey as interface work.

The problem it solves

Holding one catalogue coherent across three surfaces without a backend: a roast filter, a product page where size and grind change the line item, and a cart that has to agree with both. Every price and option resolves on the client from a single local catalogue, while GSAP-driven motion runs over the top without interfering with App Router navigation.

Scope and limits

  • Deployed as a demonstration: the roasts, prices and journal entries are self-created content, not a real inventory.
  • The account area and the subscription cadences are interface work — there is no sign-in, billing or recurring order behind them.
  • Nothing is charged and no order leaves the browser.

What it does

  • Shop with roast filters — all, light, medium, dark, decaf
  • Product pages with size (250 g / 500 g / 1 kg) and grind selectors, quantity and add to cart
  • Slide-out cart and an account area
  • Subscription section with weekly, bi-weekly and monthly cadences
  • Best-sellers, sourcing, roasting and freshness sections
  • Brand timeline and a field-notes journal

Worth noticing

  1. 01Poster-scale Anton headlines over DM Sans body copy — the brand voice lives in the type
  2. 02Every roast is a real product page with variants, not a static card
  3. 03Built on the Next.js App Router with GSAP-driven motion
Ash & Orbit product page for Red Giant with size and grind selectors
Ash & Orbit home page on a phone

Want something like this?

Open the live site, poke at it, then tell me what you have in mind. A two-line brief is enough to start.

This is react & next.js storefronts and full-stack systems work — what it covers, what it does not, and how it is quoted.

Open Ash & OrbitHire me

Related work