128Design a micro-frontend shell with independent deployment and shared dependency versioning
hardAbout 60 minutesSystem designmicro-frontendsarchitecturemodule-federationdeployment
Problem
A retail company has five teams (Search, Product, Cart, Checkout, Account) working on one web app. Every release needs all five to coordinate, and one team's bug blocks everyone's deploy.
Design a micro-frontend shell: a host application that composes independently built and deployed frontends into one seamless product.
Cover:
- how each team builds, versions and deploys its part without redeploying the others;
- how the shell discovers and loads them at runtime, and what happens when one fails;
- sharing React and the design system without shipping five copies, and handling version mismatches;
- routing, shared state (the signed-in user, the cart count), and communication between parts;
- performance, security and the developer experience.
Step-by-step
Ask what problem they solve here: deploy independence and team autonomy. Name the costs up front (duplicate dependencies, integration complexity, consistency), so the design aims at the minimum split that gives independence, not maximum fragmentation.
Unlock the full solution
What's inside
- Step-by-step
- Requirements
- Architecture
- Data model and state
- Key flows and trade-offs
- Performance and reliability
- Follow-up questions
Includes 1 code listing, 5 follow-up questions.
One-time payment by UPI, card or net banking. Launch price.