HYDRAA

A personal hydration tracker that logs every drink, nudges you with smart reminders, sounds and OS notifications, and turns your intake history into clear daily, monthly and interval trends.

React, TypeScript, Vite, Tailwind CSS, Recharts, Service Worker, Google Apps Script, Google Sheets

Overview

HYDRAA is a personal hydration tracker I built to fix a simple problem: I kept forgetting to drink water while working. It records every drink, reminds me on a schedule I control, and shows how my intake changes across days and months, so staying hydrated becomes a habit instead of an afterthought.

It is also my first real project in React . Coming from Angular, I designed the screens in Figma, then built the app with React, TypeScript, Vite and Tailwind CSS.

At a Glance

Logging Drinks

  • A Record a Drink dialog with drink type, preset amounts and a custom ml value.
  • Editable date and time, so a forgotten glass can be added later.
  • Every entry can be edited or deleted, and the list always shows the newest first.
  • Only water counts towards the daily goal; milk, coffee, soda and juice are still logged so the full picture stays visible.

Smart Reminders

Reminders are the heart of the app. When one is due, HYDRAA opens a reminder dialog, plays a sound and sends an operating-system notification, even when the tab is in the background.

  • Three actions on every reminder: Drink Now , Snooze (5, 10, 15 or 30 minutes) or Skip .
  • OS notifications have quick actions too: log a set amount or snooze straight from the notification.
  • Five alert sounds (dun, fahh, horn, siren and tum-dum-tedau) with volume control and a silent mode. The sound repeats until the reminder is answered.
  • A Next Reminder countdown so you always know when the next nudge is coming.
  • If you drink on your own just before a reminder, that reminder is skipped instead of nagging you.

History and Trends

  • Date-range filters: Today, Yesterday, Week to date, Month to date, Quarter to date, Half year to date, Year to date and All time, plus custom start and end dates.
  • History grouped by day in expandable sections, showing drinks, snoozes and skips together.
  • Dashboard charts for the last seven days with the daily goal drawn as a reference line.
  • Trends with daily bar charts, six-month line charts and the average time between drinks , built with Recharts.
  • Export of the drink log to Excel.

A Backend Without a Server

HYDRAA has no traditional backend. A Google Apps Script web app acts as a tiny API in front of a Google Sheet, with separate tabs for the drink log, settings and daily goals. The app loads its state from that endpoint, falls back to the sheet's public CSV if needed, and saves changes back automatically, including every reminder action.

Settings and Theming

  • Settings split into Hydration, Sound and Notifications: daily goal, reminder interval, snooze options, sound choice and volume, and quick-action amounts.
  • Notification permission status, a test notification and a Fire Now button to try a reminder instantly.
  • Light and dark themes: blue accents in light mode and an emerald palette tuned for dark mode.
  • Collapsible sidebar (220 px open, 60 px collapsed) that collapses automatically on small screens, with a hamburger menu on mobile.

Challenges I Solved

  • Notifications across browsers: HYDRAA uses a service worker notification where the browser supports it and falls back to the standard Notification API elsewhere. The service worker also focuses or reopens the app when a notification is clicked.
  • Duplicate notifications: fixed a bug where one reminder could send several OS notifications.
  • No double reminders: a manual drink resets the reminder cycle, so you are not reminded right after drinking.
  • Never losing data: reminder actions (drink, snooze, skip) are saved automatically, not only when a form is submitted.
  • Mobile layout: reworked headers, grids and the settings page so the app works well on phones.

What I Learned

HYDRAA taught me React's component and hooks model, how browser notifications and service workers behave differently across browsers, and how far a Google Sheet can go as a lightweight database for a personal app. Most of all, it is an app I actually use every day.

I built HYDRAA because I kept forgetting to drink water. Now my browser reminds me, and so do the sirens. 💧

JangiliBuilds