Architecture Diagrams - AquaGen Web Application
This document provides visual diagrams of the complete AquaGen system architecture, data flow, and component relationships.
1. High-Level System Architecture
2. Application Bootstrap Flow
3. Nx Monorepo Structure
4. Dependency Flow & Import Rules
5. Feature Library Internal Architecture
Each feature library follows the same internal structure:
6. Data Flow Architecture
7. Authentication Flow
8. Routing Architecture
9. Shared Library Architecture
10. Build & Deployment Pipeline
11. Component Library Overview
12. API Architecture
13. State Management Overview
14. Security Architecture
15. Mobile Architecture (Capacitor)
Quick Reference: Key Files
┌─────────────────────────────────────────────────────────────────────┐
│ KEY FILES REFERENCE │
│ │
│ ENTRY POINTS │
│ ──────────── │
│ apps/production/src/main.jsx App entry │
│ apps/production/src/bootstrap.jsx Provider setup │
│ apps/production/src/routes/routes.js All routes │
│ apps/production/src/app/app.jsx Root component │
│ │
│ CONFIGURATION │
│ ───────────── │
│ package.json Dependencies & scripts │
│ nx.json Nx workspace config │
│ apps/production/rspack.config.js Bundler config │
│ apps/production/module-federation.config MF config │
│ firebase.json Hosting config │
│ tsconfig.base.json TypeScript paths │
│ │
│ SHARED SERVICES │
│ ─────────────── │
│ libs/shared/src/services/api/apiClient.js API client │
│ libs/shared/src/services/api/urls.js API endpoints │
│ libs/shared/src/store/AppStore.js Global state │
│ libs/shared/src/constants/authConfig.js Auth configuration │
│ libs/shared/src/constants/constants.js App constants │
│ │
│ BUILD SCRIPTS │
│ ───────────── │
│ bash-scripts/create-lib.sh Create new library │
│ bash-scripts/deploy-app.sh Deploy to Firebase │
│ bash-scripts/duplicate-production.sh Clone app │
│ bash-scripts/integrate-lib.sh Integrate library │
│ bash-scripts/run-build.sh Serve build locally │
│ │
└─────────────────────────────────────────────────────────────────────┘
Diagrams Summary
| # | Diagram | What It Shows |
|---|---|---|
| 1 | High-Level System Architecture | Browser, Backend, Azure AD, Firebase, Sentry, Analytics |
| 2 | Application Bootstrap Flow | main.jsx → bootstrap.jsx → 5-level provider chain (Google → MSAL → Theme → AppStore → Router) |
| 3 | Nx Monorepo Structure | Apps (production, demo) → 27 feature libs → UI libs → shared foundation |
| 4 | Dependency Flow & Import Rules | What can import what, forbidden imports marked with ❌ |
| 5 | Feature Library Internal Architecture | FeaturePage → components, store, controller, dataSource, helper, hooks |
| 6 | Data Flow Architecture | Component → Store → Controller → DataSource → API Client → Backend |
| 7 | Authentication Flow | Splash → Login → Microsoft/Google → Backend → JWT → Dashboard |
| 8 | Routing Architecture | All 20+ routes mapped (/dashboard, /monitoring, /energy, etc.) |
| 9 | Shared Library Architecture | services, constants, enums, hooks, utils, store, helpers, assets |
| 10 | Build & Deployment Pipeline | Dev → Build → Deploy → 14 Firebase hosting targets |
| 11 | Component Library Overview | 39 component categories grouped (Navigation, Input, Layout, Data, Feedback, Media) |
| 12 | API Architecture | Axios client, request/response interceptors, 4 environments, 40+ endpoints |
| 13 | State Management Overview | Global AppStore + Feature Stores + Local/Session Storage |
| 14 | Security Architecture | 5 security layers (Browser → Auth → Device → API → Monitoring) |
| 15 | Mobile Architecture | Capacitor bridge → Browser/iOS/Android |
Next Steps
For more details on each section:
- Overview - Platform overview
- Installation - Setup guide
- Micro-Frontend Architecture - Architecture deep dive
- Commands Reference - All commands
- Deployment - Deployment guide
Last Updated: February 2026