Modernizing E-Commerce: A Headless Transformation for Marcone
At Smith Commerce, I joined the engineering team driving a headless commerce transformation for M. Supply—a major client with multiple product lines whose legacy monolithic platform was plagued by an outdated UI, poor user experience, zero accessibility compliance, and sluggish performance. The primary storefront we rebuilt was Marcone, one of their key customer-facing products.
Our mission was clear: decouple the frontend entirely, rebuild it from the ground up using modern tooling, and deliver a storefront that’s fast, accessible, and scalable—without waiting on backend readiness. The architecture was designed to scale across M. Supply’s portfolio of products.
🧩 The Approach
We adopted a frontend-first, headless architecture using Next.js 15 (App Router) and React 19, initially integrating with mocked OpenAPI contracts. This decoupled strategy enabled parallel development—the frontend team shipped production-ready UI while the backend team built the real services underneath.
The result? A seamless, high-fidelity storefront delivered on time, with zero blocked sprints.
🚀 My Key Contributions
- 🔧 Drove the full frontend lifecycle from the foundational Turborepo monorepo setup to final backend integration and production launch.
- ⚙️ Championed Developer Experience (DX) by implementing robust automation: configured Husky, lint-staged, and modern ESLint (Flat Config) & Prettier standards to guarantee code quality and team velocity.
- 🧱 Built a highly performant, scalable UI leveraging Radix UI (shadcn) and React Hook Form with Zod validation for type-safe, accessible form handling.
- 🔥 Demonstrated extreme ownership by pushing through blockers with extra effort and hours, ensuring the product hit its critical launch deadlines.
📈 Key Results & Metrics
- ⚡ Lighthouse performance: 35 → 98 — Boosted the overall score from sluggish to near-perfect.
- 🏎️ 75% reduction in Time to Interactive (TTI) and 60% faster First Contentful Paint (FCP), achieved by migrating to Next.js 15 App Router with optimized rendering strategies.
- ♿ 100% Accessibility (a11y) score — Ensured strict WCAG compliance across the entire new platform.
🖼️ Before & After
The transformation speaks for itself. Here’s a side-by-side look at the legacy platform versus the new headless storefront:
🛠️ Tech Stack
Core
Next.js 15 (App Router) · React 19 · TypeScript · Turborepo
UI & Styling
Tailwind CSS 4 · Radix UI (shadcn) · Lucide React · Storybook · tailwindcss-animate
State & Data
TanStack Query · Zustand · Apollo Client · OpenAPI · React Hook Form · Zod
DX & Infrastructure
ESLint (Flat Config) · Prettier · Husky · Auth0 · i18next · Docker · AWS CodeArtifact
Other
Builder.io · Jest · Playwright
This project was a testament to what a focused, high-velocity team can achieve. We took Marcone’s sluggish legacy platform and transformed it into a modern, blazing-fast storefront—all while maintaining parallel development streams and hitting aggressive launch deadlines.
Curious about headless commerce architectures or modern frontend DX? Feel free to connect with me on LinkedIn.