Case study
VANTA STUDIO
Modern e-commerce for a fictional Brazilian fashion label
Full cart-to-checkout flow with SSR, type-safe catalog, and mobile-first UI.
- Next.js
- TypeScript
- Tailwind CSS
- Stripe
Problem & context
Fashion shoppers on mobile abandon carts when pages feel slow. The brief: build a storefront that loads fast on 3G, feels premium, and keeps the cart state intact across navigation.
Constraints & tradeoffs
- Fictional brand — no real backend, so the app had to be fully static / SSG.
- Cart had to survive page refreshes without an account.
- Product data had to be type-safe end-to-end to avoid runtime typos.
Solution
Next.js App Router with typed product data loaded at build time, next/image for optimized product photography, and a localStorage-backed cart hydrated on the client. Checkout is wired to Stripe in test mode with server actions.
Architecture
- 01Typed product data → SSG catalog pages
- 02Client cart (localStorage) → cart context
- 03Stripe test-mode checkout (server action)
- 04Vercel edge cache for catalog pages
Results
- Lighthouse (mobile)
- 98
- Accessibility
- 100
- TTI (3G)
- ~400ms
- Type safety
- DB → UI
Lessons learned
- Shipping the catalog first — before the cart — kept the design honest.
- next/image alone buys you half your performance budget.
- Typed product data eliminates a whole class of runtime bugs.