Problem
A global enterprise SaaS product had grown organically over 8 years into a tightly coupled monolith. Feature velocity had collapsed — a single change to the navigation required coordinated deploys across four teams. The CMS (Drupal) was coupled directly to the React frontend via brittle REST contracts, and the backend had no aggregation layer, forcing the UI to stitch together responses from six separate APIs on every page load.
Role
Principal Frontend Architect. I owned the frontend architecture decision end-to-end: tech selection, the BFF contract design, team enablement, and the phased migration roadmap. I embedded with the platform team for the first three months to establish the patterns before handing off.
Stack
- Build tooling: Vite (replacing Create React App) — 6× faster cold starts in CI
- Module federation: Micro-frontend shell with independently deployable feature verticals
- BFF: NestJS with GraphQL — single aggregation layer replacing six direct API calls per route
- CMS: Drupal as a headless content source via JSON:API, decoupled entirely from the frontend build
- Type safety: End-to-end TypeScript with generated GraphQL types (GraphQL Code Generator)
Outcome
- Feature team deployment independence achieved — teams ship on separate cadences with no cross-team coordination required
- First-load data requests reduced from 6 sequential calls to 1 BFF query, cutting median page TTI by ~40%
- Drupal editorial team can publish content without a frontend deploy
- ADR library established — 14 architecture decisions documented in the first quarter, accelerating onboarding for new engineers