Healthy Habits Tracker

Build better habits, one day at a time

Comment

🧘‍♀️ Healthy Habits Tracker

🧠 Inspiration

We noticed how difficult it can be to stay consistent with healthy routines, especially when juggling school, work, and personal commitments. Many people want to improve their lifestyle, whether it’s drinking more water, sleeping better, or being more active but lack a simple, motivating tool to help them stick with it.

We wanted to build something beginner-friendly that promotes personal well-being through small, trackable actions.

💡 What it does

Healthy Habits Tracker is a simple, intuitive web app that helps users:

  • Track daily health habits like:
    • 💧 Water intake
    • 🛌 Sleep hours
    • 🚶 Steps taken
    • 📱 Screen time
  • Visualize their weekly progress using charts
  • Set goals and receive encouraging feedback
  • Build consistency through gentle nudges and a clean, motivating interface

It’s your daily companion for forming sustainable wellness routines.

🛠️ How we built it

  • Frontend: HTML, CSS, JavaScript , React, Tailwind CSS
  • Data Storage: localStorage to store habit progress locally without a backend
  • Charts: Integrated Chart.js to show weekly progress in a visual way
  • Design: Calming orange-beige color palette with minimal distractions
  • No Backend: Everything works offline or client-side to keep it free and beginner-friendly

🧗 Challenges we ran into

  • Wanted to use backend/database, but chose to work entirely frontend to avoid hosting costs
  • Designing a mobile-friendly layout that remains clean and uncluttered was tricky
  • Managing habit states, progress tracking, and feedback purely in JavaScript required simplification

🏆 Accomplishments that we're proud of

  • Completed a fully working Responsive MVP
  • Built a functional habit tracker without needing a backend or paid APIs

- Designed a calm and welcoming UI that encourages habit formation

📚 What we learned

  • Importance of designing for simplicity and user experience
  • How to use localStorage effectively for state persistence
  • Leveraging free, open libraries like Chart.js
  • Adapting project scope on the fly when facing limitations

🔮 What's next for Healthy Habits Tracker

  • Add more customizable habits and daily goal-setting
  • Integrate push notifications/reminders for user accountability
  • Sync progress across devices or allow export (e.g., CSV/PDF)
  • Add gamification features like streaks, badges, and encouragement messages
  • Eventually introduce basic AI-driven suggestions for improving habits

Built With

Share this project:

Updates