Electron.js Svelte TypeScript Vite TailwindCSS

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

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.

Check out the complete design on Figma.

• 🎯 Customizable Goals - Set your daily water intake target
• ⚡ Custom Presets - Save and use frequently consumed amounts
• 🔔 Reminders - Get notified to drink water
• 🌓 Multiple Themes - Light, dark, and darker mode support
• 🔢 Flexible Units - Switch between mL, L, fl oz and cups
• 🔄 Daily Reset - Automatically resets goals every day

• 🗓️ Calendar - Track which days you achieved your daily intake target
• 🎨 More Themes - The more the merrier

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.

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

• Clone this repository:

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

• Install dependencies:

npm install

• Run the app:

npm run dev

• Build the app (Choose your OS):

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