LiveArchitecture

Micro-Frontend Platform

Led the migration from a 400k LOC Vue 2 monolith to a Module Federation-based micro-frontend architecture, enabling 8 teams to deploy independently with zero downtime.

CompanySwiggy

RoleSenior Frontend Engineer

Year2023

Tech Stack

Vue 3Webpack 5Module FederationDockerJenkinsNginx

Impact

teams8 teams

deploymentsZero downtime

speed60% faster CI

The Problem

A 400,000-line Vue 2 monolith was causing 45-minute build times, deployment conflicts between teams, and making it impossible to independently scale different parts of the application.

The Solution

Implemented Webpack 5 Module Federation to split the application into 12 micro-frontends, with shared state via a custom event bus and a shell application orchestrating the routing.

Architecture

Shell app + 12 micro-frontend modules with shared authentication, analytics, and UI library via Module Federation remotes.

Key Challenges

Sharing state between independently deployed apps
Handling routing across module boundaries
Managing shared dependencies without version conflicts

Results & Impact

8 teams can deploy independently

45-minute build reduced to 8 minutes per module

Zero-downtime deployments achieved

60% reduction in CI pipeline time