Welcome to AquaGen Web Application Documentation

AquaGen is an enterprise water-management platform built with React 19, Material-UI 7, React Router 7, TypeScript, and an Nx monorepo. It provides real-time monitoring, AI-powered insights, and water-sustainability tracking. For a full tour of what the platform does and its complete technology stack, see the Platform Overview.

New here? Start with Getting Started

Head to Getting Started and pick your onboarding path — the Frontend Foundations track if you're new to React, or Installation + the Practice track if you're experienced.

---

Documentation map

Getting Started

• Start Here — choose your onboarding path
• Platform Overview — what AquaGen does and its stack
• Frontend Foundations — React fundamentals for new engineers
• Installation & Setup — run the app locally

Applications

• Applications Overview — the five apps, main vs standalone
• Products · Standalone Apps
• Module Federation Status — why the apps are plain SPAs today
• Deployment & Environments · Legacy & Deprecated

Architecture

• Architecture Diagrams — visual overview of the system
• Micro-Frontend Architecture · Libraries & Modules
• State Management · API Call Flow
• Standard Categories — the core domain model
• Configuration & Security — constants.js, CSP & security headers
• Practice — guided, hands-on tour of the codebase (for everyone)

Features

• Application Routes · Authentication · Permissions
• Dashboard · Leadership Dashboard
• Water Monitoring · Water Quality · Water Stock · Ground Water Level
• AquaGPT · Alerts · Reports · Energy Monitoring
• Account Management · True Cost of Water · HMI Interface
• AquaGen Labs · Water Usage Ratio · Water Neutrality · Additional Features

Development

• Commands Reference — all npm & Nx scripts
• Deployment Guide · Component Library · Utilities

API Reference

• API & Services — HTTP client, endpoints, and services
• Enums & Configuration — constants, enums, and config files