PulseDash

The Angular 17 admin dashboard for Helios Analytics (fictional). Real-time metrics, a searchable user table, an alerts panel, and a user-invite form.

PulseDash is what the Helios ops team stares at all day. It refreshes live, so RxJS hygiene and change-detection correctness matter: a leaked subscription or a mutation the view never picks up turns into a slow, wrong, or frozen dashboard.

Structure

src/app/
  app.component.ts          shell + shared selection
  services/
    dashboard.service.ts    data + shared state (metrics, users, alerts)
  components/
    dashboard.component.ts   live metric tiles (auto-refresh)
    user-list.component.ts   searchable user table
    alerts.component.ts      OnPush alerts panel
    user-form.component.ts   invite form (reactive forms)
  models/models.ts          interfaces

Run

npm install
npm start          # ng serve → http://localhost:4200

HTTP calls are stubbed with of(...).pipe(delay()) to simulate latency without a backend, so the app runs standalone.

Domain notes

• The dashboard auto-refreshes metrics on an interval.
• User search queries on every keystroke.
• The alerts panel uses OnPush for performance.
• Money/precision isn't a concern here — RxJS, change detection, and rendering performance are.