Skip to main content

— Selected work

Headless commerce at scale

Four storefronts, one Magento 2 backend, zero shared downtime. Built the headless architecture and React PWA layer that unified a fragmented multi-brand e-commerce operation.

Industry
B2C E-commerce
Region
South Africa
Year
2024
Role
Lead architect and implementation
Magento 2 React GraphQL Node.js AWS Redis Cloudflare

The client operated four distinct retail brands, each running on separate Magento instances with separate teams maintaining separate codebases. Every promotion, every platform upgrade, every security patch had to be applied four times. Operational cost was growing faster than revenue.

The problem

The underlying challenge wasn’t technical — it was organisational. Four brands meant four teams with four different ideas about how the platform should work. Any consolidation had to maintain brand independence at the storefront level while sharing the operational complexity underneath.

The requirement: one backend, four independent storefronts, with each brand able to deploy independently without affecting the others.

What we built

A single Magento 2 instance configured for multi-store operation became the source of truth for product catalogue, inventory, pricing, and order management. Each storefront got its own scope with isolated configurations, customer bases, and checkout flows.

The storefront layer was rebuilt as a headless React PWA, consuming Magento’s GraphQL API. Each brand got its own frontend deployment, but the underlying component library was shared — brand-specific themes handled the visual differentiation. A Cloudflare edge layer handled routing, caching, and brand resolution from the same origin.

The critical architectural decision was making the frontend deployments truly independent: different CI/CD pipelines, different Cloudflare Workers routes, different cache namespaces. One brand pushing a broken deploy could not affect the others.

Outcomes

Deployment frequency went from monthly (co-ordinated across all brands) to daily per-brand. Platform upgrade costs dropped by roughly 70% since backend changes only needed to be applied once. The shared component library meant new storefront features could be rolled out across all brands in a single PR rather than four separate implementations.

The architecture has since been extended to a fifth brand without requiring any changes to the backend or the shared frontend infrastructure.

← All work