Pawsive

Inspiration

One strong inspiration is the app YPT. It was a way to motivate me in high school to stay accountable, motivated and a way to keep in touch with my friends. I could feel the competitiveness which made me more motivated. Pawsive draws on that idea, but pushes more towards the aesthetics, user experience and gamification. This should promote more usage and motivate the user even more to use the app and study with friends.

What it does

Pawsive is a gamified study timer app that helps students stay focused and build consistent study habits. Users first pick an animal companion (polar bear, cat, dog, or duck). While they study, they can earn "paws" (in-app currency) for time spent focused. Paws can be spent in a cosmetic shop to customize their character and study space. The app also supports study groups with invite codes for accountability, tracks streaks and hours studied, and includes break reminders.

How we built it

We first started prototyping in Lovable and Figma. We first designed how the UI should’ve looked like in Figma and provided that as context to feed into Lovable. We connected this to our repo and opened this on our local machines so we can make small tweaks like element placement/size or uploading files. Lovable generated the overall frontend and backend (supabase) and from there on, we used our code editors to fix bugs and made small adjustments so that it fixed our needs.

Challenges we ran into

While establishing the backend we ran into the classic chicken and egg problem. The SELECT policy in supabase required a user to be a member of a group to see it, but since the user is just creating the group, the user isn't a member yet. Because of this infinite loop, it took a while to debug. All I needed to change was the select policy.

Also the majority of the time, Lovable was not implementing changes as I provided when I prompted long messages. So I decided to pivot to shorter messages and use the plan feature to make sure that it did exactly what I wanted it to do.

Accomplishments that we're proud of

The overall aesthetic of what we’ve accomplished. The floating icons and overall cute aesthetic is what we were aiming for and we believe we accomplished that well. Also successfully integrating supabase so that there is multiple user interaction and all the information is properly stored on the backend.

What we learned

Prototyping and building can be very tricky. Bug fixing takes even longer. Sometimes what you envision and the final product is very different. Building is about compromising but also adapting to problems and overcoming them.

What's next for Pawsive

Spreading it to a demographic further than just students. For example, for a younger population, we could add parental features like app lockdowns. As for older populations, we could implement more aesthetic options for those in the workforce and add more features like an at work status and a calendar function.

We would also make transitions and animations smoother and minimize css glitches.

Built With

• framermotion
• react+vite
• reactrouter
• shadcn/ui
• supabase
• tailwindcss
• tanstackreactquery
• typescript