Capital Meow-ney

Welcome to Capital Meowney!
Thumbnail!
Once the user logs in, this is what they see!
Users can log in with their Google accounts
Our initial design, using Capital One colors! We liked the layout, but we wanted to make it more fun for our target audience - students.
Kitty Savings Bank Module - Make and spend money
Budget Planner Module - Spending wisely
Paws & Priorities Module - Choose what is a necessary purchase
Meow Money Match Module - Guessing prices
Cat Investing Garden Module - Compound Interest Simulator (5 Years)
Debt Dilemma Module - Paying off debt
Mortgage Module - Buying a home

Inspiration

We were inspired by Codedex to gamify financial literacy to make learning about money easy and fun for all! Schools do not focus on teaching financial literacy, and we want to fill that gap with Capital Meowney. Students can explore the various modules to build different financial skills, from budgeting to investing and buying a home! Our cat theme is inspired by the finance kitty on Instagram, and these cute companions are the perfect mascot.

What it does

Our website teaches children to teenagers how to manage their money responsibly. It starts off with simple courses in the beginning modules for basic money-saving fundamentals. Later lessons are more complex, such as investment and debt management to help them prepare for adulthood since, as we all know, high school to college is the most important time to learn about financial literacy.

How we built it

We designed our web application on Figma, and we used GitHub to work on the project simultaneously. To deploy our application, we used GitHub Pages and connected it to our custom domain.

The codebase was primarily in TypeScript, which significantly reduced runtime errors and made the code more maintainable. Using React with TypeScript improved the development speed, especially with intelligent autocompletion and type checking.

Vite was our build tool, and it made local development very fast with instant hot-reloading. The configuration was minimal, and it handled our TypeScript/React stack with ease.

For styling, we used Tailwind CSS. It increased our UI development speed since we could rapidly iterate on styles directly in class names, and the utility-first approach kept our CSS maintainable.

We implemented Auth0 so users can log in with their Google account, which was really helpful because it allowed us to rapidly secure routes and integrate social logins without managing passwords ourselves.

Overall, this stack enabled rapid prototyping and deployment. The developer experience across these tools was positive and allowed us to focus on building a fun, educational web game!

Challenges we ran into

Authentication implementation was a challenge that we faced. We learned how to use API keys to connect our app to Auth0, which we had never done before. In the end, however, it was worth it because we were able to get users to log in with their Google accounts.

Another issue we had was making the games more complex while giving financial lessons. Originally, we felt the game was too simple and unrealistic. To improve the experience of the game for users, we updated the values and added more modules to try to make it more realistic.

Accomplishments that we're proud of

Our UI looks very welcoming and warm so we are quite proud of our design. There are a lot of interactions we implemented, such as the container size changing when a user hovers over it. Also, we made our own financial cat icons to fit each learning module and themed the skills, jobs, and overall application around them.

We are proud of building a website that teaches teenagers financial literacy, thus making an impact on society. Financial literacy is an important skill, and providing this practice to children before they have to experience real financial situations gives them more exposure to different aspects like understanding costs, compound interest, and debt.

We are also very proud of each of our team members as we collaborate throughout the whole night. This was our first time working as a team, so it was good that we were productive throughout the weekend to fully complete our project.

What we learned

We learned a lot this weekend, from designing to working with new technologies like Tailwind CSS and Auth0. API keys were an important factor of our project that our members had little exposure to before the start of the hackathon. We learned how to troubleshoot and overcome issues while working as a team and merging our work together on GitHub.

What's next for HackUTD 2025

We believe our website have potential for scalability as we can implement more and more lessons related to financial literacy. While student who gain enough points from going through the course could exchange the points for gift card for rewarding them by using advertisement money on website.