Buzzed Honey
Custom-coded honey storefront with a real cart and checkout
Overview
Buzzed Honey is a portfolio storefront that shows what a custom-coded e-commerce site looks like next to a templated one. The whole thing is a Vite SPA with TanStack Router and TanStack Query. Cart state lives in a single context with localStorage persistence, the cart drawer slides over the page, and checkout is a four-step flow inside the same drawer so nothing reloads. Shopify, Stripe, Klaviyo, and ShipStation are all wired but env-gated, so the demo runs on a mock product catalog by default and only hits live integrations when keys are present.
Built With
Architecture
Key Highlights
Slide-out cart drawer
Cart lives in a single drawer that slides over the page. Add-to-cart from a PLP card or PDP opens it without a route change. Backdrop dims the rest of the app, Escape closes it, body scroll locks while open.
In-page SPA checkout
Four-step flow (contact, shipping, payment, review) inside the same drawer. No page navigation between steps, no reloads, back button walks you backwards through the steps and lands on the cart view.
Categorized PLP with filter tabs
14 SKUs across Performance, Calm + Focus, Pure Honey, and Bundles. Each tab shows a live count of products it covers and the grid fades on switch. Mobile tab row scrolls horizontally instead of wrapping.
Reviews + star ratings on every product
Each SKU ships with placeholder reviews, an aggregate average, and a star bar that uses a single CSS-clip-width trick instead of an SVG round-trip per star. Fast in product grids.
Env-gated integrations
Shopify Storefront, Stripe, Klaviyo, ShipStation, and Resend are all wired through Zod-validated env. Each integration falls back to mock data when keys are absent so the same build runs as a portfolio demo or a real store with one env file swap.
Next Project
Nolly→
Knowledge capture and transfer for teams