Clement Yuen
Back to case study

Architecture explorer

Angular Dashboard

Interactive system map for this project. Select a node to inspect technology, role, integration, and responsibilities.

Federated remote composition: the host loads the dashboard at runtime; metrics stay in-memory.

Node types

  • Frontend
  • Infrastructure
  • Micro-frontend

Architecture decisions

Decision · reason · alternative · trade-off for each major fork in the road.

Decision

Native Federation remote instead of embedding the dashboard in the host

Reason
Independent build, deploy, and iteration cycle for the showcase app.
Alternative
Single monolithic Angular application with a dashboard feature module
Trade-off
More deployment and runtime complexity; remote availability becomes an ops concern.

Decision

In-component mock metrics instead of a real analytics API

Reason
Fast, deterministic demos with zero backend dependency for portfolio visits.
Alternative
Wire a real metrics backend or third-party analytics API
Trade-off
Numbers are illustrative; the engineering story is integration, not production telemetry.

Decision

Client-only render mode for the federated route

Reason
Avoids SSR coupling to a remote that may be offline in local or preview environments.
Alternative
Server-render with Node federation always required
Trade-off
First paint for the demo route is browser-driven; SEO value of the live demo is low anyway.