Micro-frontend playground
A small shop built from three independently deployed micro-frontends. Switch versions, add latency or break one and watch the rest keep working.
catalog@1.0.0 · Team Discovery
cart@1.0.0 · Team Checkout
recommendations@1.0.0 · Team Growth
How it works
- Loaded at runtime
- Each app is its own JavaScript file, fetched only when the shop needs it. Check the Network tab: catalog, cart and recommendations arrive as separate requests.
- Isolated by Shadow DOM
- Every app renders in its own shadow root, so its CSS cannot leak out. Colours and dark mode still flow in through shared design tokens.
- Connected only by events
- No app imports another. The catalog emits cart:add, the cart answers with cart:updated, and recommendations and the shell badge react to it.