Chirp - Pocket Motivator

Take care of an adorable online companion while finishing your daily tasks!

Comment

Inspiration

Inspired by the iconic Tamagotchi pets of the early 2000s and self-care apps such as Finch, we wanted to add a playful twist to the familiar to-do list. Add a task you wish to accomplish for the day, and watch our algorithm suggest the perfect time to complete it! With our app, finishing goals has never been easier and satisfying - especially when you have a little bird (named Chirp) cheering you on.

What it does

  1. Start your day by adding tasks to your to do list, pick the name, duration, and time to complete (or use our suggestion)
  2. Receive notifications throughout the day when its time to complete your task, checking them off as you go
  3. Add or remove goals freely throughout the day
  4. Receive a final report at the end of the day based on how many tasks you completed!

How we built it

We leveraged several tools throughout the process of developing this prototype. The majority of wire framing was done through Figma, allowing the team to resolve conflicting design requirements, and explore potential features. We also designed many of the assets through this platform as well, such as the various icons and mascot. When actually implementing our vision, we chose to keep frameworks and library on the minimalistic side, sticking to robust libraries that would cover the core functionality we required. For example, when it came to component design, we stuck to Tailwind CSS, and for SVG animation, we used GSAP. Finally, when it came to development hosting we utilized NGROK, and ran the prototype as PWA on mobile. Along with these technologies, we approached Chirp with a test-centric methodology, prioritizing error detection highly. We believe this lead to a speedy development process!

Challenges we ran into

  • There was definitely some challenge in animating the mascot, as none of us have a design background. Although not perfect, we landed with a pretty decent final prototype!
  • iOS puts several restrictions on PWAs, so it was somewhat of a challenge to design around those limitations.
  • Merge conflicts, as always ...

Accomplishments that we're proud of

Although all of us were new to hackathons, we were able to accomplish a lot in this project. Some of the key signifiers of success for the team were the mascot design, which we worked together to deliberate upon, the clean and easy to understand interface, and finally our ability to collaborate effectively.

What we learned

We all were able to further develop our proficiency in React, and the nuances of key features such as state hooks. We also were able to explore previously unfamiliar libraries, such as GSAP.

What's next for Chirp - Pocket Motivator

We could potentially add more functionality, such as building affection levels with Chirp, login streaks, and adding friends!

Built With

Share this project:

Updates