AquaGen Platform Overview
AquaGen is an enterprise water-management web application. It gives organizations real-time monitoring, analytics, and AI-assisted insights so they can track water usage, work toward water neutrality, and optimize water and energy resources.
This page is the 10-minute picture: what it does, what it's built with, and how the code is organized. From here, pick your path on Start Here.
What AquaGen does
- Monitor water flow, quality, and ground-water levels in real time.
- Analyze water balance, neutrality, and sustainability metrics.
- Track energy consumption tied to water systems.
- Surface AI-powered insights and anomaly detection (AquaGPT).
- Visualize everything through dashboards, SCADA/HMI views, and reports.
- Control access with role-based permissions and enterprise authentication.
For the full feature-by-feature reference, see Features.
The stack (headline)
You don't need to memorize versions — the source of truth is the repo's package.json. These
are the pieces you'll touch every day:
| Area | What we use |
|---|---|
| UI | React 19 + Material-UI 7 |
| Routing | React Router 7 |
| Language | TypeScript |
| HTTP / API | Axios with JWT auth |
| Monorepo & build | Nx + Rspack |
| Auth | Azure MSAL (enterprise sign-in) |
For the full library list and what each is for, see Architecture → Libraries.
You'll see "micro-frontend" and "Module Federation" in the code and older docs. It is currently turned off — read Module Federation Status before assuming runtime feature-loading is active.
How the code is organized
AquaGen is an Nx monorepo with two kinds of folders:
apps/— thin application shells. One repo builds several products (the mainproductionapp plus standalone apps and a demo). See Applications → Overview.libs/— where almost all real code lives:libs/shared,libs/components, and one library per feature (dashboard, monitoring, energy, alerts, aquagpt, …).
The shape of a feature library
Every feature library follows the same four-layer pattern. Learn this once and you can read any feature in the codebase:
libs/<feature>/src/
dataSource/ → API calls (Axios)
controller/ → business logic / orchestration
store/ → state, using React Context
components/ → presentational UI
State is managed with the React Context API at two levels: a single global AppStore in
libs/shared, plus a per-feature store in each library. Details in
Architecture → State Management.
The Frontend Foundations track has you build a tiny practice app in this
exact dataSource / controller / store / components shape — so by the time you open the real
code, the layout is already familiar.
Next steps
- New to React? Build the fundamentals first with Frontend Foundations.
- Ready to run it? Installation & Setup.
- Understand the architecture (everyone): the Practice track in the Architecture section.
Keep the Commands Reference and the Architecture Diagrams handy as you go.