FinQuest is an interactive, choose-your-own-adventure game designed to teach financial literacy. By simulating real-life financial decisions, FinQuest helps users understand the long-term impact of their money management choices—all in a fun, engaging format.

• Inspiration
• What It Does
• How We Built It
• Technologies Used
• Challenges We Ran Into
• Screenshots
• Accomplishments That We're Proud Of
• What We Learned
• What's Next for FinQuest
• Installation & Setup
• Usage

FinQuest was born from the need to make financial literacy engaging and practical for young people. Traditional financial education is often theoretical and dry, so we envisioned a platform that uses interactive storytelling and real-life scenarios to empower users with the skills needed to manage their finances effectively.

• Interactive Learning: Presents users with realistic financial scenarios where each decision impacts their virtual savings.
• Dynamic Decision Trees: Visualizes user choices in a dynamic decision tree that shows the long-term impact of each decision.
• User Profiles & Authentication: Users can sign up, log in, and view their personalized financial journey.
• Immediate Feedback: Each decision comes with an explanation and a calculated effect on the user's virtual money, making the learning experience practical and engaging.

• Frontend:
  Built with Next.js and styled using Tailwind CSS for a modern, responsive user interface.

• Backend:
  Developed using Express.js and MongoDB (via Mongoose) to manage user data, decision trees, and authentication.

• Authentication:
  Implemented secure user authentication using JWTs (JSON Web Tokens) along with password hashing using bcrypt.

• API Integration:
  RESTful API endpoints connect the frontend to the backend, ensuring a smooth, interactive user experience.

• Languages: JavaScript, TypeScript
• Frameworks & Libraries:
  • Next.js
  • Express.js
  • Tailwind CSS
  • bcrypt (or bcryptjs)
  • jsonwebtoken
  • Mongoose
• Platforms & Services:
  • Local development with Node.js
  • (Optional) Cloud deployment on platforms like Vercel, Heroku, or AWS
• Databases:
  • MongoDB
• APIs:
  • RESTful API endpoints
• Development Tools:
  • VS Code (or your preferred IDE)
  • Git

• Dynamic Decision Tree Visualization:
  Creating a data structure that dynamically represents user decisions and building a clear, intuitive UI to visualize these decision trees was complex.

• CORS & API Integration:
  Configuring cross-origin resource sharing (CORS) between the Next.js frontend and Express backend required careful setup.

• Secure Authentication:
  Implementing JWT-based authentication while ensuring data security and proper session management posed additional challenges.

• Engaging Financial Education:
  FinQuest transforms traditional financial education into an interactive experience, allowing users to see the immediate impact of their decisions.
• Scalable Architecture:
  By leveraging modern frameworks and cloud-ready technologies, FinQuest is designed to scale and evolve.
• Clear Visual Feedback:
  The decision tree visualization provides users with clear feedback on how their financial choices affect their future, enhancing the learning experience.

• Full-Stack Integration:
  Successfully integrating a React-based frontend with an Express/MongoDB backend taught us the importance of clear API design and robust data handling.
• User Authentication:
  Implementing secure authentication with JWTs and password hashing deepened our understanding of security best practices.
• Responsive UI/UX Design:
  Building an intuitive, responsive interface with Tailwind CSS emphasized the value of modern design principles in user engagement.

• Enhanced Personalization:
  Integrate more personalized financial scenarios based on individual user behavior.
• Real-World Data Integration:
  Incorporate live financial data to provide even more relevant and accurate feedback.
• Advanced Analytics:
  Develop an analytics dashboard to help users track their progress and gain insights into their financial decisions.
• Content Expansion:
  Partner with financial education experts to expand and refine the scenarios and educational content within FinQuest.

• Node.js (v14 or higher)
• MongoDB instance (local or cloud-based)
• Next.js

npm install

env
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_key
PORT=3001

npx nodemon index.js

Navigate to the frontend directory:

cd finquest

Install dependencies:

Copy
npm install

Start the Next.js development server:

npm run dev

Navigate to the signup or login page to create an account or log in.

Once authenticated, you will receive a token and your user ID, which will be used to fetch your personalized decision tree data.

After logging in, go to the profile page where you can view your user details, including a profile picture.

See your decision history visualized as dynamic decision trees.

Start making financial decisions in the game.

Watch as each choice affects your virtual savings and is reflected in your decision history.