Habit-Hero-V2

Level up your life

Comment

Inspiration

What it does

How we built it# 🏆 Habit Hero

Level up your life through the power of consistent habits

Habit Hero transforms daily routines into an engaging, gamified experience. Build lasting habits, track your progress, and unlock your potential with beautiful gradients, motivational quotes, and achievement-based rewards.

✨ Features

🎮 Gamified Experience

  • XP & Leveling System: Gain experience points and level up as you complete habits
  • Streak Tracking: Build momentum with visual streak counters
  • Achievement Badges: Unlock rewards for consistency and milestones
  • Hero Progression: Start as "Level 1 Hero" and advance through dedication

📊 Comprehensive Analytics

  • Daily Progress: Real-time completion tracking with beautiful progress bars
  • Weekly Reports: Detailed insights into your habit-building journey
  • Category Breakdown: Organize habits by Health, Learning, Fitness, and more
  • Mood Tracking: Monitor your emotional well-being alongside habit completion

💫 Motivational Features

  • Daily Inspiration: Curated motivational quotes to start your day
  • Personal Affirmations: Positive reinforcement for your growth mindset
  • Progress Celebrations: Visual feedback for completed habits
  • Encouragement Messages: Adaptive messaging based on your performance

🎨 Beautiful Design

  • Gradient Aesthetics: Stunning visual design with custom gradients
  • Responsive Layout: Seamless experience across desktop and mobile
  • Dark/Light Themes: Comfortable viewing in any environment
  • Intuitive Navigation: Easy access to Dashboard, Analytics, Achievements, and more

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn package manager

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/habit-hero.git
cd habit-hero

  2. Install dependencies

    npm install

  3. Start the development server

    npm run dev

  4. Open your browser Navigate to http://localhost:3000 to start building your habits!

🎯 How It Works

1. Create Habits

Set up your daily routines with custom emojis, categories, and goals.

2. Track Progress

Mark habits as complete and watch your streaks grow.

3. Earn Rewards

Gain XP, unlock achievements, and level up your hero status.

4. Analyze Growth

Review detailed analytics to optimize your habit-building strategy.

5. Stay Motivated

Enjoy daily quotes, affirmations, and progress celebrations.

🛠️ Tech Stack

  • Frontend: React 18, TypeScript, Tailwind CSS
  • Routing: React Router
  • UI Components: Radix UI primitives
  • Icons: Lucide React
  • Build Tool: Vite
  • Storage: Local Storage (extensible to cloud)

📱 Screenshots

Dashboard Analytics Motivation
Track daily progress and habits Detailed insights and trends Daily quotes and affirmations

🎨 Design Philosophy

Habit Hero believes that building habits should be:

  • Visual: Beautiful gradients and animations make progress tangible
  • Rewarding: Gamification elements celebrate every small win
  • Personal: Customizable categories and mood tracking for individual needs
  • Inspiring: Daily motivation keeps you focused on your goals

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Guidelines

  • Follow TypeScript best practices
  • Use Tailwind CSS for styling
  • Write clean, readable code with proper commenting
  • Test your changes across different screen sizes

🚧 Roadmap

  • [ ] Cloud Sync: Cross-device habit synchronization
  • [ ] Social Features: Share achievements with friends
  • [ ] Custom Themes: User-defined color schemes
  • [ ] Advanced Analytics: Machine learning insights
  • [ ] Habit Templates: Pre-built habit categories
  • [ ] Reminder System: Smart notifications
  • [ ] Export Data: Backup and data portability

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Support

If Habit Hero helps you build better habits, consider:

  • ⭐ Starring this repository
  • 🐛 Reporting bugs and issues
  • 💡 Suggesting new features
  • 🤝 Contributing to the codebase

📞 Contact

**Built with ❤️ by developers who believe in the power of small, consistent actions** *Start your journey today. Level up your life with Habit Hero.*

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Habit-Hero-V2

Built With

Share this project:

Updates