Elevated — a grinder you can scroll apart.
A bespoke storefront for a precision grinder, built from scratch in React and Go. The headline feature is a scroll-driven 3D product page that telescopes the four parts apart as the user scrolls, focusing on the interesting face of each part — top cap teeth, chamber blades, kief screen, base. Underneath it sits a full B2B wholesale backend: invitation, tax-ID capture, approval workflow, and tier pricing.
The brief
Off-the-shelf e-commerce — Shopify, Woo — couldn’t render the grinder the way the brand needed it shown. The product is a tactile, machined object; the page should feel like inspecting it in your hand. And the brand sells two ways: direct-to-consumer at retail, and B2B to dispensaries and headshops at wholesale. Bolting together a 3D viewer plug-in and a wholesale plug-in gets you something that works for neither audience. So we built both halves from the floor up.
The approach
- Bespoke 3D product page in react-three/fiber: four STL parts loaded individually, normalized to a target assembly height, then animated apart on scroll. An IntersectionObserver fires each stage as the user crosses the middle 30% of the viewport, and the scene damps the parts toward their telescope-expanded positions while rotating each focused part to show its interesting face head-on.
- End-to-end typed RPC layer — Buf-managed protobuf in `proto/`, with Go service stubs and TypeScript Connect-Query hooks generated from one source of truth. Same message types on both sides, no hand-rolled fetch.
- Full B2B wholesale subsystem — admin invites a wholesaler with email, company name, tax ID, and approval status; tier pricing flows through `usePricingContext` so the same product page shows retail prices to retail and wholesale prices to authenticated wholesalers, no duplicate pages.
- Stripe checkout, order history (lookup by email or login), and an admin order dashboard with line-item drill-down. Print-on-demand fulfillment hooks (Prodigi-style) ready for the next product.
- Multi-tenant platform — same codebase serves multiple storefronts, resolved by domain via a `GetSiteByDomain` RPC. Per-site seed directories with content blocks, designs, and domain mappings.
- Go 1.24 + Connect RPC + GORM + SQLite on the backend; React 18 + TypeScript + Tailwind + TanStack Query + Zustand on the frontend; Webpack bundler; Doppler for secrets; Docker for everything.
“Off-the-shelf e-commerce can sell a grinder. It can’t show the grinder. We built the storefront and the part viewer ourselves so the page feels like the product.”
— Andy, Founder of Elevated
The outcome
A storefront that feels like the object it sells. Scroll into the narrative section and the grinder telescopes apart, one part at a time, with the right face oriented to the camera. Open the wholesale portal and the same product surfaces tiered prices, tax-exempt checkout, and an order history scoped to the company. Same codebase, two audiences, one source of truth from protobuf to pixel.