smallbatchbrine.vercel.app
ConceptE-Commerce
7 daysSmall Batch Brine
A craft food storefront where every order lands in the owner's WhatsApp.
WhatsApp OrderingMobile Optimized
Case study & metrics
All work
E-CommerceConcept build
Through Tenon
Furniture shopping that stays out of its own way: browse, configure, check out.
↳ Instant Variants · Demo Checkout
- Next.js
- Tailwind CSS
- Razorpay
- Zustand
- Shipped
- 12 days · E-Commerce
- Stack
- Next.js · Tailwind CSS · Razorpay
- Outcome (lab)
- Instant Variants · Demo Checkout
throughtenon.vercel.app
throughtenon.vercel.app
01
The challenge
Concept brief: a furniture storefront where switching variants and checking out feels instant on mobile.
02
The solution
Next.js storefront with instant variant switching, a persisted cart, and Razorpay checkout that falls back to a demo flow when no key is set. The hero only painted after client-side hydration and preloaded a 1.78 MB image the page never used; server-rendering it took mobile LCP from 5.9s to 3.8s (median of 3 runs).
03
Key outcomes (lab)
- Instant variant switching
- Complex variant management system
- Checkout that works with or without keys
Engineering outcomes (lab)
Measured on the concept build.
Cart Persistence
Lost on refresh
Before
Survives refresh
After
Checkout
Payment key required
Before
Demo fallback built in
After
Variant Switch
Page reload
Before
Instant
After
Lighthouse mobile · optimization (2026-10-15)
75 · LCP 5.9s
Before
88 · LCP 3.8s
After
Lighthouse mobile · connection range (2026-10-15)
150ms RTT: 95 · LCP 3.0s
Lighthouse preset
measured 16ms: 100 · LCP 1.0s
Measured line: the same build, not an improvement
Measured with Lighthouse 13 on mobile emulation, simulate throttling, median of 3 runs, against the live site on 2026-10-15. Published under two named profiles: Lighthouse’s mobile preset (150 ms RTT / 1.6 Mbps / 4× CPU), which anyone can reproduce, and this machine’s actual connection (16 ms / 4 Mbps / 4×), characterised by ping and a timed download rather than assumed. Connection assumption alone moves LCP by up to 3× on identical bytes, so neither figure is the whole truth alone. Lab numbers on a throttled connection, not client analytics or revenue data. No client affiliation implied.
Next build
Agency Portfolio