Problem
A major US sporting goods retailer was executing a full brand refresh and platform modernisation simultaneously. The existing eCommerce frontend was a jQuery-era monolith layered with React components bolted on top. The marketing team required AEM (Adobe Experience Manager) for editorial control; the product team required React for component reusability. Neither the old architecture nor a clean-sheet rebuild was viable given the go-live timeline.
Role
Lead Frontend Architect. I designed the integration architecture between AEM and the React micro-frontend layer, defined the module federation strategy, and owned the delivery plan for migrating the highest-traffic product pages first.
Stack
- Module federation: Webpack 5 Module Federation — React components published as remote modules consumed by AEM page templates
- CMS integration: AEM as the authoring surface; components rendered as micro-frontends embedded via JavaScript bootstrapping
- Commerce layer: Headless commerce API integration with client-side cart state managed via a shared remote module
- Build pipeline: Parallel build pipeline per micro-frontend with shared dependency management to avoid bundle duplication
- Analytics: Adobe Analytics + custom data layer event schema — all component interactions instrumented at the architecture level
Outcome
- Delivered on-schedule for the brand launch date — all priority page types migrated before go-live
- AEM editorial team can compose pages from React components without engineering involvement
- Bundle size reduced by 35% vs. the legacy approach (shared deps via module federation host)
- Rebrand launched across US and Canada simultaneously from a single codebase