Design a micro-frontend architecture
PremiumFrontend systemHard
- Micro frontends
- Module federation
- Shell application
Quick answer
This frontend system interview question asks you to design a micro-frontend architecture. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design a micro-frontend architecture for a large web app, such as an online banking portal, where 8 teams own areas like Accounts, Payments and Cards. The hard part is letting each team deploy independently several times a day while users see one fast, consistent app with no duplicated framework code.
The teams own areas like Accounts, Payments, Cards, Loans, Support and Profile. Today it is one monolithic frontend with a 40-minute build and weekly releases blocked by whichever team is late. Each team wants to deploy its area independently several times a day, while the user sees one consistent app with one login, one navigation bar and fast page transitions.
What must a micro-frontend architecture do?
- Shell: Owns login, the top navigation, global error handling and the route table; renders one micro-frontend per route in a main outlet.
- Composition: Micro-frontends are loaded on demand from their own deployed URLs; the shell does not rebuild when a team deploys.
How well must it do it?
- Bundle: The framework, the router and the design system are loaded once; a route switch loads at most 150 KB gzipped of new code.
- Independence: A team deploys without a shell release; the shell pins no team version at build time.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Micro frontends
- Module federation
- Shell application
- Shared dependencies
- Independent deployment
- Cross app communication
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a micro-frontend architecture and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Hard. It suits engineers preparing for senior interviews, where you are expected to drive the discussion and go deep on trade-offs.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team