HydraFlow is an intelligent, real-world adaptive hydration platform that dynamically calculates medical-grade fluid and electrolyte targets based on body biometrics, daily occupation & workout routine, and real-time ambient GPS weather.
| Resource | Link |
|---|---|
| 🎨 Interactive Live Prototype (Vercel 24/7) | https://hydra-flow-uiux-project.vercel.app |
| 📱 GitHub Pages Mirror | https://ishruq1317.github.io/HydraFlow-UIUX-Project/ |
| 🎥 Demo Video | Watch Demo Video (Google Drive) |
- Automatically requests device GPS coordinates to resolve your exact city (e.g. Dhaka, London, New York).
- Calls Open-Meteo API in real-time to fetch ambient temperature, humidity %, UV index, and weather condition codes.
- Dynamically recalculates physiological sweat rate and fluid compensation (
$+X%$ heat surge).
- Sign Up / Sign In: Supports full registration with username uniqueness checks and real-time password strength meter.
- SHA-256 Encryption: Encrypts credentials with Web Crypto API before storing in browser persistent storage.
- In-App Password Manager: Change your password anytime in the Profile settings.
- 1-Click Sample Account: Instant shortcut for evaluators to test without typing.
- 1-Tap Quick Log: Instant
+250 mL(Glass) or+500 mL(Mug) logging. - Custom Beverage Drawer: Choose Pure Water, Electrolyte Solution, or Herbal Tea.
- Animated SVG Gauge: Smooth circular progress arc with emerald green celebration badge on 100% daily goal achievement.
- Take a Sip (-200 mL): Drops water level inside the animated bottle SVG and automatically logs fluid to your daily intake on the dashboard.
- Refill Action: Resets bottle capacity to 750 mL.
- Bluetooth Sync: Simulates sensor telemetry sync with verified drink history.
- Interactive Schedule Manager: Toggle activities (Lecture, Gym, Commute, Evening Study) or add custom events with custom mL fluid needs.
- Biometrics Editor: Update weight (kg), height (cm), age, work style (Desk, Standing, Outdoor, Athlete), and workout minutes anytime without creating a new account.
- Re-Run Setup Wizard: Re-take the 5-step onboarding walkthrough anytime directly in settings.
- Hourly Demand Curves: Compares recommended intake vs. environmental demand spikes.
- Weather Scenario Simulator: Switch between Live GPS, Heatwave (36°C), Mild (22°C), and Rain (18°C) to see targets adjust live.
- Weekly Insights: 7-day intake chart with dynamic today volume, goal consistency matrix, and active day streak tracker.
- Frontend Framework: React 19, TypeScript
- Styling: Tailwind CSS, Custom Glassmorphism UI, Responsive Mobile Frame Chassis
- Build System: Vite 6, pnpm
- APIs:
- Browser Geolocation API (
navigator.geolocation) - Open-Meteo Global Weather API
- BigDataCloud Reverse Geocoding API
- Web Crypto API (SubtleCrypto SHA-256)
- Browser Geolocation API (
- Hosting: Vercel Global Edge Network (24/7/365 Permanent Uptime)
To run the project locally on your machine:
# 1. Clone repository
git clone https://github.com/ishruq1317/HydraFlow-UIUX-Project.git
cd HydraFlow-UIUX-Project
# 2. Install dependencies
pnpm install
# 3. Start local development server
pnpm devOpen http://localhost:8443 in your browser.
Hasin Ishruq — @ishruq1317