A professional, fully functional web application built with Next.js and Firebase that helps users track their daily water intake and receive smart hydration reminders.
- User Authentication: Secure email/password authentication with Firebase Auth
- Daily Water Tracking: Log water intake throughout the day with quick-add buttons
- Progress Visualization: Real-time progress bars showing daily goal completion
- Smart Reminders: Customizable browser notifications for hydration reminders
- Detailed Statistics: View your hydration history and track progress over 7 days
- Settings Management: Customize reminder intervals and daily hydration goals
-
Home Page (
/)- Landing page with feature overview
- Quick navigation to authentication
-
Authentication (
/auth)- Login and sign-up forms
- Firebase Authentication integration
- Error handling and validation
-
Dashboard (
/dashboard)- Today's hydration progress with visual indicators
- Quick-add buttons for common water amounts (250ml, 500ml, 750ml, 1L)
- Real-time log of today's intake
- Milestone indicators at 500ml, 1L, 1.5L, 2L
-
History (
/history)- Last 7 days of hydration data
- Daily statistics with progress bars
- Average daily intake calculation
- Current streak tracking
- Days completed vs goal count
-
Settings (
/settings)- Enable/disable notifications
- Customize reminder interval (15-180 minutes)
- Set daily hydration goal (500-5000ml)
- Test notification functionality
- Helpful information cards
- Primary: Blue (#2563eb) - Professional and trust-inspiring
- Background: White (#ffffff) - Clean and minimalist
- Accents: Light blue tones for secondary elements
- Text: Dark slate for readability
- Mobile-first responsive design
- Flexbox-based layouts for optimal performance
- Gradient backgrounds for visual appeal
- Consistent component styling with shadcn/ui
- Framework: Next.js 16 with App Router
- Language: TypeScript
- Styling: Tailwind CSS with custom color tokens
- UI Components: shadcn/ui
- State Management: React Context API + Firebase Real-time Updates
- Authentication: Firebase Authentication
- Database: Firestore (NoSQL)
- Hosting: Vercel (recommended)
- Notifications: Browser Notifications API
- Node.js 18+
- npm or pnpm package manager
- Firebase project (create at firebase.google.com)
Create a .env.local file in the project root with your Firebase credentials:
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id-
Clone or download the project
-
Install dependencies:
npm install # or pnpm install -
Run the development server:
npm run dev # or pnpm dev -
Open http://localhost:3000 in your browser
- Create a new Firebase project at console.firebase.google.com
- Enable Authentication (Email/Password method)
- Create a Firestore database (Start in test mode for development)
- Create these Firestore collections with sample documents:
waterLogs- Stores daily water intake recordssettings- Stores user preferences and reminder settings
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Allow users to read/write their own water logs
match /waterLogs/{document=**} {
allow read, write: if request.auth.uid == resource.data.userId;
allow create: if request.auth.uid == request.resource.data.userId;
}
// Allow users to read/write their own settings
match /settings/{userId} {
allow read, write: if request.auth.uid == userId;
}
}
}- Click "Get Started" to create an account
- Sign up with email and password
- You'll be directed to the Dashboard
- Set your preferences in Settings
- Start logging your water intake
- Use the quick-add buttons to log water (250ml, 500ml, 750ml, 1L)
- Or enter a custom amount
- Watch your progress bar fill as you drink throughout the day
- View timestamps for each entry
- Go to Settings to enable notifications
- Set your preferred reminder interval
- Grant browser notification permissions when prompted
- You'll receive notifications at your chosen interval
- Dashboard: See today's progress
- History: Review the last 7 days with detailed statistics
- Streaks: Track consecutive days meeting your goal
{
userId: string, // User's UID
amount: number, // Water amount in ml
timestamp: Timestamp, // When the water was logged
}{
userId: string, // Document ID
enabled: boolean, // Notifications enabled
interval: number, // Reminder interval in minutes
dailyGoal: number, // Daily goal in ml
}- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Mobile browsers (iOS Safari, Chrome Mobile)
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel project settings
- Deploy automatically on push
npm run build
npm start- All Firebase credentials are public keys (prefixed with
NEXT_PUBLIC_) - Sensitive operations are protected by Firebase Authentication
- Firestore rules restrict data access to authenticated users
- Implement proper Firestore security rules before production use
- Social sharing of achievements
- Integration with fitness apps (Apple Health, Google Fit)
- Smart reminders based on activity level
- Team/family hydration challenges
- Advanced analytics and trends
- Mobile app version
- Offline support with service workers
- Check if browser notifications are enabled
- Try the "Send Test Notification" button in Settings
- Ensure you granted permission when prompted
- Verify email and password are correct
- Check internet connection
- Ensure Firebase project is properly configured
- Check Firebase Firestore connection
- Verify Firestore rules allow your user
- Check browser console for error messages
For issues or suggestions, please contact support or check the Firebase console for error logs.
This project is provided as-is for educational and personal use.
Made with ❤️ for better hydration and health