A modern habit-tracking web application built with React and Redux that helps users track daily habits, monitor monthly progress, and maintain consistency.
- Track daily habit completion
- Monthly calendar-based habit view
- Habit statistics dashboard
- Monthly completion percentage
- Add and delete habits
- Navigate between months
- Persistent data storage using Local Storage
- Responsive and clean dark UI
Main container that manages the application layout and connects Redux state.
Displays the current month and provides navigation between months.
Shows:
- Total Habits
- Total Completions
- Monthly Completion Rate
Displays weekday labels (Sun–Sat).
Renders all habits for the selected month.
Represents a single habit and its daily completion status.
Displayed when no habits exist.
Opens the habit creation modal.
Handles habit creation and user input.
{
currentMonth: {
month: 5,
year: 2026
},
habits: [
{
id: 1,
name: "Workout",
completedDays: [1, 2, 5, 10]
}
]
}- React
- Redux Toolkit
- JavaScript
- CSS
- Local Storage
- Habit streak tracking
- Weekly analytics
- Categories and tags
- Data export/import
- Cloud synchronization
- Theme customization