Cyber Pink

• 

  Map Of Quests

• 

  Start Screen

• 

  Intro Interaction - SneakPeak

Inspiration

We wanted to create an easy and fun way for students to learn the fundamentals of finances.

What it does

Play as Elli, a girl on a mission to learn more about the world of budgeting, loans and investing. In the hopes of defeating the hive mind bank, INFLUX Inc, that is set on destroying her world.

How we built it

• React.js, Node.js , TypeScript and Vite were used for development.
• Animations and interactive components were implemented to make learning engaging.
• State management and dynamic page routing were handled to support game progression. ## Challenges we ran into
• Complex game-logic required careful planning for page routing and data fetching.
• Balancing educational content with fun gameplay to maintain engagement. -Delivering information in age appropriate way that didn't talk down to users or assume that they should know something. ## Accomplishments that we're proud of
• Successful completion of 4 stages of the game, each teaching a unique financial concept.
• Created a playable experience that blends storytelling with practical financial lessons. ## What we learned
• How to structure a React + TypeScript + Vite project for a game with multiple routes and interactive states.
• Techniques for integrating educational content into a game format without sacrificing fun.
• Strategies for managing complex frontend-backend interactions in a learning-focused application. ## What's next for Cyber Pink We hope to expand our audience beyond highschool students and create a curriculum that will help other groups learn about finances. Future updates may include additional quests, more complex interactions, and more mobile-friendly optimization.

Built With

• node.js
• react
• typescript
• vite