Problem
A global enterprise SaaS product had grown organically into a tightly coupled monolith. Feature velocity had collapsed — a single change required coordinated deploys across multiple teams. The CMS (Drupal) was coupled directly to the React frontend via brittle contracts, and the backend had no aggregation layer, forcing the UI to stitch together responses from multiple APIs on every page load.
Role
Principal Frontend Architect. Current engagement. I own the frontend architecture end-to-end — tech selection, BFF contract design, Keycloak and Drupal integration, CI pipeline setup, and team enablement. Leading a 6-member FE team within a 10+ cross-functional squad.
Stack
- Build tooling: Vite — replacing legacy tooling; faster builds and better DX for the team
- Micro-frontends: Module Federation — independently deployable feature verticals with a shared shell
- BFF: NestJS — single aggregation layer between frontend and backend services
- CMS: Drupal as headless content source via JSON:API, fully decoupled from the frontend build
- Identity: Keycloak integration
- Cloud: GCP for cloud builds and infrastructure
- Testing: Jest for unit tests, Playwright for E2E
- Quality: Sonar quality gates integrated into CI pipeline from day one
- Language: TypeScript throughout
- AI-assisted engineering: Claude Code and an in-house AI coding assistant (VS Code extension) used for accelerating development workflows
Outcome
- Architecture, BFF layer, and CI pipeline established from project foundation — team had a solid base before squad scaling
- Drupal editorial team able to publish independently from frontend deploy cycles
- Keycloak identity and Drupal CMS delivered as fully decoupled architecture layers
- Sonar and Playwright integrated into CI from project start — quality gates enforced before any feature work shipped