Ecommerce · React
Coffee roaster shop
Dark storefront for a specialty roaster with single origins, a subscription, brew gear and shipping info.
What you get
An online shop for a small-batch coffee roaster: an editorial hero, filter and espresso coffees with tasting notes, brewing gear, a flexible subscription, the roasting process, shipping details and a roast-calendar newsletter. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Halde Coffee", "nav": [ { "label": "Coffee", "href": "#coffee" }, { "label": "Subscription", "href": "#subscription" }, { "label": "Roasting", "href": "#roasting" }, { "label": "Shipping", "href": "#shipping" } ], "navCta": { "label": "Start a subscription", "href": "#subscription" }, "sections": [ { "kind": "hero", "variant": "editorial", "eyebrow": "Roasted on Tuesdays and Fridays in Leipzig", "title": "Coffee roasted to taste like where it grew.", "text": "Eight coffees from farms we buy from year after year, roasted in small batches and shipped within 48 hours of leaving the drum.", "primary": { "label": "Shop coffee", "href": "#coffee" }, "secondary": { "label": "How we roast", "href": "#roasting" }, "visual": { "type": "tiles", "tones": [ "#78350f", "#a16207", "#3f2a1d", "#1f1610" ], "caption": "Friday roast · 14 batches" } }, { "kind": "products", "id": "coffee", "eyebrow": "Shop", "title": "This season's coffees", "text": "All coffees are 250 g, whole bean unless you ask us to grind them.", "currency": "€", "items": [ { "name": "Huila, Colombia", "price": 16.5, "category": "Filter", "tone": "#7c2d12", "text": "Red grapefruit, cane sugar, black tea.", "badge": "New" }, { "name": "Kochere, Ethiopia", "price": 15, "category": "Filter", "tone": "#92400e", "text": "Bergamot, peach and jasmine. Washed.", "badge": "Bestseller" }, { "name": "Nyeri AA, Kenya", "price": 17, "category": "Filter", "tone": "#5c2b16", "text": "Blackcurrant, tomato, demerara.", "badge": "Low stock" }, { "name": "Halde House Espresso", "price": 13.5, "category": "Espresso", "tone": "#3f2a1d", "text": "Brazil and Guatemala. Milk chocolate, hazelnut.", "badge": "Bestseller" }, { "name": "Cerrado Natural, Brazil", "price": 12, "category": "Espresso", "tone": "#57442f", "text": "Cocoa, roasted almond, low acidity." }, { "name": "La Soledad, Guatemala", "price": 14.5, "category": "Espresso", "tone": "#6b3a1e", "text": "Brown sugar, red apple, cocoa nib." }, { "name": "Sugarcane Decaf, Colombia", "price": 13, "category": "Decaf", "tone": "#4a3f35", "text": "Toffee and orange. Naturally decaffeinated." }, { "name": "Swiss Water Decaf, Peru", "price": 13.5, "category": "Decaf", "tone": "#44403c", "text": "Milk chocolate and walnut. Chemical-free process." }, { "name": "Ceramic dripper", "price": 28, "category": "Brewing", "tone": "#78716c", "text": "Single-cup cone, fits size 02 papers." }, { "name": "Hand grinder", "price": 89, "category": "Brewing", "tone": "#292524", "text": "Steel conical burrs, 40 g capacity." }, { "name": "Filter papers, 100", "price": 6, "category": "Brewing", "tone": "#a8a29e", "text": "Unbleached, size 02." } ] }, { "kind": "split", "id": "subscription", "eyebrow": "Subscription", "title": "Fresh coffee on your schedule", "text": "Pick filter, espresso or roaster's choice, then choose how often. Skip, pause or swap coffees from your account at any time before the roast day.", "bullets": [ "Every 1, 2 or 4 weeks", "10% off every bag, free shipping in Germany", "No minimum term, cancel online" ], "visual": { "type": "card", "tone": "#78350f", "title": "Roaster's choice", "lines": [ "Two 250 g bags per delivery", "From €26 per delivery", "Tasting notes card in every box" ] } }, { "kind": "steps", "id": "roasting", "eyebrow": "How we roast", "title": "From green bean to your door in four days", "items": [ { "title": "Sample roast", "text": "Every new lot is sample-roasted and cupped three times before we commit to buying it." }, { "title": "Roast in small batches", "text": "12 kg batches on our 15 kg drum roaster, logged so every batch tastes like the last." }, { "title": "Rest and cup", "text": "We taste each roast the next morning. Anything off profile is sold as a discounted blend." }, { "title": "Pack and ship", "text": "Valve bags, packed by hand and posted within 48 hours of roasting." } ] }, { "kind": "features", "id": "shipping", "eyebrow": "Shipping & returns", "title": "Shipping, simply", "columns": 4, "items": [ { "title": "Germany", "text": "€4.50 with DHL, free over €40. Usually 1 to 2 working days.", "icon": "truck" }, { "title": "EU", "text": "€9.90, free over €70. Usually 3 to 5 working days.", "icon": "globe" }, { "title": "Not for you?", "text": "If a coffee doesn't suit you, tell us within 14 days and we'll swap it once.", "icon": "cup" }, { "title": "Roast dates", "text": "Every bag shows its roast date. Best between 7 and 40 days after roasting.", "icon": "calendar" } ] }, { "kind": "quotes", "eyebrow": "Customers", "title": "Notes from the subscriber list", "items": [ { "quote": "The Kochere tasted so much like peach tea that I made my partner try it blind.", "name": "Jonas B.", "role": "Filter subscriber since 2024" }, { "quote": "House Espresso is forgiving enough for my old machine and still tastes like chocolate in milk.", "name": "Sophie L.", "role": "Espresso at home" }, { "quote": "I pause my subscription every summer holiday. It takes ten seconds.", "name": "Mateo G.", "role": "Roaster's choice, every 2 weeks" } ] }, { "kind": "cta", "title": "Get the roast calendar", "text": "A short email when new coffees land, with the farm's story and our brew recipe. About twice a month.", "primary": { "label": "Sign up", "href": "#contact" }, "secondary": { "label": "Browse coffee", "href": "#coffee" } }, { "kind": "contact", "eyebrow": "Roast calendar", "title": "New coffees, first", "text": "Add your email and we'll tell you when a new lot is on the roaster. Unsubscribe any time.", "fields": [ "name", "email" ], "button": "Send me the calendar" } ], "footer": { "text": "Small-batch specialty coffee roasted in Leipzig.", "columns": [ { "title": "Shop", "links": [ "Filter", "Espresso", "Decaf", "Brewing gear" ] }, { "title": "Help", "links": [ "Shipping", "Subscriptions", "Grind guide" ] }, { "title": "Visit", "links": [ "Roastery open Saturdays 10–14", "Karl-Heine-Straße 82" ] } ], "legal": "© Halde Coffee. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Coffee roaster shop's files. The box is already started for you: finish “Start from Coffee roaster shop and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates- Featured
Ecommerce storefront
A product catalog with category filters and search, product detail view, and a cart kept in local state.
Sneaker store
Dark sneaker storefront with a filterable catalog, a resole service, drop sign-ups and a working cart.
Bicycle shop
Bike shop storefront with gravel and city bikes, parts, service plans, workshop hours and group rides.
Build on Coffee roaster shop
Create a free account, start from this template, and ask the AI agent to turn it into your app.