finds.dev← search

// the find

jherr/micro-fes-beginner-to-expert

★ 305 · JavaScript · updated Sep 2024

Code for "Micro Frontends From Beginner to Expert"

Companion code for a Module Federation course, demonstrating 'full site federation' — four independently buildable micro-frontends (home, cart, pdp, addtocart) plus a NestJS backend with JWT auth, stitched together via react-router-dom. It's for developers trying to understand how real multi-team frontend splits work beyond toy component-federation demos.

Goes beyond the usual single-component federation example by federating entire route-level apps, which is the harder and more realistic problem. Ships a real backend (NestJS, JWT auth, separate cart/products modules) instead of mocking data, so the integration is end-to-end. Each micro-frontend is a genuinely separate package with its own webpack config and lockfile, showing what independent deployability actually looks like on disk. The high fork-to-star ratio (162 forks on 305 stars) suggests people are actually cloning and running this to follow the course, not just bookmarking it.

The root README is two lines and an install command — there's no explanation of the federation setup, shell/remote relationships, or what the architecture.dio diagram shows, so without the paid course this is hard to reverse-engineer. Every subproject has both a pnpm-lock.yaml and a yarn.lock, which is a landmine for anyone who picks the wrong package manager. Only the 'home' package has any tests (Jest unit test plus a near-empty Cypress spec); cart, pdp, and addtocart have zero test coverage. No CI config, and the last push was over a year ago in a part of the ecosystem (webpack Module Federation tooling) that has moved quickly since, so reproducing a working build isn't guaranteed.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →