Introduction

Mosaic is a storefront composed of independently-deployed micro-frontends. A React shell composes a React catalog, a Svelte cart, and an Astro content app — each owned by a different “team,” each in its own framework, each shipped on its own — stitched into one running app with Module Federation 2.0, glued together by Web Components, and each slice backed by its own thin Hono backend.

This introduction sets the scene before you write any code:

• Overview — what Mosaic is, the feature list, and the map from each module to the Learn Hub course it adapts.
• Architecture — the shell, the remotes, the Web-Component boundary, and why micro-frontends are structured this way.
• Prerequisites — the tools to install before Module 1.
• Roadmap — where Mosaic sits in the Real-World Projects series.

When you’re ready, start with the Overview →.