Financial Quest

• 

  The Landing Page with fun visuals to suit game theme, present behind in the background is a photo of justice league.Mobile version available

• 

  more to the the landing page( also in mobile version )

• 

  some fill ups before we get into the actual game.

• 

  this is the dashboard of a player, showing XP points, progress rate, new missions, scam IQ along with the current level such as "Rookie"

• 

  This part shows the number of missions and what we can play in them.

• 

  Not only asserting but also learning this feature allows the user to learn about various crimes and helps them know the right step.

• 

  This is the family mode where the user can chose and protect any family member from the things they have learned.

• 

  Then comes the user profile where they can hope up to the next quest.

• 

  Below the profile, a leaderboard is present.

• 

  Now comes the actual game with different missions, here I have selected "scholarship Trap" and so the quest will begin

• 

  Here is the SMS format of the crime

• 

  Here is the call version of the cyber crime

• 

  here is the options which can be performed by the user. gets points = right

• 

  if the correct option is picked the user wins

• 

  here is the learning outcomes.

Inspiration

My Inspiration came after my grandfather received a call from an unknown phone number, asking him to share an OTP ASAP or else his bank account would be frozen. Watching the sudden panic and fear on his face as he thought his entire life savings were gone was a turning point for me. I realised that not only he, but millions of people face scams every day, and so I designed "Financial Quest".

What it does

Financial Quest is a gamified cybersecurity platform. It is made to protect individuals from scams and fraud. This app allows users to play with "Digital Guardians" through story-driven learning. This app replicates real-world cyber threat vectors, including WhatsApp scam chats, fake UPI payment portals, phishing sites, and AI-generated OTP fraud messages, and lets users practice threat detection. Guided by the Digital Guardians, the players progress from Rookie Defender to a Scam Master, and acknowledge their progress through metrics like "Scam IQ" and XP. Family mode ensures they help elderly people and younger people who are more prone to scams.

How we built it

Step 1: (Building the Frontend) - Built using React, TypeScript, and Vite for a good mobile experience. Step 2: (UI and User Experience) - Used Tailwind CSS for the UI and Radix UI, and Lucide Icons for the user experience. Step 3:(Game Engine & Learning Logic) - A mission-based system where the user progresses through scam scenarios, makes decisions, earns Trust Points and XP, and improves their Scam IQ.

Challenges we ran into

• The biggest challenge was to make this app awareness feel engaging and game-like rather than a traditional learning module. -We needed scenarios that accurately reflected real-world fraud patterns and weren't difficult to understand. -Developing the Trust Points, XP, and Scam IQ systems required multiple iterations

Accomplishments that we're proud of

-Built a complete gamified financial safety platform that helps users learn financial data rather than using old traditional methods.
-Created realistic scam simulations covering common threats such as phishing, fake KYC calls, UPI fraud, loan-app scams, and investment fraud. -Designed a polished mobile-first experience -Transformed financial literacy into a measurable gaming experience.

What we learned

-Measurable impact is as important as engagement - building the Scam IQ system taught us the value of quantifying learning outcomes. -learned that users engage more deeply with financial safety concepts when they experience realistic scenarios and make decisions themselves -Also learned more about TypeScript, Python, Java.

What's next for Financial Quest

-Enlarge the platform with more examples, such as phishing scams via deepfake techniques, AI-enabled phishing, cryptocurrency scams, social media scams, and more. -Develop AI-based dynamic simulations where users can take on the role of scammers and improve their skills to handle scams. -Provide services in multiple languages to make sure that knowledge about financial safety and scams reaches different communities and areas around the world. -Work with schools and banks to incorporate the Financial Quest into their curriculum and programs.

Built With

• canvas
• confetti
• css
• css3
• framer
• html5
• javascript
• local
• motion
• radix
• storage
• tailwind
• typescript
• ui
• vite