AquaFlow is a calm, pure-awareness hydration companion built with React Native and Expo. Engineered with dual-wave liquid physics, tactile haptic signatures, ambient weather awareness, and respectful waking-hour reminders, AquaFlow transforms hydration into an effortless, pressure-free daily practice.
"AquaFlow doesn't manage your hydration. It helps you remember it, record it, and stay aware of it."
- No Finish Lines, No Failures: No arbitrary targets, no streaks to break, no badges to unlock, and no guilt.
- Estimated Daily Reference: Offers a gentle reference guideline (e.g.
~2.5 L / day) based on body baseline and daily energy, rather than an enforced quota. - Repeating Bottles: Bottles represent intuitive volume milestones (
💧 2 bottles · +200 ml) without capping or resetting. - Light Confetti Delight: Completing a bottle volume triggers a delicate, colorful confetti cascade and a quiet toast:
Bottle filled 💧.
- Dual-Layer Fluid Dynamics: Interactive 3000ms primary front wave coupled with a 4600ms secondary depth wave.
- Dynamic Liquid Color Morphing: 400ms smooth RGB liquid transitions matching the active beverage color (Water, Coffee, Tea, Juice, Electrolytes).
- Etched Measurement Ticks: 25%, 50%, and 75% graduation marks with dual specular gloss reflections.
- 1:1 Fluid Tracking: Every milliliter counts as 1 ml fluid volume without physiological multipliers or confusing conversions.
- Centralized Tactile Engine: Beverage-specific haptic signatures (crisp pulse for Water, warm pulse for Coffee, energetic surge for Electrolytes).
- Hold-to-Customize Quick Presets: 4 store-persisted customizable preset buttons (
Glass 250ml,Coffee 350ml,Bottle 500ml,Electrolytes 500ml). - Inline Custom Logger: Integrated
+ Customaction allowing arbitrary volume and beverage selection.
- Environmental Awareness: Displays local temperature and weather conditions (e.g.
Warm outside · 30°C) purely as ambient awareness—without artificial goal multipliers or prescriptive demands.
- Gentle Scheduling: Choose between
Every 90m,Every 2h,Every 3h, orOff. - Built-in Quiet Hours: Reminders are strictly confined to waking hours (8:00 AM → 10:00 PM), never disturbing your sleep.
- Conversational Tone: Simple, thoughtful reminders ("Time for a drink? Have some water when you're ready.").
- Daily & Weekly Overview: Simple
TodayandThis Weeksummary cards. - Drinks Breakdown: Color-coded distribution of daily drinks across beverage types.
- This Week Chart: 7-day volume visualization with average intake and subtle reference guideline.
- Your details: Weight stepper and activity level selector with live estimated daily reference preview.
- Reminders & display: Interval selector, temperature unit toggle (°C / °F), and vibration switch.
- Data & Privacy: 100% offline, stored locally on-device with single-tap data reset.
| Technology | Purpose |
|---|---|
| Expo (SDK 54) | Cross-platform React Native runtime & toolchain |
| Expo Router | File-based navigation and nested layouts |
| NativeWind (Tailwind CSS) | Declarative, performant UI styling |
| Zustand | Centralized state management |
| react-native-mmkv | Ultra-fast synchronous persistent storage |
| React Native Reanimated | 60 FPS smooth wave physics and UI transitions |
| Expo Haptics | Tactile feedback for logging and bottle fills |
| Expo Notifications | Deterministic waking-hours reminder scheduler |
| Lucide React Native | Clean, modern iconography |
aquaFlow/
├── app/
│ ├── _layout.tsx # Global app layout & notification initialization
│ ├── index.tsx # Main dashboard (Bottle, Pacer, QuickAdd)
│ ├── history.tsx # History, drinks breakdown & weekly intake
│ └── settings.tsx # Details, reminders & data privacy
├── components/
│ ├── WaterBottle.tsx # Dual-wave physics & liquid morphing bottle
│ ├── QuickAdd.tsx # 1-tap quick log & customizable preset modal
│ ├── ui/
│ │ ├── Confetti.tsx # Light, delicate confetti animation
│ │ └── Toast.tsx # Contextual toast notifications
│ └── hydration/
│ ├── HydrationHeader.tsx # Header (Date & navigation)
│ ├── ProgressSection.tsx # Intake volume, bottle count & pacer
│ ├── WeatherCard.tsx # Ambient weather context
│ └── CustomLogModal.tsx # Multi-beverage volume selector
├── constants.ts # Beverage palette, default profile & pacing suggestions
├── services/
│ ├── NotificationService.ts # Mutex-locked waking-hours reminder scheduler
│ ├── ProfileService.ts # Profile persistence
│ ├── WeatherService.ts # Ambient OpenWeather service
│ └── storage.ts # MMKV sync storage adapter
├── store/
│ ├── hydrationStore.ts # Core hydration state & preset actions
│ └── toastStore.ts # In-app toast notifications
└── utils/
├── haptics.ts # Centralized tactile feedback engine
├── hydration.ts # Daily reference & repeating bottle calculations
└── date.ts # Date & weekly reset helpers
- Node.js (v18 or newer)
- Android Studio / Xcode for running Development Builds
-
Clone the repository:
git clone https://github.com/Snaehath/AquaFlow.git cd AquaFlow -
Install dependencies:
npm install
-
Environment Configuration: Create a
.envfile in the root directory:EXPO_PUBLIC_WEATHER_API_KEY=your_openweather_api_key
AquaFlow utilizes native modules (MMKV, Reanimated, Haptics). Run using a Development Build:
# Android
npx expo run:android
# iOS
npx expo run:iosAquaFlow is built with strict privacy principles:
- 100% Local Storage: All hydration logs, history, and personal metrics stay on your device via MMKV.
- Waking-Hours Protected: Notifications are scheduled deterministically strictly between 8:00 AM and 10:00 PM without external push servers.
- Privacy Policy: Read our full Privacy Policy.