Build an app to track water intake

Here’s a complete guide and code example for building a Water Intake Tracker App using React for the frontend. The app will allow users to:

• Set a daily water intake goal.

• Log their water intake.

• View progress with a progress bar.

• Store data in local storage to persist between sessions.

Tech Stack

• React (with hooks)

• Tailwind CSS (for styling)

• LocalStorage (for persistence)

Code: Water Intake Tracker App

jsx
CopyEdit
// File: WaterTrackerApp.jsx
import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Progress } from "@/components/ui/progress";

const WaterTrackerApp = () => {
  const [goal, setGoal] = useState(() => Number(localStorage.getItem("goal")) || 2000);
  const [intake, setIntake] = useState(() => Number(localStorage.getItem("intake")) || 0);
  const [amount, setAmount] = useState("");

  useEffect(() => {
    localStorage.setItem("goal", goal);
    localStorage.setItem("intake", intake);
  }, [goal, intake]);

  const handleAddIntake = () => {
    const value = parseInt(amount);
    if (!isNaN(value) && value > 0) {
      setIntake(prev => Math.min(prev + value, goal));
      setAmount("");
    }
  };

  const handleReset = () => {
    setIntake(0);
  };

  const progress = Math.min((intake / goal) * 100, 100);

  return (
    <div className="max-w-md mx-auto mt-10 p-6 bg-white shadow-lg rounded-2xl space-y-6">
      <h1 className="text-2xl font-bold text-center">Water Intake Tracker</h1>
      <Card>
        <CardContent className="p-4 space-y-3">
          <div>
            <label className="block text-sm font-semibold">Daily Goal (ml):</label>
            <Input
              type="number"
              value={goal}
              onChange={(e) => setGoal(Number(e.target.value))}
              min={0}
            />
          </div>
          <div>
            <label className="block text-sm font-semibold">Add Water (ml):</label>
            <div className="flex gap-2">
              <Input
                type="number"
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
              />
              <Button onClick={handleAddIntake}>Add</Button>
            </div>
          </div>
          <div>
            <label className="block text-sm font-semibold">Today's Intake:</label>
            <p className="text-lg">{intake} ml of {goal} ml</p>
            <Progress value={progress} />
          </div>
          <Button variant="outline" onClick={handleReset}>Reset Intake</Button>
        </CardContent>
      </Card>
    </div>
  );
};

export default WaterTrackerApp;

Features Summary

• Daily Goal Input: Allows users to set their own water intake target.

• Add Water Input: Lets users log their water consumption.

• Progress Bar: Visual feedback on goal progress.

• Reset Button: Clears daily intake.

• LocalStorage: Remembers data on page refresh.

Optional Enhancements

• Add notifications/reminders using setInterval or browser notifications.

• Use a database like Firebase for cross-device sync.

• Add a hydration history page with date filters.

• PWA support for mobile experience.

Let me know if you want this app exported to a framework like React Native or Flutter, or expanded to include reminders, analytics, or user authentication.