Mobile Water Tracker — Daily Hydration Reminder & Goal Tracker (PWA)

HydroTrack — Mobile Water Tracker (PWA)

Most people drink less than half the water their body needs every day. HydroTrack is a mobile-first, installable water-intake tracker that makes hitting your daily hydration goal effortless — one tap per glass, a live goal ring, a 7-day history chart, and a streak counter that keeps you honest.

Built as a zero-dependency PWA: it installs to the home screen, works fully offline via a service worker, and stores everything in localStorage — no signup, no server, no tracking.

Features

• One-tap quick-add — 250 ml glass, 500 ml bottle, 750 ml and 1 litre presets, plus a custom-amount field.
• Daily goal ring — live millilitre total, percentage and motivational messages; the ring turns gold when you hit your goal.
• Today's intake log — every entry timestamped, with per-entry delete.
• Last-7-days chart — bar history with goal-met days highlighted, plus a streak counter for consecutive goal days.
• Hydration reminders — optional browser notifications every 2 hours (8 am–10 pm) when you're behind your goal.
• Installable PWA — manifest + offline service worker, mobile-first app layout, zero dependencies.

What's inside

• index.html — complete app UI
• style.css — mobile-first styles (easy colour theming via CSS variables)
• app.js — all tracker logic, well commented (storage, streak math, reminders)
• manifest.webmanifest + sw.js — installable, offline-capable PWA
• icon.svg — app icon
• README.txt — setup, usage and customisation guide

Setup

No build tools needed. Open index.html directly, or serve the folder (python3 -m http.server 8000 or php -S localhost:8000) to enable the install prompt and offline mode. Tested end-to-end in headless Chromium — logging, totals, streaks, goal change, delete and XSS-safe rendering all verified.

100% free — use it in personal and commercial projects.

Need a Custom Website or Mobile App?

Downloading free code is just the start. Yadu Tech builds complete websites and mobile apps for businesses — design, development, deployment, all done for you.

👉 Chat on WhatsApp