An open API service indexing awesome lists of open source software.

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.

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.


Habit Tracker V2 Banner

## 📸 App Preview




Form of adding habit
Test Page


Calendar
Habit Progress


## 🌟 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
Vite
Tailwind CSS
Chart.js
Framer Motion
React Router

- ⚛️ **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 Request

Made with ❤️ for better habits