https://github.com/rida-lad/habit_tracker_app_v2
A sleek and animated Habit Tracker App built with React, Vite, Tailwind CSS, and Chart.js — featuring Dark Mode, calendar-based tracking, and progress visualization.
https://github.com/rida-lad/habit_tracker_app_v2
calendar chartjs dark-mode framer-motion habit-tracker habit-tracking localstorage personnal-project productivity react tailwindcss vite
Last synced: 6 months ago
JSON representation
A sleek and animated Habit Tracker App built with React, Vite, Tailwind CSS, and Chart.js — featuring Dark Mode, calendar-based tracking, and progress visualization.
- Host: GitHub
- URL: https://github.com/rida-lad/habit_tracker_app_v2
- Owner: Rida-Lad
- Created: 2025-04-13T16:27:26.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-13T17:36:45.000Z (6 months ago)
- Last Synced: 2025-04-13T17:39:04.843Z (6 months ago)
- Topics: calendar, chartjs, dark-mode, framer-motion, habit-tracker, habit-tracking, localstorage, personnal-project, productivity, react, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 2.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧠 Habit Tracker App V2
A simple, elegant, and interactive habit tracking application built with **React**, **Vite**, and **Tailwind CSS**. Version 2 introduces **Dark Mode**, animated transitions, and a cleaner UI/UX for tracking personal habits and routines.
![]()
## 📸 App Preview
![]()
![]()
![]()
![]()
## 🌟 Features
### 🏠 Home Page
- **Interactive Hero Sections** showcasing the purpose and benefits of the app
- **Features Overview** explaining how the habit tracker works and the value it offers
- **Clean UI** with responsive design for all devices### ✅ Habits Management
- **Intuitive Form** for manually adding habits with proper data validation
- **Habit Assessment Test** where users answer questions to receive a percentage breakdown of their habit categories
- **Habit Categories** to organize different types of routines### 📅 Calendar View
- **Visual Representation** of habits as colored dots on a calendar
- **Interactive Legend** matching each dot to its corresponding habit
- **Monthly Overview** of habit completion and streaks### 📈 Progress Tracking
- **Comprehensive Line Graphs** displaying completion rates over time
- **Today's Habits** section with one-click "Mark as Complete" functionality
- **Streak Counting** to motivate consistent habit formation### 🌙 Dark Mode Only
- **Enjoy a sleek dark theme** with smooth transitions
- **Automatically** activates based on your system's dark mode preference
- **Your preference** is saved and persists across sessions## 🧩 Tech Stack
![]()
![]()
![]()
![]()
![]()
![]()
- ⚛️ **React** - UI component library
- ⚡ **Vite** - Fast build tool and development server
- 🎨 **Tailwind CSS** - Utility-first CSS framework
- 📊 **Chart.js** - Data visualization library
- 🎞 **Framer Motion** - Animation library
- 📂 **LocalStorage** - Client-side data persistence
- 🔀 **React Router** - Navigation and routing## 🛠 Installation & Setup
```bash
# Clone the repository
git clone https://github.com/Rida-Lad/Habit-Tracker-App-V2.git# Navigate into the project folder
cd habit-tracker-v2# Install dependencies
npm install# Start the development server
npm run dev
```The app will be running at http://localhost:5173
## 🧠 Vision Behind the App
This habit tracker was designed with a few key principles in mind:
- **Simplicity First**: Clean interface that doesn't overwhelm users
- **Visual Feedback**: See your progress through intuitive visualizations
- **Flexibility**: Track any type of habit, from fitness to productivity
- **Data Insights**: Learn about your behavior patterns through testing and analytics
- **Aesthetic Experience**: Beautiful design with dark mode support keeps users engaged## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull RequestMade with ❤️ for better habits