A gamified to-do list that makes productivity fun!

TaskPals turns your tasks into a game! Complete to-dos to help your virtual pet grow and evolve. Stay motivated as you watch your pet progress through different stages.

🛠️ Submitted to Hackiethon 2025 Widget Challenge – Theme: Productivity

🔗 View our submission on Devpost

TaskPals transforms your to-do list into an interactive experience!

✅ Add new tasks
✅ Toggle tasks as done/undone with a click
✅ Delete tasks when no longer needed
✅ Track progress with a progress bar
✅ Evolve pets by completing tasks

Once a pet reaches its final stage, you get a new pet to raise—making productivity fun and rewarding!

• Frontend: React with React Hooks for state management
• Animations: Lottie for smooth visual effects
• Logic: JavaScript for progress tracking and pet evolution
• Design: Figma for UI/UX planning before development

• Handling the logic for evolving pets while keeping progress accurate
• Ensuring seamless interaction between tasks, progress bars, and pet evolution
• Limitation: If a pet has evolved, undone tasks don’t revert the evolution (future fix!)

✔️ Built a gamified productivity app that makes task completion rewarding
✔️ Designed a clean and engaging UI in Figma and implemented it in React
✔️ Created a user experience with animations

• Managing complex state with React Hooks (useState, useEffect)
• Designing intuitive UI/UX before coding
• Balancing gamification with usability

• Track and display completed tasks and evolved pets

• Unlock pets with different rarities (Common, Rare, Legendary)
• View collected pets in a collection screen

• Share obtained pets and milestones to Instagram Stories, Facebook Feed, etc.

• Edit task titles
• Drag-and-drop tasks to rearrange order
• Sort/filter tasks (by completion status, date, priority)
• Color-coded labels for easier task organization

The Hackiethon2025 Widget Challenge is a coding competition aimed at enhancing students' enthusiasm for programming, strengthening their understanding of fundamental web development concepts, and fostering creativity and imagination.

Participants will create React.js widgets, which are customizable, reusable, and interactive components that can be integrated into the provided HackMelbourne sample website or any other specified website that support React.js.

• Encourage students to engage in hands-on web development through a competitive yet educational challenge.
• Strengthen understanding of JavaScript components and web-based application development.
• Promote creativity by allowing participants to develop unique and useful widgets.
• Provide practical experience that can help students build real-world web applications.

1. JavaScript Widget Development

   • Participants will build custom React.js components (widgets).
   • These components must be self-contained and reusable while maintaining a clean structure.
   • Widgets must return a <div> element that can include attributes, event listeners, and interactivity.
   • Refer to the example widgets in the repo for the expected structure

2. Widget Compatibility & Integration

   • Widgets should be adaptable to work with our sample website or any existing site.
   • You are allowed to use external libraries
   • If you do use external libraries, please note down the CLI command to install any dependencies, such as "npm install [dependency]"

3. Evaluation Criteria

   • Most innovative (function-wise)

     • How unique is the idea behind this widget
     • Does it solve a unique problem

   • Best design (UI/UX)

     • Easy to use, responsive
     • Aesthetics of the widget is well thought out and generally looks good
     • Is interactive and dynamic, such as by using animations and transitions

   • Most useful

     • How well does this widget solve a common problem or annoyance with regards to the theme, i.e.
     • How well does it improve productivity
     • If this would be released as a browser extension, how likely are end-users to download it

   • Community vote

     • To be done using DevPost’s voting system
     • In order for a team to win the community vote, they need to submit a short video showcasing their widget on their submission page.
     • Your widget doesn't have to be the best, or even be good. You just need to convince the other participants that your widget deserves to win!

To prepare your environment, follow these steps:

1. Clone the repository (RECOMMENDED)

   • Make sure you have the GitHub Desktop app installed
   • In the Hackiethon2025 GitHub page, clone the repository by opening it in GitHub Desktop

   or, by using CLI command,

   gh repo clone HackMelbourne/Hackiethon25

2. Install dependencies (if applicable) (Step 2a) Before you can run the local server, you need to have node and npm set up. Download Node.js from https://nodejs.org/en and follow the instructions in the setup wizard.

   Then, verify that you have installed node and npm by:

   • Opening your command prompt (cmd on Windows) with Administrator privileges (Run as Administrator)
   • Run:

   •  node -v
      npm -v
     

   • If they both show version numbers, then you have successfully installed Node.js and npm

   (Step 2b) Now, navigate to the project repository. Make sure you are in "Hackiethon2025/showcase-site"

   Run the following command:

   npm install

   If this doesn't work, try:

   • Opening the "Hackiethon2025/showcase-site" directory in your command prompt in Administrator mode (same as step 2a)
   • Run the command again
   • If this works, then whenever you need to run a command, you need to run it in the command prompt with Administrator privileges

3. Run the development server

   npm run dev

   If it crashes or fails to start dev server, try:

   • restarting VSCode
   • running the commands in admin cmd
   • delete node_modules, run npm install and npm run dev again

   If it succeeds, then it will display a localhost server, such as "http://localhost:1234/" Copy and paste this into your browser of choice and it should render automatically. While the server is up, whenever you save a change to your source code, the webpage should re-render and you will see your change take place, so there is no need to restart the server (unless something crashes)

4. Develop your widget

   • Follow the [Example Widget Development Guide] for learning how to develop a widget with API calls.
   • Ensure your widget meets the competition criteria.

5. Submit your widget

   • Submit your widget as a jsx (and any additional css, jsx or image files) to the devpost:
   • Follow the [Submission Guidelines].
   • Make sure to test it on the showcase site first -- this is where we'll be primarily juding your widget

For the most part, you should only be writing code + adding files into the "showcase-site/src/submission-widgets" directory

/src                            # Main source code of project
│── /submission-widgets         # Place your widget and extra files here
│── /widgets                    # Directory for sample widgets
│── /assets                     # Some assets
│── Widget-Development.md       # Sample widget development
│── Submission-Guidelines.md    # Submission Guidelines
...                             # Other source code files for rendering the website (please dont touch these)

• Widget Development Guide – Learn how to structure and build your widget based on this example widget.
• Submission Guidelines – Instructions on how to submit your widget and overall expected structure.
• Decoded Notion Page – Resources from Decoded.
• Showcase Site Tutorial - Instructions on how to use the showcase site

1. Just upload into the submissions-widgets directory. It should automatically render if no issues show up.
2. If there are rendering issues, the localhost server should be blank. Right click on the page, go to Inspect Element, and errors can be debugged via the error messages
3. If there are still errors, please feel free to reach out in our official discord (hack.melbourne/discord)
4. To check how your widget is rendered on the page, and how to use the showcase site, check Showcase Site Tutorial