Track Daily Hydration and Build Healthy Habits with AquaTrack App

By (@priya) · · Chatbots

Track Daily Hydration and Build Healthy Habits with AquaTrack App - image 1 Track Daily Hydration and Build Healthy Habits with AquaTrack App - image 2 Track Daily Hydration and Build Healthy Habits with AquaTrack App - image 3

AquaTrack is a modern, mobile-first daily water intake tracker and reminder web application designed to help users build healthy hydration habits. Built with React 19, Vite, TypeScript, and Tailwind CSS, it delivers a sleek iOS-inspired aesthetic featuring an animated circular progress ring, dynamic glass indicators, customizable cup sizes, and quick logging with instant undo. Users benefit from smart browser reminders with quiet hours, historical calendar logs, and rich analytics powered by Recharts. Complete with a gamified achievement badge system, confetti celebrations, dark/light themes, offline PWA support, and realistic preloaded demo data, AquaTrack makes mindful hydration effortless.

Tech stack

  • Antigravity (4 Argon)

Links

Prompt

Build a complete, modern, mobile-first web application called AquaTrack – Daily Water Intake Tracker & Reminder App using React 19, Vite, TypeScript, Tailwind CSS, Framer Motion, Recharts, Lucide Icons, and LocalStorage.
UI/UX Design:
Recreate a clean iOS-style health interface with primary blue (#1677FF), cyan (#62C5FF), soft background (#F5FAFF), navy text (#102448), rounded 3xl cards, and seamless dark/light mode.
Key Screens & Features:
Welcome & Onboarding: Animated smiling water-droplet mascot, interactive wizard to set name, daily goal (1500–3000 ml or custom), cup capacities, reminder preferences, and an "Explore Demo" button.
Home Dashboard: Dynamic greeting (Good Morning! Stay Hydrated 💙), animated circular progress ring displaying intake vs. goal with percentage, row of 6 dynamically filling glasses, one-tap quick add button (+ Add 250 ml), cup selector cards (100 ml, 250 ml, 500 ml), daily goal/remaining metrics, streak badge, and recent logs with an instant undo action.
Add Water Modal: Slide-up bottom sheet with container presets, plus/minus volume stepper, direct numeric input, and validation.
Smart Reminders: Browser Notifications API integration with interval presets (30m, 1h, 2h), toggleable custom alert times, quiet hours (10 PM–7 AM), and a live notification test button.
Analytics & Stats: Segmented Day/Week/Month tabs, Recharts bar charts with a dashed goal reference line (Goal: 2.5L), weekly average intake with percentage trends, and weekday progress bars.
History Calendar: Monthly calendar view highlighting goal-achieved dates with badges, date inspector, and past-entry editing/deletion.
Gamification & Settings: Achievement badges (First Glass, 7-Day Streak, Hydration Hero) with celebratory canvas confetti and Web Audio chimes, JSON backup export/import, and safe data reset.
Include offline PWA caching, zero external backend dependencies, and realistic preloaded 7-day demo data matching a 60% completion state for hackathon presentations.

Comments (1)

  1. Hadi ·

    what a rare idea buddy
    nice idea<div><br></div>

2 likes · 1 comment

Explore more on Prompted

Loading