ProcrastiCat

Inspiration

All of us have struggled with procrastination to a certain extent, and all of us love cats, so we had the idea to create an app that combines those things together: ProcrastiCat. We’ve tried anti-procrastination tools before, but they tend to be boring, lacking in incentive and color, so we set out to create a beautiful website (specifically for mobile devices so that we can minimize distractions further) that we can actually use in our daily life.

What it does

Our website has four main features. The first feature is a timer, of course, to time our studying. Users can choose between four timers based on their own studying habits. The highest timer is set to 60 minutes because we believe studying for an hour straight takes a toll on one’s mental health. Our second feature is a to-do list (AKA “See Sched”) that has cute decorations to motivate you to plan our your day. Our third feature is a “breaks” tab where you can choose out of four times for breaks depending on what your brain needs. Lastly, the final tab is the “Dress up my cat” tab which we are the most excited about. Using points that users accrue as they study, they can buy cute outfits for their cats. This is what makes our site different from all of the others. We have provided a clear incentive for students like us to study. The cat is like a study buddy for the user. Often, our real-life study buddies may be busy doing other things. That’s when our main cat, currently named Lilac after our purple color, comes into play. You can dress her up, see her as you study, and hopefully in the future, talk to her!

How we built it

We used Figma, Framer, GitHub, VSCode, and HTML! We used Figma to develop the UI. We then used the Framer plug-in to convert the UI into HTML. We then used embed widgets and our own code to add the Spotify widget, the timers, and the to-do list. We used VSCode to test our code and then uploaded the final product to GitHub. We used GitHub Pages to create an accessible URL link to test on our phone!

Challenges we ran into

We had originally gone into the project with the intent to create an app on Android Studio. We were able to load our UI into Android Studio but we struggled to connect buttons to pages to allow navigation within the app. After trying for a long time, we realized that we may not be able to get past the UI stage. Therefore, we last-minute decided to create a website instead. With the help of a plug-in, we were able to get a good start on our website. Our biggest challenge due to this change was the time-restraints. We had only the second-day of the hackathon to fully attempt to put the website together.

Accomplishments that we're proud of

We are incredibly proud of our ability to take on challenges in a new direction. We were able to recognize our challenge with Android Studio and then come up with a new plan, which we are proud to show to you! We were able to decide to change our project to a website instead. As beginners in HTML, we were able to use online resources to put together our project.

What we learned

What's next for ProcrastiCat

• Making sure the user cannot exit the website when on the timer page
• Adding more themes (different animals, color palettes, & making it more professional, hand-drawn images)
• Making sure the checklist saves when leaving the To Do List tab
• Incorporate AI so users can talk to Lilac!
• Making it into different versions, like an app

Built With

• figma
• framer
• html
• vscode