Future Me

• 

  Home Page

• 

  Character Creation Screen

• 

  Decision Page Example

Inspiration

There has been a concerning decrease in financial literacy, with a majority of high school students expressing that they feel intimidated by the idea of managing money. We noticed that this issue can be tackled at the root by teaching smart financial practices at a young age, before it becomes a larger problem. If kids develop financial literacy early on, as they grow older and begin working and earning money, they are more likely to make informed and responsible financial decisions. We asked ourselves how to do this effectively, and our answer was to make learning about financial literacy fun and interactive.

What it does

Our project is a gameplay world where players experience making financial decisions in different environments such as at home, school, work, and the grocery store. In each environment, the player is presented with scenario-based choices that affect their player stats, such as money, savings, and overall stability. The game encourages healthy saving and spending habits while pushing players to think critically about trade-offs. As gameplay continues, the player’s stats reflect the long-term impact of their financial choices, helping them visualize how consistent spending and saving behaviors can shape their future. (that's why it's FutureMe)

How we built it

We worked as an Agile team of three and followed an iterative development process. We built the user interface using HTML, CSS, and React, with Vite as our build and development tool. The core game logic and state updates were handled in JavaScript on the frontend. We used shared state to manage player stats and game progression across different components. Throughout development, we practiced healthy Git workflows by branching to work on separate features, then merging and resolving conflicts to integrate and scale the project.

Challenges we ran into

One of our main challenges was designing an effective points system that accurately reflected financial decision-making without oversimplifying it. We also struggled to ensure that the game was genuinely educational and reinforced financial skills rather than functioning as a purely entertainment-based game. Additionally, we faced performance issues due to large background image file sizes. Another major challenge involved avatar features that were inconsistent across different skin tones: some avatars were missing mouths, some were missing eyes, and others were missing both, which required us to carefully review and align our visual assets.

Accomplishments that we're proud of

We are proud of our avatar creation system, which allows players to personalize an avatar for the game. The avatar is responsive and displays appropriate facial expressions based on the player’s financial choices and current game state. We are also proud of how we handled merge conflicts as a team and how thorough we were with testing and bug fixing, which helped improve the overall stability of the game.

What we learned

Through this project, we gained a much deeper understanding of React, particularly how to manage shared state and trigger UI updates across multiple components as the game state changes.

What's next for Future Me

In the future, we would like to scale the game by introducing Arduino-based controls and abstracting user input to support alternative control methods (such as PlayStation and XBox). We also aim to add more scenarios and potentially introduce levels to further expand gameplay and progression.

Built With

• css3
• github
• hmtl
• javascript
• json
• react
• vite