2. Tech Stack & The Apps
Goal for this page: know what the app is built with, and understand that this one repo produces several products — and what is (and isn't) actually turned on.
Step 2.1 — The core stack
What & why: You'll be more effective if you know the main libraries and read their docs when stuck. The frontend uses React 19, Material-UI (MUI) 7 for components, React Router 7 for routing, TypeScript 5.7, and Axios for HTTP.
Learn (skim what's unfamiliar):
Your task: Open the root package.json in the repo and match the major dependencies to
the list above. Note the exact major versions in use — they occasionally differ from a
library's latest, and that matters when you read external docs.
Step 2.2 — It's not one app — it's several
What & why: The repo builds multiple products from shared libraries (the main
production AquaGen app plus additional standalone apps like AquaRecycle, Lakepulse,
AquaRain, and a demo). Knowing which app you're running prevents a lot of confusion.
Learn:
Your task: List the apps the repo can build and identify which one you ran on the previous page. Find where in the repo the different app entry points / build targets are defined.
Step 2.3 — Module Federation: know the real status
What & why: You'll see "micro-frontend" and "Module Federation" language in the code and older docs. Read the current status before assuming runtime feature-loading is active — it may be turned off, which changes how you reason about the build.
Learn:
- Module Federation Status (start here — it's the source of truth)
- Micro-frontend Architecture for background
- Background concept: Module Federation docs
Your task: From the status doc, write down in one sentence whether Module Federation is
currently active, and what that means for how the libs/ are consumed at build vs. runtime
today.
You know the stack, that the repo is multi-app, and the true Module Federation status. Next, how users move through the app and where state lives.
Next: → Routing & state