My Habit Pets

Build better habits by taking care of adorable virtual pets that grow, evolve, and react based on your daily consistency.

Comment

🐾 Habit Pets

Inspiration

I’ve always struggled with consistency. I would start a new habit feeling super motivated, but after a few days I’d lose interest. Most habit-tracking apps felt too robotic to me — just checklists, graphs, streaks, and notifications. They worked, but they never made me feel connected to the process.

One day I was thinking about old virtual pet games I used to play as a kid, and I wondered:

“What if building habits felt like taking care of a living companion instead of completing tasks?”

That idea became Habit Pets.

I wanted to create something where users could emotionally connect with their progress. Instead of forcing discipline, the app tries to make consistency feel fun, rewarding, and personal.

What It Does

Habit Pets is a gamified habit-tracking web app where every habit is represented by an adorable anime-style virtual pet.

When users complete their habits, they “feed” and take care of their pets. The more consistent they are, the healthier and happier their pets become. If they stop showing up, the pets become sad or sick.

Users can:

  • Create habits
  • Assign pets to habits
  • Build streaks
  • Unlock evolutions
  • Customize pets with accessories
  • Generate AI-powered custom pets
  • Track mood, health, and progression

The goal is to make habit-building feel emotional instead of repetitive.

How I Built It

I built Habit Pets using React, TypeScript, and Vite for the frontend, with Tailwind CSS and shadcn/ui for the design system and UI components.

For the backend, I used Supabase with:

  • PostgreSQL database
  • Authentication
  • Edge Functions

I also used:

  • Framer Motion for animations
  • React Context API for state management
  • React Router for navigation
  • Kling AI for generating custom pet images

One thing I focused on a lot was making the app feel alive. Small details like animations, mood reactions, greetings, hover interactions, and evolution effects made a huge difference in the overall experience.

Challenges I Faced

The hardest part of the project was definitely the Dress Up Pet system.

At first, I tried supporting multiple accessories at once, but the image mapping became really messy. Every accessory combination needed separate styled images, and many combinations didn’t exist, which caused broken visuals and fallback problems.

After a lot of testing and debugging, I redesigned the system to support:

  • Smarter fallback logic
  • Prebuilt style mappings
  • Image preloading
  • Single-accessory optimization
  • Graceful fallback behavior

Another challenge was AI image generation. APIs can fail, take too long, or not be configured correctly, so I had to build proper error handling and even a full demo mode that still works without AI generation enabled.

That taught me a lot about building systems that are reliable in real-world situations.

What I Learned

This project taught me much more than just coding.

I learned:

  • Full-stack application development
  • Database design
  • Authentication systems
  • API integration
  • State management in React
  • Performance optimization
  • Error handling and fallback systems
  • UI/UX design principles
  • Gamification psychology

More importantly, I learned how much small user experience details matter. Tiny things like smooth transitions, emotional feedback, and interactive animations can completely change how users feel while using an app.

Future Plans

I still have a lot of ideas for Habit Pets.

Some features I want to add in the future:

  • Multiplayer interactions
  • Friend systems
  • Pet trading
  • Rare pets and collectibles
  • Mobile app support
  • Push notifications
  • Mini games
  • More AI customization
  • Seasonal pets and events

I also want to make the evolution system deeper and create more ways for users to bond with their pets over time.

Final Thoughts

Habit Pets started as a simple idea, but it slowly became one of the projects I’m most proud of.

I wanted to build something that makes self-improvement feel less stressful and more enjoyable. Instead of treating habits like chores, Habit Pets turns them into relationships users actually care about.

If the app can help even a few people stay consistent while having fun, then I’d consider it a success.

Built With

  • auth
  • context-api-state-management
  • edge-functions
  • edge-functions)
  • enhanced-with-framer-motion-animations
  • framer-motion
  • kling-ai-api
  • postgresql
  • powered-by-supabase-(postgresql
  • react-router
  • shadcn/ui
  • styled-using-tailwind-css-and-shadcn/ui
  • supabase
  • supabase-auth
  • tailwind-css
  • typescript
  • vite
Share this project:

Updates