FinQuest

Sign up page
Login Page
User Input Prompt
Game page
Selection of decision
Past game history, plotted as a tree.
Leaderboard

Inspiration

FinQuest was born out of the need to make financial literacy engaging and practical for young people. We recognized that traditional financial education often feels disconnected and theoretical. By leveraging interactive storytelling and real-life financial scenarios, FinQuest transforms the way users learn about managing money—making it both fun and impactful.

What It Does

FinQuest is a choose-your-own-adventure game that teaches financial literacy through interactive, scenario-based learning. Key features include:

User Profiles: Users create and manage their profiles, complete with a stock image and personal details.
Dynamic Scenarios: Users are presented with realistic financial scenarios, each with multiple choices that impact their virtual savings.
Decision Trees: Every decision is tracked and visualized as a dynamic decision tree, providing users with clear feedback on the consequences of their choices.
Authentication: Secure signup and login functionality ensures that each user's data and progress are personalized.

How We Built It

Frontend: Developed using Next.js and styled with Tailwind CSS, ensuring a responsive and modern user interface.
Backend: Built with Express and MongoDB. The backend manages user data, decision trees, and secure JWT-based authentication.
API Integration: The application uses RESTful API endpoints to connect the frontend with the backend services.
Authentication: Users sign up and log in, receiving a JWT token that is used to fetch their personalized decision tree data.
AI: Gemini AI is used for prompting scenarios, receiving choices, assigning point values for decisions.

Challenges We Ran Into

Dynamic Decision Tree Visualization: Designing a data structure to dynamically represent user decisions and building an intuitive UI to visualize these decision trees was a significant challenge.
CORS Configuration: Integrating the Next.js frontend with the Express backend required careful configuration of CORS to avoid cross-origin issues.
Secure Authentication: Implementing secure authentication with JWT while ensuring data integrity and proper user session management was complex but essential.

Accomplishments That We're Proud Of

Interactive Financial Learning: FinQuest successfully transforms traditional financial education into an engaging, interactive experience.
Scalable Architecture: Our use of modern technologies (Next.js, Express, MongoDB) ensures that FinQuest is scalable and maintainable.
Clear Visual Feedback: The dynamic decision tree feature provides users with a clear, visual representation of how their choices impact their financial future.

What We Learned

Full-Stack Integration: We gained valuable experience integrating a React-based frontend with an Express/MongoDB backend.
User Authentication: Implementing JWT-based authentication taught us about secure user management and session handling.
UI/UX Design: Building an intuitive and engaging user interface with Tailwind CSS reinforced the importance of responsive design and user feedback.

What's Next for FinQuest

Enhanced Personalization: Future iterations will include more personalized financial scenarios based on user behavior and preferences.
Real-World Data Integration: We plan to incorporate real-world financial data to further enhance the learning experience.
Expanded Analytics: An advanced analytics dashboard is in the works to provide deeper insights into user decisions and learning progress.
Content Partnerships: We are exploring partnerships with financial education experts to refine our content and expand our platform's impact.