🌙 HabitFlow

Build Better Habits. Every Day.

A modern habit tracker designed to help you stay consistent, visualize progress, and build better routines.

---

🎯 Why HabitFlow?

Most habit trackers are cluttered.

HabitFlow focuses on simplicity, speed, and beautiful analytics so you spend less time managing habits and more time completing them.

---

✨ Highlights

🚀 Productivity	📊 Analytics	🎨 Experience
Daily Habit Tracking	Weekly Charts	Dark Mode UI
Streak Counter	Completion Rate	Responsive Layout
Local Storage	Progress Dashboard	Smooth Animations
Emoji Support	Leaderboard	Modern Design

---

📸 Preview

🖥 Dashboard Screenshot

(Add screenshot here)

---

⚡ Core Features

✅ Smart Habit Cards

Track every habit with an interactive 7-day progress grid.

---

🔥 Streak Engine

Automatically calculates your current streak.

Never lose momentum.

---

📈 Statistics Dashboard

Visualize your progress with:

• Weekly Bar Charts
• Completion Percentage
• Habit Leaderboard

---

🎨 Personalization

Customize every habit using

• 😊 Emoji
• 🎨 Color
• 📝 Custom Name

---

💾 Offline First

No account.

No backend.

Everything is stored securely in your browser using localStorage.

---

🖥 Built With

Technology	Purpose
⚛ React 18	UI Development
⚡ Vite	Build Tool
📈 Recharts	Charts
📅 date-fns	Date Utilities
🎨 CSS Modules	Styling
💾 LocalStorage	Persistent Storage

---

🗂 Project Structure

📦 HabitFlow

┣ 📂 src
┃ ┣ 📂 components
┃ ┃ ┣ 📄 Header.jsx
┃ ┃ ┣ 📄 HabitCard.jsx
┃ ┃ ┣ 📄 StatsPanel.jsx
┃ ┃ ┗ 📄 AddHabitModal.jsx
┃
┃ ┣ 📂 hooks
┃ ┃ ┗ 📄 useHabits.js
┃
┃ ┣ 📂 styles
┃ ┃ ┗ 📄 globals.css
┃
┃ ┣ 📄 App.jsx
┃ ┗ 📄 main.jsx
┃
┣ 📄 index.html
┣ 📄 vite.config.js
┗ 📄 package.json

---

🚀 Getting Started

Clone the repository

git clone https://github.com/YOUR_USERNAME/habitflow.git

Install packages

npm install

Run locally

npm run dev

Open

http://localhost:5173

---

📊 Dashboard

✔ Today's Progress

✔ Weekly Completion

✔ Longest Streak

✔ Total Habits

✔ Leaderboard

✔ Monthly Statistics

---

🌟 Upcoming Features

• 🌡 GitHub-style Contribution Heatmap
• 📱 PWA Support
• ☁ Cloud Sync
• 🔔 Smart Notifications
• 📤 Export to CSV
• 🤝 Shared Habits
• 🎯 Habit Categories
• 📆 Calendar View

---

🎥 Demo

🖥 Live Demo

https://habitflow-demo.vercel.app

---

💡 Why This Project?

HabitFlow demonstrates:

✅ React Architecture

✅ Component Design

✅ State Management

✅ Data Visualization

✅ Local Storage

✅ Responsive Design

✅ User Experience

---

👨‍💻 Developer

Tasnem Islam Prome

Frontend Developer • React Developer • UI Engineer

GitHub

https://github.com/tasnem-tech

---

⭐ If you enjoyed this project, please give it a Star!

Made with ❤️ using React + Vite