← Back
Case StudyReact / GraphQL / Edge

From legacy to headless: 200x faster in production.

How I rebuilt an e-commerce platform as a headless React app with a GraphQL data layer and edge deployment, achieving 13ms TTFB with 16,400+ products.

13ms
Time to first byte
200x
Faster than legacy
16.4K
Products live
3
Production apps

The Challenge

Before: Legacy bottleneck

The legacy template system hit a wall with large catalogs. No component reuse, limited interactivity. Every page load was a full server round-trip — often 2-4 seconds TTFB.

After: React at the edge

React with edge deployment on Vercel. GraphQL data layer serves products, React renders at the edge. Result: 13ms TTFB, 120ms FCP. Instant — even with 16,400+ products.

What I Built

✓
Complete storefront — Product pages with image galleries, lightbox, size guides, sticky mobile CTA. Collection pages with filtering and sorting. Full cart and checkout flow.
✓
Predictive search — Real-time search across 16,400+ products via GraphQL. Results appear as-you-type with product images and prices.
✓
Wishlist & cart concierge — Persistent wishlist with localStorage. Cart concierge surfaces relevant upsells. Newsletter signup with email validation.
✓
SEO infrastructure — Product and Collection schema, dynamic OG images, XML sitemap, robots.txt, llms.txt for AI discoverability. 48 blog articles.
✓
Automated feeds — Automated product feed generation for Google Merchant Center, Google Ads campaign management, conversion tracking. All running autonomously.
✓
Monorepo architecture — Three apps sharing a component library. Unified design system, shared cart logic. Changes deploy to all apps simultaneously.

Tech Stack

React
UI framework
React Router 7
Routing
GraphQL
Data layer
TypeScript
Type safety
Tailwind CSS 4
Styling
Vercel Edge
Deployment

Results

13ms
TTFB

Down from 2-4 seconds with legacy. Consistent across production traffic.

120ms
First Contentful Paint

Full page render in under 200ms. Users see content before they finish clicking.

0
Console errors

Zero JS errors in production. Clean, strict TypeScript with no escape hatches.

Need a high-performance e-commerce platform?

I build headless platforms that load in milliseconds and scale to tens of thousands of products.

info@umbolement.com