HABITMON

Need some buddies to accompany your journey? An interactive monster collector that structures your skill learning.

Comment 50

Inspiration

Learning a new skill is difficult, especially after the initial excitement fades. Many productivity apps begin to feel like chores, making it hard for users to stay consistent.

Another common problem is feeling overwhelmed when starting something new. Learners often face a huge amount of information and fall into “tutorial hell,” where they consume content but struggle to make meaningful progress.

We wanted to solve these problems by creating an experience that makes personal growth fun, structured, and rewarding. Habitmon generates a personalized learning path with clear and actionable steps, while rewarding progress with collectible monsters to keep users motivated and engaged.

What it does

Habitmon gamifies the process of learning a new skill.

Instead of overwhelming users with a large goal, the app breaks the learning journey into small, manageable tasks that can be completed quickly. Lumi, a fairy companion, acts as a guide, presenting the user with their next task once the current one is completed.

When the user finishes a task and clicks “Complete Task,” they receive a random monster through a gacha system. Each monster has a rarity level, making the reward system exciting and unpredictable.

Collected monsters are added to the user’s field, a space where all their creatures roam and interact. As users complete more tasks, their field gradually fills with more monsters, visually representing their progress and growth.

Monsters also have the ability to help you revise. Every day, the monsters on the field will have an exclamation mark above them, indicating that they have a question for you. Regardless of whether you get the question right or wrong, the monster will be happy that you are revising what you have learnt :).

How we built it

We started by defining the core idea of Habitmon: turning skill development into a game-like experience where users progress through a roadmap while collecting monsters. After agreeing on the concept, we quickly divided roles within the team so everyone could focus on different parts of the project, such as frontend development, asset preparation, backend, and the presentation. From there, we followed a rapid prototyping workflow to build a functional version of the app.

The frontend was built using React, allowing us to create dynamic components such as the text box, the gallery, and the field where monsters roam. We integrated pixel-art monster assets and prepared them as GIFs so they could be used in the interface. A gacha animation system was built using CSS keyframes to reveal monsters with a spinning silhouette reel that decelerates and locks onto the earned creature. Monsters wander the habitat using a walking system that picks random positions on a timer with smooth CSS transitions. A localStorage persistence layer saves all game state including owned monsters, quest progress, and monster positions across sessions (of course, if this were a real product, some of these would be stored in a database instead). The gallery panel tracks collection progress with owned monsters shown in full colour and unowned as silhouettes. Lumi delivers quests one at a time through a dialogue box at the bottom of the screen. Learning resources are fetched per quest and displayed as clickable links, and monsters ask revision questions on first interaction using AI-generated multiple choice questions from the backend.

The backend was built using Python and Flask, which provided a lightweight framework for exposing REST APIs that connect the frontend with the search and generation services. We integrated Elasticsearch as the core retrieval engine, where structured datasets containing skills, roadmap steps, learning resources, and topic relationships were indexed. When a user enters a query such as “I want to learn Python,” the backend sends the request to Elasticsearch to identify the most relevant skill and retrieve the corresponding learning roadmap.

To enhance the learning experience, we also integrated the ChatGPT API in the backend. The model is used to dynamically generate revision questions and help surface relevant learning resources based on the user’s selected topic. Instead of relying purely on static content, the system can generate contextual practice questions and explanations that align with the roadmap steps. This combination of retrieval through Elasticsearch and generation through the ChatGPT API allows the platform to provide both structured learning paths and interactive learning support, ensuring the resources and questions remain relevant to the user’s learning progress.

Challenges we ran into

  • Some of us live quite far from each other, so we had to do most of the development online through Discord, which we think hinders communication.
  • We have four inexperienced developers, and five of us had never been to a hackathon before. As such, heavy burdens were placed on the backend developer while the inexperienced members had to learn very very quickly.
  • A lack of sleep was also hindering our progress. Some members only managed about 3 hours of sleep before the hackathon and even less during it.

Accomplishments that we're proud of

Considering that we started with almost no prior knowledge, we are proud of nearly everything we achieved in this project. Despite the steep learning curve, we managed to build a functional prototype that reached roughly 85% of our original vision.

Along the way, we gained hands-on experience with systems such as gacha mechanics, Elasticsearch, React, APIs, and other tools that were completely new to us. Seeing our idea turn into a working product within such a short timeframe was a major accomplishment for our team.

What we learned

On the social side, we learned how to stay calm and organized under pressure. Working within a strict time limit taught us how to communicate efficiently, divide tasks effectively, and quickly form a clear plan as a team. We also learned the importance of working in parallel to reduce dependencies as much as possible.

On the technical side, we learned many new concepts and tools, including how gacha systems work, how Elasticsearch can be integrated into a project, the syntax and structure of React applications, and how to use AI APIs and prompt engineering to support development. Overall, the hackathon became an intense but extremely valuable learning experience for our entire team.

What's next for Habitmon

In the future, we plan to expand the game by adding more creatures with unique designs, personalities, and rarities to make collecting monsters more exciting and rewarding.

We also want to introduce more social features to make the experience more interactive. For example, players could let their pets battle their friends’ monsters or visit their friends’ habitats to see their collections and progress.

Beyond that, we aim to further develop the learning system by improving the quality and accuracy of the tasks given by Lumi. Overall, the goal is to continue building Habitmon into a more engaging platform where learning, collecting, and social interaction come together.

Built With

+ 103 more
Share this project:

Updates