How nxyzzmw/smart_hydration_tracker_app-frontend- works
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: useWater.ts Feature hooks · app/_layout.tsx Root router shell · tabs/_layout.tsx Authenticated tabs · index.tsx Daily intake
Components 18
Navigation & screens
Expo Router routes and authenticated tab UI.
- Root router shell
app/_layout.tsx - Root route
app/index.tsx - Auth screens
app/auth/login.tsx - Splash screen
app/splash.tsx - Authenticated tabs
app/tabs/_layout.tsx - Daily intake
app/tabs/index.tsx - History
app/tabs/history.tsx - Analytics
app/tabs/analytics.tsx - Reminders
app/tabs/notifications.tsx - Profile
app/profile.tsx
Domain hooks
Screen-facing state, loading, and mutations.
- Feature hooks · Auth, water, history, analytics, and profile screen state.
hooks/useWater.ts
API & domain data
Centralized backend access and response transformation.
- Feature API clients · Auth, water, analytics, user, and reminder backend operations.
src/api/waterApi.ts - HTTP client
src/api/axiosClient.ts - Water data transforms · Normalizes responses, logs, and units.
src/utils/apiParsers.ts
Shared presentation & events
Reusable UI infrastructure and cross-feature updates.
- Domain events · Coordinates profile, water, and notification changes across screens.
src/events/waterEvents.ts - Shared screen UI · Screen, tab swipe, header, and platform loading presentation.
components/Screen.tsx - Water loading animation
assets/animations/water-loading.json
Other components
- Expo universal runtime · Runs the client on Android, iOS, and web.
app.json
Connections 22
- 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