Drink Water Tracker
Tap cups to fill a big glass and watch your daily total rise.
StarterWeb appProductivity2–4hAI-buildable 5/5no setup
Click any cup and every cup up to it fills; click the last filled one to unfill back. The remaining-volume display and the animated fill both derive from the same count, which makes the state model satisfying to get right.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 4
- Clicking a cup fills it and every cup before it
- Clicking the highest filled cup unfills from there
- A big glass animates to show total progress
- Remaining litres and percentage update live
The interesting part
- The fill/unfill toggle rule at the boundary cup
Once it works
- Persist today's total to localStorage
- Add a configurable daily goal
Suggested stack
reacttypescripttailwindframer-motionlocalstorage