💧 Hydration Tracker

Table of Contents

• 📑 About
• 🎨 Layout
• ✨ Features
• 📚 What I Learned
• 🚀 Quick Start

📑 About

Hydration Tracker is a desktop application built with Electron designed to make water consumption tracking both simple and enjoyable.

Drinking the necessary amount of water everyday is crucial for maintaining overall health and preventing various health issues, so this tool was made to help the user remember to stay hydrated and have fun while at it.

🎨 Layout

Check out the complete design on Figma.

✨ Features

• 🎯 Customizable Goals - Set your daily water intake target
• ⚡ Custom Presets - Save and use frequently consumed amounts
• 🗓️ Calendar - Track which days you achieved your daily intake target
• 🔔 Reminders - Get notified to drink water
• 🎨 Multiple Themes - Support for various themes
  • 🌓 Core Themes - Light, dark and darker
  • 🍓 Extra Themes - Strawberry, grapes, green apple and sunflower
• 🔢 Flexible Units - Switch between mL, L, fl oz and cups
• 🔄 Daily Reset - Automatically resets goals every day

📚 What I Learned

This project was a lot of fun to develop. As my first electron app, I learned quite a load of things about the different processes (main, preload and renderer) and how to build desktop apps for multiple platforms. This was also my first try at a "cuter" more pastel UI, which I personally think turned out great.

It was a joy finally using Svelte in a bigger project and having the opportunity to familiarize myself with its concepts, like the $derived rune, which I had not previously used.

🚀 Quick Start

Option 1: Download Pre-built Releases (Recommended)

Download the latest setup files for your operating system from the Releases page:

• Windows: Download .exe installer
• Linux:
  • Download .AppImage (works on most distributions)
  • Download .deb for Debian/Ubuntu-based systems
• macOS: Currently unavailable

Option 2: Build from Source

• Clone this repository:

git clone https://github.com/Luhmeiy/hydration-tracker hydration-tracker
cd hydration-tracker

• Install dependencies:

npm install

For development

• Run the app:

npm run dev

For production

• Build the app (Choose your OS):

npm run build:win
npm run build:mac
npm run build:linux

---