# hmbinara/hydrologic architecture

> Architecture diagram of the GitHub repository hmbinara/hydrologic, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hmbinara/hydrologic
- Repository: https://github.com/hmbinara/hydrologic

## Overview

HydroLogic AI is a hydration-tracking web app: users authenticate, enter personal and activity details for a weather-aware intake recommendation, log daily water, and review trends. React routes and page components provide the user workflow; Firebase supplies authentication and log persistence, while Flask calls a prediction model and weather service. The excerpts show routing, authentication, logging, analytics queries, and the backend prediction endpoint. Predictor request wiring is in omitted lines, so its backend call is shown as unverified.

Main entry points: [`frontend/src/App.js`](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/App.js) (App router), [`frontend/src/firebase.js`](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/firebase.js) (Firebase client), [`frontend/src/pages/Predictor.js`](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Predictor.js) (Intake and logging), [`frontend/src/pages/Analysis.js`](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Analysis.js) (Trend analysis)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_app["App router<br/>[App.js]"]
  node_home["Home guidance<br/>[Home.js]"]
  node_sidebar["Navigation<br/>[Sidebar.js]"]
  node_login["Sign-in page<br/>[Login.js]"]
  node_predictor["Intake and logging<br/>[Predictor.js]"]
  node_analysis["Trend analysis<br/>[Analysis.js]"]
  node_charts["Trend charts<br/>[Analysis.js]"]
end

subgraph group_identity["Identity and persistence"]
  node_firebase["Firebase client<br/>[firebase.js]"]
  node_auth["Firebase Authentication"]
  node_store[("Firestore logs")]
end

subgraph group_recommendation["Recommendation service"]
  node_backend["Prediction endpoint<br/>[app.py]"]
end

node_user(("Hydration user"))
node_weather["Weather service"]
node_model["Hydration model"]

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_predictor
node_app -->|"routes to"| node_analysis
node_app -->|"renders"| node_sidebar
node_app -->|"observes session"| node_auth
node_login -->|"uses"| node_firebase
node_sidebar -->|"signs out via"| node_firebase
node_firebase -->|"initializes"| node_auth
node_firebase -->|"initializes"| node_store
node_predictor -->|"reads and writes logs"| node_store
node_analysis -->|"subscribes to logs"| node_store
node_analysis -->|"renders data"| node_charts
node_predictor -.->|"requests prediction"| node_backend
node_backend -->|"fetches conditions"| node_weather
node_backend -->|"predicts intake"| node_model

click node_app "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/App.js"
click node_home "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Home.js"
click node_sidebar "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/Sidebar.js"
click node_login "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Login.js"
click node_predictor "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Predictor.js"
click node_analysis "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Analysis.js"
click node_firebase "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/firebase.js"
click node_backend "https://github.com/hmbinara/hydrologic/blob/main/backend/app.py"
click node_charts "https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Analysis.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_home,node_sidebar,node_login,node_predictor,node_analysis,node_charts,node_user toneBlue
class node_firebase,node_auth,node_store toneAmber
class node_backend toneMint
class node_weather,node_model toneIndigo
```

## Components

### Web experience

- [App router](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Home guidance](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Home.js): `frontend/src/pages/Home.js`
- [Navigation](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/Sidebar.js): `frontend/src/Sidebar.js`
- [Sign-in page](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Login.js): `frontend/src/pages/Login.js`
- [Intake and logging](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Predictor.js): `frontend/src/pages/Predictor.js`
- [Trend analysis](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Analysis.js): `frontend/src/pages/Analysis.js`
- [Trend charts](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/pages/Analysis.js): `frontend/src/pages/Analysis.js`

### Identity and persistence

- [Firebase client](https://github.com/hmbinara/hydrologic/blob/main/frontend/src/firebase.js): `frontend/src/firebase.js`
- **Firebase Authentication**
- **Firestore logs**

### Recommendation service

- [Prediction endpoint](https://github.com/hmbinara/hydrologic/blob/main/backend/app.py): `backend/app.py`

### Other components

- **Hydration user**
- **Weather service**
- **Hydration model**

## Connections

- Hydration user → App router: opens
- App router → Sign-in page: routes to (evidence: `frontend/src/App.js`)
- App router → Home guidance: routes to (evidence: `frontend/src/App.js`)
- App router → Intake and logging: routes to (evidence: `frontend/src/App.js`)
- App router → Trend analysis: routes to (evidence: `frontend/src/App.js`)
- App router → Navigation: renders (evidence: `frontend/src/App.js`)
- App router → Firebase Authentication: observes session (evidence: `frontend/src/App.js`)
- Sign-in page → Firebase client: uses (evidence: `frontend/src/pages/Login.js`)
- Navigation → Firebase client: signs out via (evidence: `frontend/src/Sidebar.js`)
- Firebase client → Firebase Authentication: initializes (evidence: `frontend/src/firebase.js`)
- Firebase client → Firestore logs: initializes (evidence: `frontend/src/firebase.js`)
- Intake and logging → Firestore logs: reads and writes logs (evidence: `frontend/src/pages/Predictor.js`)
- Trend analysis → Firestore logs: subscribes to logs (evidence: `frontend/src/pages/Analysis.js`)
- Trend analysis → Trend charts: renders data (evidence: `frontend/src/pages/Analysis.js`)
- Intake and logging → Prediction endpoint: requests prediction
- Prediction endpoint → Weather service: fetches conditions (evidence: `backend/app.py`)
- Prediction endpoint → Hydration model: predicts intake (evidence: `backend/app.py`)