Case study
HIMBA Coffee
Next.js storefront with a real-time color configurator for travel tumblers and specialty coffee.
Client / context
HIMBA Coffee brand (public Pages demo).
Problem
The product is customizable; a static catalog could not show colorways live.
Solution
Next.js + Tailwind on Cloudflare, with a client-side configurator that updates tumbler colors in real time.
My role
Built end to end using AI-assisted development, including the storefront, tumbler configurator, and Cloudflare deployment.
Four finishes, one consistent shop
The challenge
The gallery and catalog used different names for the same finishes. Repeated product descriptions made the range harder to distinguish, while small product images and misplaced hotspots weakened the gallery. The translucent navigation also lost contrast on the light store page.
My decisions
- 01
Use one name per finish
I standardized Snow White, Matte Black, Lavender Botanical, and Himalayan Pink across the catalog, gallery, and story. Consistent naming helps visitors recognize the same product as they move through the shop.
- 02
Make the product easier to inspect
I enlarged the product presentation, placed hotspots on the relevant parts, and gave each finish its own copy. A light stage keeps the Matte Black tumbler visible.
- 03
Give the store a clear browsing sequence
I organized the store around a hero, promotions, product tabs, and a bundle section. The countdown initializes after mounting to avoid a mismatch between the static page and the browser.
- 04
Keep navigation readable across pages
I used a solid black navigation bar with light links, a contrasting active state, and a visible focus ring. I also aligned the tab icon with the mountain branding.
What shipped
The completed pass brought Story, Gallery, Store, and Customize into a consistent visual system. Product names carry across the browsing journey, and the configurator prepares a WhatsApp order with the selected variant. On mobile, the product appears before the configuration options. These are implementation outcomes described in my project notes, not measured sales or conversion gains.
Inside the project
01
Explore the storefront
The project combines specialty coffee branding with a customizable travel-tumbler experience.
02
Preview a colorway
Choose a design category and tumbler variant, then enter an optional engraving. The live configurator exposes the selected variant and a 16-character engraving limit.
03
Discuss the implementation
The WhatsApp order link includes the chosen variant, engraving, and displayed price. On 16 October 2026, selecting Ocean Blue Leopard and entering Demo correctly updated the draft. No order was sent.
Architecture
Configurator state in the browser.
Project evidence
Live configurator reviewed on 16 October 2026: variant selection and engraving propagated to the WhatsApp draft. Payment, fulfilment, sales, and conversion results were not tested. The timing check below is historical.
Live TTFB · 21 Sep 2026
0.60 s
curl -w time_starttransfer against https://himba-coffee-live.pages.dev/
Website screenshots
