01
Home
Hero with layered coffee imagery, GSAP entrance choreography, flavour discovery rail, current lots, origin/sourcing story, seasonal feature, brew ritual, pinned roast-ledger sequence, subscription pitch, journal teaser.
Food & Hospitality
Fieldnote Coffee Roasters — Origin Ledger
Fieldnote Coffee Roasters is a premium, frontend-only specialty-coffee storefront concept for an imagined Los Angeles roastery.
Food and hospitality websitecoffee
Visit live website ↗fd-l09-coffee-roaster.vercel.app
Project type
Food and hospitality website
Industry
Food & Hospitality
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the Fieldnote Coffee Roasters — Origin Ledger experience
Fieldnote Coffee Roasters is a premium, frontend-only specialty-coffee storefront concept for an imagined Los Angeles roastery. It translates provenance into a practical buying experience: visitors can browse a current shelf, filter and search lots, open a complete coffee record, add items to a field bag, and move through a demonstrative checkout flow.
The site is designed to make specialty coffee feel legible rather than precious. Its visual system, named Origin Ledger, carries a single lot from crop to roast to brew through editorial typography, specimen-pack layouts, a pinned roast narrative, and small record annotations throughout the commercial journey.
The application is intentionally a static experience. It demonstrates catalogue discovery and client-side cart behavior without a live inventory system, payment processor, order backend, customer account, or form-delivery service.
Experience details
Key features and interaction highlights
02
Shop
Local flavour-category filter, text search, result count, empty state, specimen-pack product cards, and add-to-bag actions.
03
Product record
Route-driven coffee detail pages with source/process context, roast curve, bag-size selection, accordions, recipe guidance, related lots, and record labels.
04
Cart and drawer
Shared in-memory cart context, duplicate quantity aggregation, remove actions, order totals, an add-on recommendation, global cart badge, and a cart drawer.
05
Checkout
Client-side contact, delivery, and payment form controls; dispatch-record detail; order summary; and a local confirmation state after submit.
06
Supporting pages
Subscriptions, origins, brew guides, cafés, story, journal list, journal article, contact, search, policies, and shipping/returns alias.
Visual gallery
Desktop details and mobile experience
Three genuine captures from the live deployment show the opening view, an interior content section, and the responsive mobile composition.
Build characteristics
Technology and delivery signals
Labels come from project documentation where available; conservative delivery characteristics are used when a repository does not specify its stack.
ReactTypeScriptViteTailwind CSSGSAPWoutershadcn/uiRadix UI
Project FAQ
Questions about Fieldnote Coffee Roasters — Origin Ledger
What is Fieldnote Coffee Roasters — Origin Ledger?
Fieldnote Coffee Roasters is a premium, frontend-only specialty-coffee storefront concept for an imagined Los Angeles roastery.
Who is the Fieldnote Coffee Roasters — Origin Ledger website designed for?
Run pnpm build before publishing. The output is written to dist/, where dist/public contains the static client bundle and dist/index.js is the production-serving entry point.
What does the Fieldnote Coffee Roasters — Origin Ledger experience include?
The documented experience includes home, shop, product record, cart and drawer. The live website shows the complete interface and interaction flow.
Can I view Fieldnote Coffee Roasters — Origin Ledger online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
