# nxyzzmw/smart_hydration_tracker_app-frontend- architecture

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

- Interactive diagram: https://gitdiagram.com/nxyzzmw/smart_hydration_tracker_app-frontend-
- Repository: https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-

## Overview

#### Purpose and Runtime
This is an Expo/React Native universal client for water-intake tracking: authentication, daily logging, history, analytics, reminders/notifications, and profile/settings. It runs through Expo on Android, iOS, and web; Expo Router provides file-based navigation. Native Android service configuration is present at `google-services.json`; build/deployment metadata is in `app.json` and `eas.json`.

#### Application Entry and Navigation
The root route and navigation shell are `app/_layout.tsx` and `app/index.tsx`. Authentication is exposed through `app/auth/login.tsx` and `app/auth/register.tsx`; an initial/loading experience is represented by `app/splash.tsx`. The authenticated primary area is tab-based, defined by `app/tabs/_layout.tsx`, with daily intake as `app/tabs/index.tsx`, plus analytics, history, notifications, and settings routes.

#### Domain UI Stages
The principal user workflow is: authenticate, load profile/current water state, record or view intake, then review historical and analytical summaries. Relevant screen boundaries are `app/tabs/index.tsx`, `app/tabs/history.tsx`, and `app/tabs/analytics.tsx`. Profile management is a separate route at `app/profile.tsx`, while notification/reminder interaction is surfaced at `app/tabs/notifications.tsx`.

#### Client State and Domain Hooks
Feature hooks appear to own screen-facing state, async loading, and mutations: `hooks/useAuth.ts` for session/authentication, `hooks/useWater.ts` for current water data, and `hooks/useWaterHistory.ts` for prior logs. `hooks/useAnalytics.ts` and `hooks/useProfile.ts` similarly isolate analytics and user-profile concerns from route components. This creates a boundary between navigational UI in `app/` and backend-facing operations in `src/api/`.

#### API and Data Boundary
The API layer is centralized around `src/api/axiosClient.ts`, with feature-specific clients at `src/api/authApi.ts`, `src/api/waterApi.ts`, `src/api/analyticsApi.ts`, `src/api/userApi.ts`, and `src/api/reminderApi.ts`. Route components and hooks should consume these modules rather than make direct HTTP calls. Response normalization and water-domain transformations belong in `src/utils/apiParsers.ts`, `src/utils/waterLogs.ts`, and `src/utils/units.ts`.

#### Cross-Feature Events and Presentation
Event modules provide lightweight cross-screen coordination for profile, water, and notification changes: `src/events/profileEvents.ts`, `src/events/waterEvents.ts`, and `src/events/notification.tsx`. Shared visual infrastructure includes `components/Screen.tsx`, `components/TabSwipeScreen.tsx`, and `components/TabHeader.tsx`; loading behavior is platform-specific through `components/LoadingAnimation.tsx` and `components/LoadingAnimation.web.tsx`, backed by `assets/animations/water-loading.json`.

Main entry points: [`hooks/useWater.ts`](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/hooks/useWater.ts) (Feature hooks), [`app/_layout.tsx`](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/_layout.tsx) (Root router shell), [`app/tabs/_layout.tsx`](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/_layout.tsx) (Authenticated tabs), [`app/tabs/index.tsx`](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/index.tsx) (Daily intake)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navigation & screens"]
  node_router["Root router shell<br/>Expo Router<br/>[_layout.tsx]"]
  node_entry["Root route<br/>[index.tsx]"]
  node_auth["Auth screens<br/>routes<br/>[login.tsx]"]
  node_splash["Splash screen<br/>route<br/>[splash.tsx]"]
  node_tabs["Authenticated tabs<br/>tab layout<br/>[_layout.tsx]"]
  node_intake["Daily intake<br/>tab route<br/>[index.tsx]"]
  node_history["History<br/>tab route<br/>[history.tsx]"]
  node_analytics["Analytics<br/>tab route<br/>[analytics.tsx]"]
  node_notifications["Reminders<br/>tab route<br/>[notifications.tsx]"]
  node_profile["Profile<br/>route<br/>[profile.tsx]"]
end

subgraph group_state["Domain hooks"]
  node_hooks["Feature hooks<br/>state boundary<br/>[useWater.ts]"]
end

subgraph group_data["API &amp; domain data"]
  node_api["Feature API clients<br/>API boundary<br/>[waterApi.ts]"]
  node_http["HTTP client<br/>Axios client<br/>[axiosClient.ts]"]
  node_transforms["Water data transforms<br/>normalizers<br/>[apiParsers.ts]"]
end

subgraph group_shared["Shared presentation &amp; events"]
  node_events["Domain events<br/>event modules<br/>[waterEvents.ts]"]
  node_ui["Shared screen UI<br/>components<br/>[Screen.tsx]"]
  node_loading_asset["Water loading animation<br/>animation asset<br/>[water-loading.json]"]
end

node_runtime{{"Expo universal runtime<br/>[app.json]"}}

node_runtime -->|"hosts"| node_router
node_router -->|"routes"| node_entry
node_router -->|"routes"| node_splash
node_router -->|"routes"| node_auth
node_router -->|"routes authenticated users"| node_tabs
node_tabs -->|"includes"| node_intake
node_tabs -->|"includes"| node_history
node_tabs -->|"includes"| node_analytics
node_tabs -->|"includes"| node_notifications
node_router -->|"routes"| node_profile
node_auth -->|"uses auth state"| node_hooks
node_intake -->|"loads and records intake"| node_hooks
node_history -->|"loads prior logs"| node_hooks
node_analytics -->|"loads summaries"| node_hooks
node_profile -->|"manages profile"| node_hooks
node_hooks -->|"performs backend operations"| node_api
node_api -->|"uses"| node_http
node_api -->|"normalizes water data"| node_transforms
node_hooks -.->|"publishes and observes changes"| node_events
node_intake -->|"composes"| node_ui
node_events -.->|"updates reminder UI"| node_notifications
node_ui -->|"renders"| node_loading_asset

click node_runtime "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app.json"
click node_router "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/_layout.tsx"
click node_entry "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/index.tsx"
click node_auth "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/auth/login.tsx"
click node_splash "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/splash.tsx"
click node_tabs "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/_layout.tsx"
click node_intake "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/index.tsx"
click node_history "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/history.tsx"
click node_analytics "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/analytics.tsx"
click node_notifications "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/notifications.tsx"
click node_profile "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/profile.tsx"
click node_hooks "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/hooks/useWater.ts"
click node_api "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/api/waterApi.ts"
click node_http "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/api/axiosClient.ts"
click node_transforms "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/utils/apiParsers.ts"
click node_events "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/events/waterEvents.ts"
click node_ui "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/components/Screen.tsx"
click node_loading_asset "https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/assets/animations/water-loading.json"

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_router,node_entry,node_auth,node_splash,node_tabs,node_intake,node_history,node_analytics,node_notifications,node_profile toneBlue
class node_hooks toneAmber
class node_api,node_http,node_transforms toneMint
class node_events,node_ui,node_loading_asset toneRose
class node_runtime toneNeutral
```

## Components

### Navigation & screens

Expo Router routes and authenticated tab UI.

- [Root router shell](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/_layout.tsx): Expo Router · `app/_layout.tsx`
- [Root route](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/index.tsx): route · `app/index.tsx`
- [Auth screens](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/auth/login.tsx): routes · `app/auth/login.tsx`
- [Splash screen](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/splash.tsx): route · `app/splash.tsx`
- [Authenticated tabs](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/_layout.tsx): tab layout · `app/tabs/_layout.tsx`
- [Daily intake](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/index.tsx): tab route · `app/tabs/index.tsx`
- [History](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/history.tsx): tab route · `app/tabs/history.tsx`
- [Analytics](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/analytics.tsx): tab route · `app/tabs/analytics.tsx`
- [Reminders](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/tabs/notifications.tsx): tab route · `app/tabs/notifications.tsx`
- [Profile](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app/profile.tsx): route · `app/profile.tsx`

### Domain hooks

Screen-facing state, loading, and mutations.

- [Feature hooks](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/hooks/useWater.ts): state boundary · Auth, water, history, analytics, and profile screen state. · `hooks/useWater.ts`

### API & domain data

Centralized backend access and response transformation.

- [Feature API clients](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/api/waterApi.ts): API boundary · Auth, water, analytics, user, and reminder backend operations. · `src/api/waterApi.ts`
- [HTTP client](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/api/axiosClient.ts): Axios client · `src/api/axiosClient.ts`
- [Water data transforms](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/utils/apiParsers.ts): normalizers · Normalizes responses, logs, and units. · `src/utils/apiParsers.ts`

### Shared presentation & events

Reusable UI infrastructure and cross-feature updates.

- [Domain events](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/src/events/waterEvents.ts): event modules · Coordinates profile, water, and notification changes across screens. · `src/events/waterEvents.ts`
- [Shared screen UI](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/components/Screen.tsx): components · Screen, tab swipe, header, and platform loading presentation. · `components/Screen.tsx`
- [Water loading animation](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/assets/animations/water-loading.json): animation asset · `assets/animations/water-loading.json`

### Other components

- [Expo universal runtime](https://github.com/nxyzzmw/smart_hydration_tracker_app-frontend-/blob/main/app.json): runtime · Runs the client on Android, iOS, and web. · `app.json`

## Connections

- Expo universal runtime → Root router shell: hosts
- Root router shell → Root route: routes
- Root router shell → Splash screen: routes
- Root router shell → Auth screens: routes
- Root router shell → Authenticated tabs: routes authenticated users
- Authenticated tabs → Daily intake: includes
- Authenticated tabs → History: includes
- Authenticated tabs → Analytics: includes
- Authenticated tabs → Reminders: includes
- Root router shell → Profile: routes
- Auth screens → Feature hooks: uses auth state
- Daily intake → Feature hooks: loads and records intake
- History → Feature hooks: loads prior logs
- Analytics → Feature hooks: loads summaries
- Profile → Feature hooks: manages profile
- Feature hooks → Feature API clients: performs backend operations
- Feature API clients → HTTP client: uses
- Feature API clients → Water data transforms: normalizes water data
- Feature hooks → Domain events: publishes and observes changes
- Daily intake → Shared screen UI: composes
- Domain events → Reminders: updates reminder UI
- Shared screen UI → Water loading animation: renders