Introduction
Why Mosaic, how the course is structured, and what you’ll have built by the end. Open →
Mosaic
Build Mosaic, a storefront made of independently-deployed micro-frontends. A React shell composes React, Svelte, and Astro remotes at runtime with Module Federation 2.0, Web Components glue the frameworks together, and each slice owns its UI and a thin Hono backend.
What you’ll build
Section titled “What you’ll build”Setup & Tooling
A pnpm monorepo, Vite, the shell + remotes layout, Module Federation, and the Hono BFF stack. Open →
The Shell (Host)
Build the React host: layout, top-nav, routing skeleton, and the Module Federation host config. Open →
Module Federation Core
Expose and consume remotes at runtime, with remoteEntry and shared singletons. Open →
Catalog Remote (React)
Ship the first federated remote — a React catalog with its own thin Hono BFF. Open →
Web Components Interop
Wrap a remote as a custom element so any framework can mount it. Open →
Cart Remote (Svelte)
Build a Svelte cart + BFF and mount it in the React shell through a web component. Open →
Content Remote (Astro)
Integrate an SSR/static Astro app into the composition — and where it can’t federate. Open →
Cross-MFE Communication
Wire a decoupled event bus so remotes talk without importing each other. Open →
Shared Auth & State
Share one session across every micro-frontend without tight coupling. Open →
Shared Design System
Build tokens and web-component primitives that React, Svelte, and Astro all consume. Open →
Routing Across MFEs
Let the shell own top routes and remotes own their sub-routes, with deep-linking. Open →
Resilience & Performance
Handle remote-load failures, lazy-load, dedupe shared deps, and isolate errors. Open →
Independent Deployment
Deploy each slice (UI + BFF) on its own — ship one team without redeploying the rest. Open →
Wrap-up
Review what you built, the trade-offs, and where to take Mosaic next. Open →