Clement Yuen
All projects

Workspace map

Micro-Frontend Playground

Interactive view of how this monorepo composes a host, live remotes, sibling apps, and planned multi-framework demos.

Personal Website is the federation host. Angular Dashboard is a live Native Federation remote. Next.js Blog is embedded at /projects/blogs. React and Vue remotes are planned demos, not deployed services.

Legend

  • Host
  • Remote
  • Planned remote
  • Sibling app

Why Micro-Frontends?

This workspace uses micro-frontends and sibling apps where the boundary earns its keep—not as a default for every page.

  • Independent deployment

    Host and remotes can ship on separate cadences. A dashboard experiment does not block the resume site.

  • Team ownership

    Clear boundaries let a surface own its UI and data contracts while the host owns brand and routing.

  • Technology isolation

    Sibling apps (and future remotes) can use the stack that fits the job—Angular for the shell, Next.js for writing—without a single mega-bundle.

  • Incremental modernization

    New capabilities can land as remotes or siblings instead of rewriting the entire portfolio at once.

Trade-offs

  • More runtime and deploy complexity (manifests, remote URLs, local multi-port setups).
  • Shared dependency versioning must stay intentional—especially under Native Federation singletons.
  • SSR and remotes need explicit boundaries so the host does not fail when a remote is offline.