Café de especialidade Demonstration project
Torra — specialty coffee roastery with a subscription builder
A craft-warm store for a Marvila roastery: kraft paper, espresso brown and copper foil, mono roast-tag labels and dashed packaging rules. Five coffees each ship with a real SVG roast curve, the cart drawer does honest EUR math, and a three-step subscription builder composes a live-priced label as you choose origin, grind and frequency.
feitura.pt/demo/torra — Live
A small-batch roastery in a Marvila warehouse roasts on Tuesdays and wants to sell like it roasts: transparently. The store has to carry five single-origin lots with tasting notes and the actual roast curve of each batch, a cart that respects the free-shipping threshold, and above all a subscription flow that feels like composing a roast tag — pick the origin, pick the grind, pick the cadence, watch the price recalculate. Plus the roastery's story and the brew recipes they cup with, ratios in mono.
What's inside
- Kraft, espresso and copper-foil design system in scoped CSS with dashed packaging rules — zero photography
- Three-step subscription builder on one panel: origin, grind and frequency with a live EUR price and frequency discounts
- Self-composing summary label that fills in like a roast tag as choices are made
- Shop grid of five coffees, each with a hand-plotted SVG roast curve — first crack and drop marked
- Working cart drawer with quantities, subtotal, free-shipping threshold and totals
- Technical SVG diagram of the 15 kg drum roaster with labelled probe, flame and cooling tray
- Roastery story with cherry-to-roast SVG stages and direct-trade stats
- Brew guide accordion — V60, French press and espresso with ratios and times in mono
- Scroll reveals via IntersectionObserver, fully collapsed under prefers-reduced-motion
- Fully bilingual PT/EN with a native toggle, AA contrast and 44 px touch targets
Build log
- Art direction and tokens — kraft/espresso/copper palette, Archivo + mono type pairing, dashed packaging rules, roast-tag component studies
- Hero with the drum-roaster technical SVG diagram, sticky nav, info strip and full PT-PT voice for the brand
- Shop grid — five lots with specs, tasting-note chips and plausible SVG roast curves with first crack and drop markers
- Cart drawer with quantity controls, EUR totals, free-shipping threshold and demo-sink checkout
- Subscription builder — three steps on one panel, live price with frequency discounts, self-composing summary label
- Roastery story with cherry-to-roast SVG stages and stats, brew guide accordion with mono ratios, contact section
- EN locale pass, scroll reveals with reduced-motion fallback, contrast and touch-target audit, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
90
Performance
96
Accessibility
100
Best practices
100
SEO