Tamagotchi Habit Tracker

Overview

We are a team of 4 students at University of California, Irvine (UCI) taking the class Informatics 124. As part of our coursework, we created a project to help users build better habits. Inspired by the classic Tamagotchi virtual pet, this app turns habit tracking into a cozy, gamified experience. As users complete habits, their digital pet thrives in an environment that reflects real-world weather based on their current location.

Team Members

Yukai Shan, Karen La, Erick Guerrero, Calvin Phan

Tools

React + Vite, Tailwind, Python, Node.js, Supabase, Netlify

Description

The Tamagotchi Habit Tracker allows users to log in, pick a virtual pet, and begin tracking personalized daily habits. The user interface includes a dashboard where habits can be added, marked as complete, or removed. As habits are completed, visual feedback such as streak counts, pet statistics, and randomized motivational messages are displayed to encourage consistency. The pet’s world reacts dynamically based on the user’s local weather using real-time API data and the time of day. The application emphasizes motivation and consistency, all while using modern web development features like responsive design, real-time updates, and API integration.

This project include features like:

User authentication and secure login
Responsive mobile and desktop interface
Interactive UI components such as modals and streak tracking
Integration with external services (weather API)
Real-time visual feedback based on user actions
Personalized user experience through customizable pet and settings

Development Process

Our team followed a structured, collaborative development process and timeline with a clear division of tasks across design, frontend, and backend phases. The first two weeks focused on defining the app's requirements and designing wireframes. We then spent three weeks building the React frontend, followed by four weeks developing the backend and handling deployment. This timeline allowed us to iteratively design, build, and test features while ensuring we met all core application requirements.

We used a variety of tools to plan, design, and organize our progress effectively.

Jira

We used Jira to manage tasks, assign roles, organize project, and track progress using Kanban boards. User stories were created to outline the core features from a user’s perspective. This helped us break the project into manageable tasks like UI design, feature planning, and requirement documentation. This structure kept the team aligned and ensured smooth transitions between each phase of development. Jira helped us:

Assign roles and responsibilities
Monitor task progress (To Do → In Progress → Done)
Coordinate deadlines and dependencies across design and development phases

Figma

We used Figma as our primary tool for UI/UX design and for wireframing and prototyping. Our team collaboratively created more than 10 wireframes, including pages for login, register, dashboard, pet selection, progress tracking, and error handling. This visual planning phase helped ensure that development began with a clear, user-centered interface. Figma enabled us to:

Design responsive layouts for both desktop and mobile
Maintain visual consistency through reusable components
Collaborate in real-time and gather team feedback efficiently

Use Case Diagram

We created a use case diagram to illustrate the core interactions between the user and the system. It highlights key functionalities such as registering or logging in, selecting a pet, managing daily habits, customizing settings, and logging out.

Sitemap

We created a sitemap to understand the hierarchical structure of the website that is being developed. It outlines the overall structure and navigation flow of the application.

Final Product

Register

New users can register by creating an account with basic information like email, username, and password. This sets up their habit tracker and unlocks pet selection.

Login

Allows returning users to securely sign in to their account using their email and password. Successful login leads directly to the pet dashboard with saved habit progress.

Choose Pet

Lets users select their own companion from a set of cute pixel pets. This pet will appear on their dashboard and respond to habit completion.

Profile

Displays the user's personal information, including username, pet name, pet level and number of habits completed. Achievements are also in profile page that can be unlocked through completing habits, streaks, and leveling up pet.

Dashboard - Habit List

Displays the user's current habits with options to add, edit, delete, or mark them complete. The user’s habit completion progress displayed as a visual bar.

Dashboard - Weather

Integrates real-world weather using a weather API and geolocation. The weather background changes to reflect current local weather (e.g., rainy, windy, snowy, sunny).

Dashboard - Time of Day

Updates the day of time environment visuals based on the user's local time (e.g., morning, noon, sunset, evening, midnight).

Dashboard - Pet Stats

Shows the pet's stats and can increase as habits are completed.

Dashboard - Status Card

Displays a message of encouragement or positivity each day. Also includes a short, expressive message from the pet based on the user’s activity.

Leadership

Compares user habit progress, pet levels, and streaks with others in the community. Users can see how they rank among friends or globally.

Friends

Allows users to add friends and view their progress summaries. Fosters social connection and accountability

Notifications

Sends alerts for completed habits, pet level ups, streak milestones. These alerts can be toggled on or off in the settings.

Help

Provides guidance on how to use the core features, such as adding habits, tracking progress, and making pet happy. It includes frequently asked questions (FAQs) and quick tips for success.

Settings

Users can update their location, visual theme, export data, and delete their account.

Project Demo

Page updated

Report abuse