Pebbles

Landing Page
Login Page
Budget Tracker
Pet Inventory
Mockups on Figma

Inspiration

We were inspired by friends and peers around us who showcased an apparent need for a budget tracker that would motivate them to save money in a fun way to ensure they reach their saving goals.

What it does

Our project is a budget tracker that incorporates a pet simulator to motivate users to stay on track with their goals. It allows users to log in their income and expenses and creates charts for better visualization. As users log in to their financial goals, they also get to take care of their own pets to keep them motivated. The longer users keep their goals and stay under their spending goals, the more in-game currency they gain which they can then use to take care of their pet and earn decorative items for their pet and home.

How we built it

We first created mock-ups of our project on Figma, and once we settled on a design, we began to code the program with React and Type Setter using vectors made from Figma as assets. Animations were done with Framer Motion.

Challenges we ran into

One of our main challenges was creating the login page and registering users, as well as accurately and correctly trying to replicate our mock-ups in our project.

Accomplishments that we're proud of

We are proud of our login system, and the animations with our mascot, Pebbles. Applying these effects and concepts for the first time for some of our team, we struggled through it quite a bit, but we are very proud of the end product.

What we learned

We gained more experience with React, Figma, and Frame Motion. For most of us, this was the first time we've used a JavaScript library or interacted with animated elements.

What's next for Pebbles

We plan to implement more customizable items for the cat such as accessories and furniture, and a streak system so that the longer users follow their financial goals, the more bonuses and in-game currency they gain. Along with that, we plan to have a friend feature where users can add people they know and visit other user's pets, create group budget plans that can be useful between roommates or family, and possibly a leaderboard where users can see who among their friends are closest to their financial goals.