Inspiration
Young adults are often beginners at navigating their personal finances and feel financial anxiety if not properly trained in financial literacy. We aimed to combat this issue by creating an engaging and interactive budgeting tool tailored to first-time budgeters. Our goal was to ensure money management felt rewarding through introducing incentive-based features and fostering a collaborative community among peers and friends.
What it does
Our app makes financial literacy engaging for Gen Z by visualizing and gamifying budgeting through a virtual ocean animal pet that levels up when users save and a collaborative environment to budget with friends or family. With tools like group expense tracking and weekly budget trackers, it transforms money management into a fun, social, and scalable experience.
How we built it
We began by creating a repository called HackRice15, which would contain folders for the frontend and backend code. Then, we created both the front and back end and ensured that they could communicate with each other by displaying a message such as “connected to backend!” if the condition was true. Because of time constraints, we decided to focus on frontend development. We created a React app with Vite and installed the react, framer-motion, and recharts dependencies. We also created folders such as src which contained our source code. From there, we built out the core features of our project, including the personal budget tracker, the group budget planner, the budget task list, the user’s pet and profile, and the user login page. After each set of edits, we committed the edits into the GitHub repository (linked below).
Challenges we ran into
One of the biggest challenges we faced was learning full-stack development from scratch. Many of us came in without knowing basic programming vocabulary or concepts like APIs, JavaScript, and how front-end and back-end connect. We also struggled at first with deciding which tools to use, setting them up, and using them to collaborate effectively.
Accomplishments that we're proud of
Despite these challenges, we were able to get comfortable with tools like GitHub and VSCode, languages such as JavaScript, HTML, and CSS, which helped us work together and manage our code. We also built a working product from just an idea, something we weren’t sure we could do at the start.
What we learned
Through this project we learned the basics of full-stack development and how all the pieces of an app fit together. We picked up new programming skills, learned how to use collaboration tools such as Github, and practiced problem-solving when things didn’t go as planned.
What's next for FinPal
To increase impact and utility, the app can first focus on keeping users engaged with rewards, streaks, and ways to customize their virtual pets while adding useful tools like goal-based saving, reminders, and secure bank connections. To make adding/updating transactions more efficient, we can even use an API to connect banking information with the web app in the future. We can also integrate ML to sort and organize user tasks. Additionally, we can branch out into a more complex narrative based gameplay for the user by allowing individuals to unlock new challenges and characters by leveling up. We’d also like to continue to build out the social features such as group challenges and shared savings goals. To help streamline the group budgeting process, we can even look into connecting a user’s contacts with their profile to make collaboration easier. Lastly, we can also integrate short financial lessons and simple simulations to help users learn. Over time, we hope to grow the web app’s usage through a mix of free and premium features, engaging updates, and continuous improvements.
Built With
- chatgpt
- css
- html
- javascript
- react
- vite
- vs-code

Log in or sign up for Devpost to join the conversation.