Design a Micro-Frontend Architecture

The Prompt

Your company's frontend monolith has grown to 500K+ lines of code maintained by 8 teams. Deployments take 45 minutes and break frequently. Design a micro-frontend architecture to enable independent team deployments.

When Micro-Frontends Make Sense

Good fit:

Multiple teams owning distinct product areas
Independent deployment cadence needed
Teams want technology autonomy

Bad fit:

Small team (< 3 frontend devs)
Tightly coupled features
Performance-critical application

Integration Approaches

Build-Time Integration

{
  "dependencies": {
    "@company/header": "^2.0",
    "@company/checkout": "^1.5"
  }
}

Simple, type-safe
No runtime overhead
But: deployment coupling (must rebuild host to update)

Runtime Integration (Module Federation)

// webpack.config.js — remote
new ModuleFederationPlugin({
  name: 'checkout',
  filename: 'remoteEntry.js',
  exposes: {
    './CheckoutFlow': './src/CheckoutFlow'
  },
  shared: ['react', 'react-dom']
})

// webpack.config.js — host
new ModuleFederationPlugin({
  remotes: {
    checkout: 'checkout@https://checkout.cdn.company.com/remoteEntry.js'
  }
})

Independent deployment
Runtime overhead (script loading, version negotiation)
Shared dependencies reduce duplication

Route-Based Composition

/            → Shell app (header, navigation)
/products/*  → Team A's app
/checkout/*  → Team B's app
/account/*   → Team C's app

Each route loads a separate SPA. Simplest approach but least integrated.

Shared Concerns

Concern	Approach
Design system	Shared npm package, versioned independently
Authentication	Shell app owns auth, passes token via context
Routing	Shell owns top-level routes, teams own sub-routes
State sharing	Event bus or URL state, NOT shared stores
Error boundaries	Each micro-frontend wrapped in error boundary

Performance Strategy

Shared vendor bundle (React, core libs)
Lazy-load micro-frontends on route entry
Service worker for asset caching
Avoid duplicate CSS frameworks

Micro-frontends solve an organizational problem, not a technical one. If you don't have team scaling issues, you don't need them.