Habit House

• 

  Habit House Widget Demonstration

Team members

Ruiqi Zhao ruiqizhao@student.unimelb.edu.au 1615700

Jiaqi Shu stellashu27@gmail.com 1491346

Ziyi Cheng ziyicheng@student.unimelb.edu.au 1616322

Inspiration

We were inspired by the cozy and rewarding world of Animal Crossing. Many habit trackers on the market are functional but lack warmth and motivation. We wanted to create something that feels comforting and fun—like watching your space grow as you grow. That’s how HabitHouse was born.

What it does

HabitHouse is a compact habit-tracking widget that turns daily task completion into a rewarding visual journey. Users can add tasks to a to-do list and watch their in-game house upgrade with each task completed. A streak system tracks daily consistency, and each task can have an optional reminder time to notify users when it's time to complete it. A simple button lets users move on to the next day, resetting tasks while keeping progress and streaks intact.

How I built it

The project was built using React for the frontend and TailwindCSS for styling. We used localStorage to persist user data like tasks, habit progression, and streaks. All game logic, including task handling, streak calculation, and reminders, was implemented with custom React hooks and state management. We incorporated Animal Crossing-style assets to create a calm and motivating visual theme.

Challenges I ran into

The main challenge was implementing a streak system that accurately resets and updates across different days. Managing reminders for individual tasks in real time also required careful handling of browser time. Additionally, it took time to balance the widget’s compact design with the desire to show meaningful progress visually, especially as tasks grew in number.

Accomplishments that I'm proud of

We successfully created a functional, animated widget that encourages users to complete their goals. It’s lightweight, easy to use, and visually satisfying. We're especially proud of how well the house upgrades work to provide visual feedback and how the streak logic reinforces daily consistency.

What I learned

Throughout the project, we learned how to manage time-based logic in React effectively, and how to design compact components that are both responsive and extensible. We also deepened our understanding of how gamification can be integrated into productivity tools to create a more engaging user experience.

What's next for HabitHouse

We’d like to add customizable characters, more interactive house upgrades, and achievement badges. We’re also considering analytics to help users track their long-term progress and motivation. In the future, we aim to make HabitHouse available as an open-source widget and possibly evolve it into a mobile-friendly Progressive Web App.

Built With

• javascript
• react