Inspiration: Growing up, none of us were ever taught how to budget, invest, or manage credit and we know we're not alone. Financial literacy is one of the most critical life skills but it's almost never part of the school curriculum. We kept seeing friends make avoidable money mistakes and we wanted to do something about it. That was the spark for VaultVerse.

What it does: VaultVerse is an interactive financial literacy web app disguised as a game. Users explore a museum map and enter different rooms that each teach a core money concept through hands on gameplay. In the Savings Room, you split your paycheck between spending and saving and set real goals like buying a phone or saving for a vacation. In the Investment Room, you buy and sell stocks, watch prices fluctuate in real time, and feel the emotional weight of risk and return. In the Banking Room, you open a checking account, swipe a debit card to pay bills, and learn what happens when you overdraft. Every room rewards you with XP and coins to keep you motivated to explore more. We have also incorporated an AI Financial Coach to help users answer money relevant questions in real time.

How we built it: We built VaultVerse using React with Vite as our frontend framework, Zustand for managing game state across screens, and Tailwind CSS for the UI. We integrated an AI-powered financial coach using the OpenRouter API with a free LLM model, allowing users to ask real money questions and get personalized responses in real time. We designed the experience to feel like a complete game with a museum map, avatar selection, a leveling system, and animated reward popups after each room.

Challenges we ran into: The biggest challenge was getting our development environment working correctly under time pressure. We ran into version conflicts with Tailwind CSS, file corruption issues, and spent more time than we'd like to admit debugging import errors in React. On the design side, the hardest problem was making complex financial concepts feel genuinely fun without simplifying them. Finding that balance between education and entertainment required a lot of iteration in a very short window of time.

Accomplishments that we're proud of: We are proud that the stock market simulation in the Investment Room ended up feeling genuinely exciting watching your portfolio swing up and down creates real emotional stakes that mirror what actual investing feels like. We're also proud of how cohesive the overall experience feels, from the museum map to the XP system to the room designs. It feels like a real product, not a hackathon prototype.

What we learned: We learned a tremendous amount about structuring a React application from the ground up, managing shared state across multiple components, and making smart decisions about what to cut when time is limited. More importantly, we learned that the best way to teach something is to make people feel it the investment room works not because it explains risk, it works because you actually feel nervous watching your stocks drop.

What's next for VaultVerse: Next up we want to build out the Credit Room where players take out loans and watch their credit score rise and fall based on their payment behavior, and the Real Life Room where you manage rent, groceries, and a monthly budget inside an apartment simulation. Further down the road we want to add a multiplayer leaderboard so friend groups can compete on savings rates and investment returns, and eventually bring VaultVerse into classrooms as a free tool for schools and nonprofits who want to teach financial literacy in a way that actually sticks.

Built With

Share this project:

Updates