Inspiration
We've all been there staring at a wall of financial jargon, feeling like we're supposed to understand things like compound interest and credit scores, but having no idea where to start. We realized that most financial education resources are incredibly dry and intimidating. Our inspiration came from a simple question: "What if learning about money felt less like a textbook and more like a game?" We wanted to create the tool we wished we had—an engaging, rewarding, and stress-free way to build financial confidence, one level at a time.
What it does
FinQuest transforms financial education into a gamified adventure. When you join, you create an account and enter a universe of financial topics, from "The Art of Budgeting" to "Introduction to Investing." Each topic is a "quest" filled with bite-sized questions. As you answer correctly, you earn points and unlock beautiful badges, tracking your progress in real-time. The dashboard is a protected, personalized space where you can see your achievements and choose your next challenge, turning the daunting task of learning finance into an empowering and genuinely fun experience.
How we built it
We built FinQuest from the ground up using the MERN stack, choosing it for its power and flexibility in creating modern, single-page applications. Backend: The core is a robust Node.js and Express.js API. We used MongoDB as our database because its flexible document structure is perfect for storing our ever-growing library of quests and user data. User authentication is handled securely with JWT and password hashing via bcryptjs.
Frontend: The entire user experience is built with React. We used React Router to create seamless navigation between the dashboard, quizzes, and login pages. All communication with the backend is handled efficiently using Axios.
Challenges we ran into
Every quest has its monsters, and we faced a few. Our biggest challenge was the "stale state" problem on the frontend. When a user completed a quiz, their points updated in the database, but the header on the screen wouldn't show the new score without a full-page reload. This forced us to dive deep into React's state and effect management to create a more seamless user experience.
We also spent hours debugging a mysterious bug where user points weren't saving. After tracing the issue through the entire stack, we discovered it wasn't a code problem at all, but a subtle database permissions issue in MongoDB Atlas. It was a frustrating but incredibly valuable lesson in the importance of full-stack debugging and cloud configuration.
Accomplishments that we're proud of
We're incredibly proud of building a complete, end-to-end MERN application in such a short time. From the secure registration flow to the dynamic quiz interface, every part works in harmony.
One of our biggest accomplishments is the scalable content system. By storing all 300+ questions in an external JSON file, we created a platform where new quests can be added and modified without touching a single line of server logic. This makes the app incredibly easy to maintain and expand.
Finally, we're proud of the user experience. The futuristic theme, the smooth animations, and the interactive quiz sidebar with real-time feedback all come together to create a polished and professional application that we'd genuinely enjoy using.
What we learned
This project was a massive learning experience. Technically, we solidified our understanding of the entire MERN stack, especially how to manage user authentication and create a seamless connection between a React frontend and an Express backend.
More importantly, we learned the art of methodical debugging. Tracing a bug from the UI, through the network requests, down to the database permissions taught us to be resilient and creative problem-solvers. We also learned a valuable lesson in product design: the presentation of information is just as important as the information itself.
What's next for FinQuest
This is just the beginning of the journey! We have a clear roadmap for the future of FinQuest: Dynamic Badges & Leaderboards: Implement the backend logic to automatically award badges and create a global leaderboard where users can compete based on their points. Personalized Learning Paths: Suggest new quests to users based on the topics they struggle with or excel at. Social Features: Allow users to challenge their friends to specific quests and share their achievements. Native Mobile App: Develop a mobile version of FinQuest for learning on the go.
Log in or sign up for Devpost to join the conversation.