Microfrontend Communication Patterns

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

1

Exercise 1 of 1

Shared State Across Microfrontend Trees

See why React Context breaks across separate roots — and how a Nanostores atom fixes it without any Provider.

Two separate CartContext.Provider instances

🛒 Cart Remote (its own Provider)

TypeScript Handbook — $29
ESLint Plugin Bundle — $49
Turborepo Pro License — $99

Cart is empty

💳 Checkout Remote (its own Provider)

No items to check out.

❌ Add items in the Cart remote. Checkout always shows empty — each remote has its own CartProvider, so they hold separate state. This is exactly what happens with real microfrontend roots: a React Context never crosses the boundary between two ReactDOM.createRoot() calls.