E-commerce · Storefront
A production-shaped coffee storefront with a real Stripe checkout — where the amount charged is computed on the server and orders are confirmed by a signature-verified webhook, never the browser.
Emberhaus is a storefront for a small-batch coffee roaster — browse products, fill a cart, and check out with Stripe in test mode. On the surface it's a clean, fast shop.
The real point of the project is the part a shopper never sees: doing the money correctly. Plenty of demo stores trust the browser for prices and call a redirect a sale. This one deliberately doesn't.
The single most common e-commerce vulnerability is trusting client-supplied prices or treating the post-checkout redirect as proof of payment. Both are exploitable, and both are tempting because they're easier.
The challenge was to build the storefront so that the secure path is the only path — the server is the sole authority on what something costs and whether it was actually paid for.
Every amount is recomputed on the server from the database at checkout time; the cart in the browser is a convenience, never a source of truth. Payment runs through the Stripe Payment Element in test mode.
Order fulfillment is driven entirely by a signature-verified Stripe webhook against the raw request body — the browser redirect just says 'thanks', while the webhook is what actually marks an order paid. Auth.js handles credentials, JWT sessions, and roles.
Emberhaus is a complete, end-to-end commerce flow — catalog, cart, checkout, order confirmation, and an account view — that's honest about where trust lives. No real money moves, but the architecture is the one you'd ship if it did.
A visual pass grew it into a full roaster's site: a single-origin lineup spanning a dozen origins, each bag carrying roast level, tasting notes, process, and a flavor profile, with About, brewing-guide, and FAQ pages around the shop itself.
Even the product imagery is self-generated SVG and every brand name invented, so the whole thing runs cleanly with no licensing baggage.
Next.js 16 (App Router) + React 19 in TypeScript, Tailwind CSS v4, PostgreSQL via Prisma 6, and Auth.js (NextAuth v5) for credentials-based auth with roles. Cart state is held in Zustand.
Stripe runs in test mode behind the Payment Element, with the webhook verifying signatures against the raw body before it confirms anything — the load-bearing detail that makes the whole flow trustworthy.
// Gallery
// Next step
The next case study could be yours. Tell us what you're building and we'll tell you honestly how we'd ship it.