A modern, feature-rich habit tracking application built with React and TypeScript. Track your daily habits, build streaks, earn achievements, and maintain consistency with powerful analytics and gamification features.
- Create Custom Habits: Add personalized habits with emojis, colors, and categories
- Daily Completion: Mark habits as complete with a simple, intuitive interface
- Streak Tracking: Monitor current and longest streaks for motivation
- Visual Heatmap: See your progress at a glance with GitHub-style heatmaps
- Habit Archives: Archive completed or outdated habits to keep your dashboard clean
- Completion Statistics: Track completion rates, total completions, and missed days
- Weekly & Monthly Progress: Monitor short and long-term trends
- Best Performance Analysis: Identify your best performing habits and optimal days
- Consistency Scoring: Measure how consistently you maintain habits
- Smart Insights: Get personalized recommendations based on your patterns
- Achievement System: Unlock achievements for milestones and consistent performance
- Challenge System: Take on personalized challenges to push your limits
- Progress Rewards: Earn badges and rewards for maintaining streaks
- Difficulty Levels: Habits categorized by difficulty (easy, medium, hard)
- Dark/Light Mode: Toggle between themes for comfortable viewing
- Responsive Design: Works seamlessly on desktop and mobile devices
- Habit Templates: Quick-start with pre-made habit templates
- Custom Categories: Organize habits by Health, Learning, Mindfulness, etc.
- Priority Levels: Set habit priorities to focus on what matters most
- Daily Mood Logging: Track your emotional state with a 5-point scale
- Energy & Stress Levels: Monitor energy and stress alongside mood
- Mood History: Review past moods to identify patterns
- Personal Notes: Add reflections and thoughts to your daily mood entries
- Local Storage: All data stored locally on your device
- Quick Actions: Rapidly complete today's habits from the dashboard
- Habit Details: Deep dive into individual habit statistics and history
- Smart Filtering: Filter habits by status, priority, or performance
- Export Ready: Data structured for easy backup and analysis
- Node.js 18+
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/habit-heat.git
cd habit-heat- Install dependencies
npm install- Start the development server
npm run dev- Open your browser
Navigate to
http://localhost:5173to start using Habit Heat!
- Click the "+" button or "Add Habit" on the dashboard
- Choose from pre-made templates or create a custom habit
- Set your habit name, emoji, color, and category
- Configure target days and estimated time
- Add motivational quotes or custom rewards (optional)
- Use the dashboard to quickly mark today's habits as complete
- View your current streaks and completion rates
- Check the mini-heatmap to see recent progress patterns
- Navigate to Insights for detailed analytics
- Check Achievements to see unlocked milestones
- Visit Challenges to take on new goals
- Use Mood Tracker to log emotional well-being
- Toggle between light and dark themes
- Sort habits by various criteria (streak, completion rate, etc.)
- Filter habits by status or priority
- Archive habits you no longer need
- React 18 - Modern UI library with hooks
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Lucide React - Beautiful, customizable icons
- Vite - Fast build tool and dev server
- ESLint - Code linting and formatting
- PostCSS - CSS processing
- Local Storage - Client-side data persistence
- Responsive Design - Mobile-first approach
- Theme System - Dark/light mode support
- Component Architecture - Modular, reusable components
project/ # Frontend React application
├── src/
│ ├── components/ # React components
│ │ ├── HabitCard.tsx # Individual habit display
│ │ ├── HabitDetail.tsx # Detailed habit view
│ │ ├── AddHabitModal.tsx # Habit creation modal
│ │ ├── Login.tsx # User authentication login
│ │ ├── Signup.tsx # User registration
│ │ ├── Header.tsx # Navigation header with logout
│ │ ├── Footer.tsx # Application footer
│ │ ├── Heatmap.tsx # Progress visualization
│ │ ├── MiniHeatmap.tsx # Compact progress view
│ │ ├── HabitStats.tsx # Habit statistics display
│ │ ├── QuickActions.tsx # Quick habit completion
│ │ ├── SelfCareTip.tsx # Wellness tips
│ │ ├── AchievementNotification.tsx # Achievement alerts
│ │ ├── WidgetSettingsModal.tsx # Widget configuration
| | |-- AdvancedFilterModal.tsx # Filter Implementation
| | |-- AuthDebugComponent.tsx # Authorization Debugging
| | |-- FilterSummary.tsx # Summary for all Filters
| | |-- LandingPage.tsx # Component for Landing Page
| | |-- OAuthSuccess.tsx # Component for Success state in OAuth
| | |-- QuickActions.tsx # Quick Actions Tab
| | |-- TimeInput.tsx # Input Component for Profile Page
| | |-- UpdateHabitModal.tsx # Update Habit Component
| | |-- SaveAsTemplateModal.tsx # Save Existing Habit as Template
│ │ └── widgets/ # Dashboard widgets
│ │ ├── CurrentStreakWidget.tsx # Streak display
│ │ ├── DailyCompletionRateWidget.tsx # Daily progress
│ │ └── TotalHabitsCompletedWidget.tsx # Total completion stats
│ ├── hooks/ # Custom React hooks
│ │ ├── useHabits.ts # Habit management logic
│ │ └── useTheme.ts # Theme management
│ ├── pages/ # Page components
│ │ ├── Dashboard.tsx # Main dashboard page
│ │ ├── InsightsView.tsx # Analytics page
│ │ ├── AchievementsView.tsx # Achievements page
│ │ ├── ChallengesView.tsx # Challenges page
│ │ ├── HabitTemplatesView.tsx # Templates page
│ │ ├── MoodTracker.tsx # Mood tracking page
│ │ ├── ProfilePage.tsx # User profile page
│ │ └── NotFound.tsx # 404 error page
│ ├── types/ # TypeScript definitions
│ │ └── index.ts # All type definitions
│ ├── utils/ # Utility functions
│ │ ├── storage.ts # Local storage helpers
│ │ ├── habitStats.ts # Statistics calculations
│ │ ├── achievements.ts # Achievement logic
│ │ ├── challenges.ts # Challenge system
│ │ ├── insights.ts # Analytics generation
| | |-- auth.ts # Manage Authentication flow
| | |-- advancedFilter.ts # Manage Advance Filtering
│ │ ├── habitTemplates.ts # Pre-made habit templates
│ │ ├── motivationalQuotes.ts # Inspirational quotes
│ │ └── dateUtils.ts # Date manipulation utilities
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
| |-- vite-env.d.ts # Declaration File for vite env
│ └── index.css # Global styles
├── public/
│ └── fevicon.png # Application favicon
├── .env.production # Frontend prod environment variables
└── index.html # HTML entry point
backend/
├── src/
| |-- config/
| | └── passport.js # Auth Integration using passport.js
│ ├── controllers/
│ │ └── authController.js # Authentication business logic
│ ├── db/
│ │ └── connect.js # Database connection configuration
| |-- lib/
| | └── cloudinary.js # Configuration for cloudinary
| | └── utils.js # JWT token creation file
│ ├── middleware/
| | └── authMiddleware.js # Middleware for Authentication flow
│ │ └── errorHandler.js # Global error handling middleware
│ ├── models/
│ │ └── User.js # User schema and model
│ ├── routes/
│ │ └── auth.js # Authentication routes
│ ├── app.js # Express app configuration
│ └── index.js # Server entry point
├── .env.example # Environment variables template
├── .env.production # Production environment variables
└── README.md # Server documentation
- HabitCard: Displays habit summary with mini-heatmap
- HabitDetail: Full habit view with detailed statistics
- AddHabitModal: Streamlined habit creation process
- InsightsView: Comprehensive analytics dashboard
- HabitStats: Advanced statistics calculations
- Progress Tracking: Visual progress indicators
- AchievementsView: Achievement gallery and progress
- ChallengesView: Active and available challenges
- Achievement System: Automated milestone detection
- Local Storage: All data stays on your device
- No Tracking: No analytics or user tracking
- Offline First: Works completely offline
- Data Control: Export/import your data anytime
Pre-configured habits across categories:
- Health & Fitness: Exercise, water intake, healthy eating
- Learning: Reading, language practice, skill development
- Mindfulness: Meditation, gratitude journaling
- Digital Wellness: Screen time limits, no-phone mornings
Unlock achievements for:
- Creating your first habit
- Maintaining streaks (7, 30, 100+ days)
- Achieving perfect completion rates
- Building multiple habits
- Consistency milestones
- Streak Challenges: Build long-term consistency
- Completion Challenges: Hit specific targets
- Multi-Habit Challenges: Complete multiple habits daily
- Consistency Challenges: Maintain high completion rates
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes following our coding standards
- Test your changes locally
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request using our PR template
- Fill out the PR template completely
- Include screenshots for UI changes
- Write clear commit messages
- Ensure all tests pass
- Update documentation if needed
- Follow TypeScript and React best practices
# Clone your fork
git clone https://github.com/yourusername/habit-heat.git
cd habit-heat
# Install dependencies
npm install
# Start development server
npm run dev
# Run linting
npm run lint
# Build for production
npm run buildThis project is licensed under the MIT License - see the LICENSE file for details.
- Icons provided by Lucide React
- Built with Vite and React
- Styled with Tailwind CSS
- Inspired by habit tracking methodologies and gamification principles
If you encounter any issues or have questions:
- Open an issue on GitHub
- Check the documentation in the
/docsfolder - Review the TypeScript definitions in
/src/types
Start building better habits today with Habit Heat! 🔥
Turn your daily routines into powerful habits that stick.