AquaGen Platform Overview
AquaGen Web Application is a comprehensive water management platform built with modern web technologies. It provides real-time monitoring, analytics, and insights for water systems, enabling organizations to track water usage, achieve water neutrality, and optimize their water resources.
The application is built as a micro-frontend architecture using Nx monorepo and Module Federation, allowing scalable development with multiple independent feature modules.
What is AquaGen?
AquaGen is an enterprise-grade water management solution that helps organizations:
- Monitor water consumption in real-time
- Analyze water balance and usage patterns
- Track water neutrality and sustainability goals
- Optimize energy consumption related to water systems
- Generate AI-powered insights with AquaGPT
- Manage alerts and notifications for anomalies
- Visualize data through interactive dashboards
Key Features
Real-Time Monitoring
- Live water flow rates and quality metrics
- Ground water level tracking
- Multi-node data visualization
- Historical trend analysis
Water Balance & Neutrality
- Input/output water calculations
- Water stock management
- Sustainability metrics and reporting
- Rain Water Index (RWI), Urban Water Index (UWI), Water Risk Index (WRI)
Energy Management
- Energy consumption tracking
- Efficiency monitoring
- Correlation with water usage
- Cost analysis
AI-Powered Insights (AquaGPT)
- Natural language queries about water data
- Intelligent recommendations
- Anomaly detection
- Predictive analytics
Advanced Visualization
- Interactive dashboards
- SCADA editor and viewer
- HMI (Human-Machine Interface) components
- Custom chart types (heatmaps, treemaps, line charts)
User Management
- Account settings and preferences
- Role-based access control
- Multi-tenant support
- Manual data entry capabilities
Technology Stack
Frontend Framework
- React 19.1.0 - Modern UI library with hooks and functional components
- Material-UI 7.2.0 - Comprehensive component library
- React Router 7.6.3 - Client-side routing
Build Tools & Architecture
- Nx 21.2.1 - Monorepo management and build orchestration
- Rspack 1.3.8 - Fast bundler (Rust-based Webpack alternative)
- Module Federation - Micro-frontend architecture (currently configured, temporarily commented out)
- TypeScript 5.7.2 - Type safety and better developer experience
State & Data Management
- React Context - Application-wide state
- Custom Hooks - Reusable state logic
- Axios 1.10.0 - HTTP client for API requests
- JWT Decode 4.0.0 - Token handling
Authentication & Security
- Azure MSAL 4.14.0 - Microsoft Authentication Library
- FingerprintJS 5.0.1 - Device fingerprinting
- Google OAuth 0.12.2 - Google authentication
Data Visualization
- Chart.js 4.5.0 - General charting library
- Recharts 3.0.2 - React charting components
- Plotly.js 3.1.1 - Advanced scientific charts
- React Leaflet 5.0.0 - Interactive maps
- ReactFlow 11.11.4 - Flow diagrams and node graphs
Additional Libraries
- Moment.js 2.30.1 & date-fns 4.1.0 - Date manipulation
- Lodash 4.17.21 - Utility functions
- Marked 16.0.0 - Markdown parsing
- XLSX 0.18.5 - Excel file handling
- Three.js 0.179.1 - 3D graphics
Testing & Quality
- Jest 29.7.0 - Unit testing framework
- React Testing Library 16.3.0 - Component testing
- Cypress 14.2.1 - End-to-end testing
- Playwright 1.36.0 - Browser automation
- ESLint 9.8.0 - Code linting
- Prettier 2.6.2 - Code formatting
Deployment & Hosting
- Firebase - Hosting and deployment
- Capacitor 7.4.1 - Mobile app wrapper (iOS & Android)
- Sentry 9.34.0 - Error tracking and monitoring
- Mixpanel 2.65.0 - Analytics
- Google Analytics 4 (react-ga4 2.1.0) - Usage tracking
Application Modules
The platform consists of 25+ feature libraries:
| Module | Purpose |
|---|---|
| dashboard | Main overview and metrics dashboard |
| monitoring | Real-time water monitoring and data visualization |
| waterBalance | Water input/output calculations |
| waterNeutrality | Sustainability tracking and reporting |
| energy | Energy consumption and efficiency |
| alerts | System notifications and warnings |
| aquagpt | AI-powered insights and chat interface |
| manageAccount | User account settings and preferences |
| leadership | Executive-level reporting and KPIs |
| rwi | Rain Water Index calculations |
| uwi | Urban Water Index analytics |
| wri | Water Risk Index assessment |
| gwi | Ground Water Index monitoring |
| waterRatio | Water usage ratios and comparisons |
| waterRisk | Risk assessment and management |
| trueCost | True cost of water calculations |
| scadaEditor | SCADA diagram editor |
| scadaViewer | SCADA diagram viewer |
| hmi | Human-Machine Interface components |
| aquagenLabs | Experimental features and prototypes |
| aquaAi | AI/ML integration layer |
| shared | Common utilities and services |
| components | Reusable UI components |
| uilib | UI library components |
Architecture Highlights
Micro-Frontend Pattern
- Each feature is an independent library
- Can be developed, tested, and deployed separately
- Shared dependencies managed centrally
- Module Federation enables dynamic loading (when activated)
Nx Monorepo
- Single repository for all apps and libraries
- Efficient dependency management
- Shared build cache
- Integrated testing and linting
Design Patterns
- Controller: Business logic and orchestration
- DataSource: API integration and data fetching
- Store: State management with React Context
- Components: Presentational UI components
- Helpers: Utility functions and constants
Browser Support
The application supports modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Minimum Requirements:
- ES6+ JavaScript support
- Modern CSS features (Flexbox, Grid)
- WebSocket support
- LocalStorage availability
Mobile Support
- Responsive Design: Works on tablets and mobile devices
- Capacitor Integration: Native iOS and Android apps
- PWA Capabilities: Can be installed as Progressive Web App
- Touch-Optimized: Touch-friendly UI components
Performance
- Fast Builds: Rspack provides near-instant rebuilds
- Code Splitting: Automatic bundle optimization
- Lazy Loading: Routes and components loaded on demand
- Caching: Build cache and runtime caching strategies
- Optimized Assets: Minification and compression
Security Features
- Azure AD Integration: Enterprise authentication
- JWT Tokens: Secure API communication
- Content Security Policy: XSS protection
- HTTPS Only: Enforced secure connections
- CORS Configuration: Controlled cross-origin requests
- Security Headers: Comprehensive HTTP security headers
When to Use AquaGen
AquaGen is ideal for:
- Enterprises with complex water management needs
- Industrial facilities tracking water usage
- Sustainability teams working towards water neutrality
- Facilities managers monitoring multiple sites
- Environmental compliance reporting
- Smart building water management systems
Next Steps
Now that you understand what AquaGen is, proceed to:
- Installation & Setup - Get the application running
- Micro-Frontend Architecture - Understand the technical architecture
- Development Workflow - Start developing features
Need Help?
- See FAQ for common questions
- Check Troubleshooting for solutions
- Review Resources for additional learning materials