TaskPals

Inspiration

We wanted to make productivity more fun and engaging. Traditional to-do lists can feel boring, so we thought, why not add some excitement? By gamifying the process, we created a to-do list where completing tasks helps a virtual pet grow and evolve. This idea was inspired by the way games use rewards and progress to keep players motivated. We wanted users to feel the satisfaction of progress, not just in their tasks but in their journey with virtual pet too!

What it does

This app turns to-do list into a fun, interactive experience! As you complete tasks, you help your virtual pet grow through different stages.

Users can:

Add new tasks
Toggle tasks as done or undone with a simple click
Delete tasks when they’re no longer needed

Each completed task fills up a progress bar, while undone tasks reduce it. As your pet evolves through different stages, you'll be rewarded with a new pet once it reaches the final stage. It’s a playful way to stay productive and watch pet grow!

How we built it

The app was built using React for the front end, with React Hooks used to manage state and handle effects. We use Lottie for animations and JavaScript for app logic. Before development, we used Figma to design the user interface. The design process helped us refine the visual style, layout, and interactions, making the app more user-friendly and motivating.

Challenges we ran into

Managing the complex logic for evolving pets across different stages while also tracking multiple tasks in the to-do list.
We didn’t handle the case where a pet has already evolved, but the user undoes a task, which could affect progress tracking.

Accomplishments that we're proud of

Creating a gamified experience where completing tasks feels rewarding and visually impactful.
Designing an interface in Figma and successfully transform it into a functional React application.

What we learned

Managing complex state when dealing with interactive elements like to-do lists, progress bar, and evolving pets, especially when multiple components need to stay in sync.
Efficiently use React Hooks e.g. useState, useEffect to handle state changes
Design using Figma to visualize UI concepts, which helped us define the app's interface before implementing.

What's next for Untitled

Add Achievements: Track and display milestones such as the number of completed tasks or pets fully evolved.
Pet Collection System: Introduce a collection feature where users can unlock different pets with varying rarity (common, rare, legendary) and view them in their collection.
Social sharing: Allow users to share obtained pets or achievements on Instagram Stories, Facebook Feed, or other social platforms.
UI Improvement:
- Edit task title
- Drag-and-drop tasks: Allow users to reorder tasks
- Task sorting: Let users filter task, for example, by completed/undone or by date
- Label tasks with color: Users can assign a color to a task to easily categorize or prioritize tasks.