4. Component Library & API Layer
Goal for this page: stop reinventing UI that already exists, and be able to trace an API call from a component to the backend and back.
Step 4.1 — The shared component library
What & why: There are dozens of reusable component categories under
libs/components/src/ (navigation bars, tables, charts, dialogs, form controls, etc.),
imported via the @aquagen-mf-webapp/... path aliases. Before building any UI, check
whether it already exists — reusing it is the DRY, correct default.
Learn:
- Development — Component Library (the categories + how to import)
- Background: Material-UI components (what our components are built on)
Your task: Browse libs/components/src/ and find three components you'd reach for
commonly (e.g. a nav bar, a table, a dialog). For one of them, find a place in a feature
where it's already imported and used, and note the exact import path alias.
Step 4.2 — Utilities & shared helpers
What & why: Common logic (formatting, date handling, calculations) is centralized in shared utilities. Reaching for these instead of rewriting keeps behavior consistent.
Learn:
Your task: Find one shared utility you'd otherwise be tempted to rewrite (e.g. a date or number formatter). Note where it lives and how to import it.
Step 4.3 — The API layer
What & why: The app talks to REST APIs on Azure using Axios, with JWT tokens for
auth attached to requests. API calls are organized into service modules rather than
scattered axios calls, so there's one place per domain to look.
Learn:
- API Reference — API Services (how services are structured)
- Architecture — API Flow (request → auth → response path)
- API Reference — Enums & Configs (shared constants you'll need)
Your task: Trace one API call end to end: pick a screen that loads data, find the service function it calls, see where the base URL and JWT token get attached, and follow the response back into the component's state. Sketch the path in five bullets.
Step 4.4 — Analytics
What & why: User actions are tracked (Mixpanel / GA4). When you add a meaningful interaction, you're often expected to emit the matching analytics event — so know the pattern exists.
Learn:
Your task: Find one analytics event that's already fired in the code and note how it's invoked, so you can follow the same pattern later.
You can find and reuse shared components and utilities, and you can trace an API call from UI to backend. Last stop: the domain model, our conventions, and your first contribution.
Next: → Domain, conventions & first task