One Storefront, Two Buying Models
The Challenge
A distributor sold to trade accounts and retail customers and needed both served from a single storefront. Negotiated wholesale pricing had to stay invisible to the public - but the usual approach hides prices behind a conditional in the UI, which means those rates still arrive in every browser that asks for a page. Commercially sensitive data protected by a CSS class is not protected.
The Solution
I built the whole system solo in 20 days: customer storefront, operator backoffice, shared domain layer, serverless backend. One catalog, one cart, one checkout, with the confidentiality boundary enforced by 261 lines of database security rules instead of the interface - an anonymous visitor performs zero pricing reads rather than fetching wholesale rates and hiding them. Both apps compile to static bundles on the CDN edge and subscribe straight to the database, so nothing renders on a server in the request path. Pricing resolves through one shared function imported by both the browser and the backend, so the price shown and the price charged cannot drift apart.
The Result
Operators change prices, content, and configuration and see it live on the storefront immediately - no rebuild, no redeploy, no cache to invalidate, across 52 real-time subscriptions and zero polling. Checkout commits stock and order in a single transaction, and an order only becomes paid on a signature-verified gateway webhook, never on the client's word. Types are shared end to end, so a change to the domain model breaks storefront, backoffice, and backend at compile time rather than in production.
Stack
TypeScript · Next.js · React · Firestore · Cloud Functions · Cloudflare Pages, Workers & R2 · Stripe · Turborepo
