A legacy build was throttling every frontend team.
Mindtickle's frontend isn't one app — it's 150+ micro-frontends across ~50 repos. They all sat on an aging foundation, and it showed everywhere at once:
Slow CI/CD — 12–35 minutes to build and deploy per environment. Legacy & insecure — Node 12 (end-of-life) with high-vulnerability dependencies. Fragmented tooling — a mix of npm and Yarn 1.22. And bloated artifacts — Docker images of 1.5–2.5 GB per app. Every team paid this tax on every deploy.
Modernize the toolchain — once, for everyone.
Rather than let 150 repos drift on their own, I designed one modern foundation and unified it behind a central config package every repo extends.
Yarn 4 (Berry) + Plug'n'Play
No node_modules, ~4× faster installs than Yarn 3.6, less disk, faster startup, and Hardened Mode for lockfile / metadata integrity — plus cross-team dependency sharing through PnP.
Module Federation v1 → v2, and faster CI
Dynamic remoteEntry resolution with standardized Dockerfile + naming → "build once, deploy anywhere." Paired with parallel Webpack builds and component-driven CI that rebuilds only what changed.
One central config — @mindtickle/frontend-configs
A single extendable source for webpack / babel / TS / eslint / prettier / relay / docker / semantic-release, consumed by every repo (extends @mindtickle/frontend-configs). Itself on Yarn 4 PnP. This is the foundation the one-click dev setup later automated onboarding onto.
Measured, not guessed.
Build times tracked in Grafana, page-load in Datadog RUM, and DORA metrics across the board. The headline: build artifacts ~91% smaller and CI 2–3× faster. On payload, most pages got dramatically lighter — and I'll show the ones that didn't, too.
Artifact and payload figures measured staging → ux-refresh-perf across ~28 apps. A couple of remotes (ui-shell, ui-auth) grew while mid-migration — shown here rather than hidden.