Bootstrap

Tamadoro: A Chrome Extension

CIS 3500 Final Project by Amanda Lee, Ash Fujiyama, Gabby Gu, Sydney Simon


Download

Gamifying Your Focus Time

Motivate yourself to focus on tasks by keeping a Tamagotchi-inspired pet alive in your Chrome Browser.

Task Organization

Keep track of your assignments through Tamadoro's task list feature. Set time goals and deadlines and view them easily in the list.

Tamagotchi-Inspired Design

Bring yourself back to the nostalgia of early 2000s through our Tamagotchi-inspired interface.

User Stories

  • As a student, I want to choose an egg to hatch so that I would be motivated to do work to hatch it.
  • As a user, I would like to choose a new egg so that the novelty would motivate me in the middle of the school year.
  • As a student, I would like a stopwatch feature so that I can work uninterrupted by timers.
  • As someone who is concerned about my productivity over time, I want to sum the time I have spent working so that I can track how much time spent on a single task or project.
  • As a student with multiple homework assignments, I want to track multiple tasks or assignments so that I don't neglect one task while I am currently focused on another.
  • As someone who struggles with procrastination, I want an accountability feature that would make me spread out my work over multiple days so that I am not rushing to finish by the deadline.
  • As someone with multiple things to do, I want a feature that will mark priority or urgency so that rewards and punishments scale with the importance of the task.
  • As a student, I want the timer to work like a pomodoro so that I can factor in breaks and not burn out.
  • As an animal-lover, I want food/treat mechanics for when I complete objectives so that I can use positive reinforcement for continuing to focus.
  • As someone who needs flexibility, I want to be able to change the length of the timer for focus and breaks so that I can create long and short focus sessions.
  • As a student who studies for extended periods of time, I want an option to take long breaks when I have completed a certain number of objectives
  • As an animal enthusiast, I would like to level up or grow my pet for positive motivation for working.
  • As someone who works late nights, I would like the option to toggle between light and dark mode so that I reduce my eyestrain.
  • As an educator, I would like for the mechanics to be child-friendly and fun so that I can introduce time-management to my younger students.
  • As a student, I would like to be notified when I can take a break so that I am not constantly checking the timer when it is done.
  • As a busy student, I would like to schedule study sessions in advance for certain tasks, and get notifications for when that time comes.
  • As a user, I would like switch between the sidebar and timer badge to minimize distractions while working.
  • As a student who has trouble focusing while doing homework, I want to set a daily time goal for me to do homework.
  • As a student who has an exam coming up, I want the extension to keep me on track the day before.

    • Post-Mortem Analysis: Tamatimer

    Introduction
    Building Tomatimer was an exciting yet challenging project. The goal was to create a timer that helps users manage their time effectively using the Pomodoro Technique. We also wanted Tamatimer to gamify focus time and implemented this with the use of a pet that users keep alive. Throughout the development process, several lessons were learned as we decided which features to implement, what tech stack to use, and what each teammate's roles would be.

    Planning Process
    Before diving into development, we took the time to plan the various aspects of Tamatimer we wanted to implement. We brainstormed and listed out all the features we envisioned, including customizable timer durations, pause functionality, and mode switching. Additionally, we explored the idea of incorporating gamification elements, such as taking care of a virtual pet to make the timer experience more engaging. With a clear roadmap in place, we selected React as our frontend framework and Chrome Storage for data storage based on teammate experience and the needs of the project. Since we are storing little data other than user input, local chrome storage was the best option as opposed to using an external database.

    Essentials Decisions
    Feature Selection: The decision to include features like customizable timer durations, pause functionality, and mode switching was based on the core principles of the Pomodoro Technique. We also decided to include gamification features like feeding the pet and updating health to ensure we have an extrinsic motivational factor. We realized that with the time constraints and constraint in team abilities, we needed to focus on the features that were most essential for our chrome extension.

    Technology Stack: Our decision to use React and Chrome Storage was driven by familiarity and efficiency. We wanted to leverage reliable technologies that would ensure seamless performance and user satisfaction.

    Lessons Learned
    Open Communication is Essential: Open Communication: Maintaining open and frequent communication among team members was essential for the success of Tamatimer. Regular meetings and updates allowed us to stay aligned, address challenges, and celebrate milestones together.

    Adaptability is Important: We quickly realized that not all of the features envisioned would be executable so we had to narrow down our feature selections. Some of the features we did not include is switching your pet, user settings to include duration and a stopwatch feature, and pet interaction. With the final features that we decided to focus on, we no longer saw a need to have both a sidebar and a popup window. Because of the need for the pet and task selection, we decided to only work on a sidebar to implement these necessary features.

    Challenges
    We struggled with integrating local chrome storage with the code to enable timer persistence and storage of essential timer variables. The variables were not being reset properly after reopening the chrome extension. To fix this problem we implemented a DFA like structure to solidify state management involving extension unmounting. See the below image for the state breakdown.