RealQuest AI: Learn by Living Real Scenarios

🌟 Inspiration

Every year, millions of students graduate with degrees and perfect GPAs, only to completely freeze when they face their first real crisis at work. We realized a harsh truth: watching passive tutorials and taking standard quizzes simply isn't the same as actually doing the job.

We asked ourselves: Duolingo revolutionized language learning by turning it into a game. Why hasn't anyone done the same for professional career skills?

That question sparked RealQuest. But we didn't just want to build another quiz app. We wanted to create something emotionally engaging something that would make students actually care about their decisions. That's when we came up with the core idea: What if the feedback didn't come from a generic AI, but from your own "Future Self" you, 10 years in the future, telling you how your decisions shaped your life?

That emotional hook is what makes RealQuest more than just a learning tool. It's a mirror that shows you who you could become.

🚀 What it does

RealQuest is a 100% living career simulation platform. Instead of watching videos, users step into high-stakes, real-world scenarios across four career paths:

  • 📊 Project Manager Handle deadline crises, team conflicts, and stakeholder pressure
  • 📈 Data Analyst Navigate data integrity issues and business-critical reporting
  • 🚀 Entrepreneur Manage cash flow, co-founder disputes, and product launches
  • 📣 Digital Marketer Deal with PR crises, viral campaigns, and budget allocation

Key Features:

  • ✅ Zero-Typing UI No blank text boxes. Users make strategic multiple-choice decisions through beautiful, cinematic cards
  • ✅ The "Future Self" Mentor AI-powered feedback that speaks as the user 10 years in the future, analyzing how their specific choices shaped their career trajectory
  • ✅ Dynamic Radar Charts Visual breakdown of 5 core traits: Decision-Making, Leadership, Communication, Risk Tolerance, and Empathy
  • ✅ Visual Career Timeline Watch your career progress from Junior to Executive over 10+ years, with "Future Life" milestones (e.g., "Year 5: You just led a $2M product launch")
  • ✅ Adaptive Difficulty The AI adjusts scenarios based on the user's leadership style and decision patterns

🛠️ How we built it

We built RealQuest as a modern, full-stack web application using cutting-edge technologies:

Frontend:

  • Next.js 14+ (App Router) For fast, SEO-friendly page transitions
  • TypeScript For type-safe, maintainable code
  • Tailwind CSS For the "Cinematic Future" design system (deep blacks, neon cyan accents, glassmorphism)
  • Framer Motion For smooth, premium animations on every interaction

AI & Data:

  • OpenAI API (GPT-4) Powers the "Future Self" persona with a carefully engineered system prompt that makes the AI speak as the user's future self
  • Recharts For the dynamic radar chart visualization of user traits

Architecture: The app uses a data-driven approach where scenarios are hardcoded in TypeScript for instant loading, while the AI is only called at the assessment stage to generate personalized feedback. This hybrid approach ensures the app feels instant and responsive, while still delivering deeply personalized AI insights.

Deployment: The app is deployed on Google Cloud Run for scalable, serverless hosting, ensuring it can handle traffic spikes during the hackathon judging period.

🧗 Challenges we ran into

  1. Crafting the "Future Self" Persona Getting the AI to consistently speak as the user's future self (using "you" and referencing specific choices) without breaking character was incredibly difficult. We iterated on the system prompt over 20 times before achieving the emotionally resonant, wise, yet honest tone we wanted.

  2. Balancing Animation Performance We wanted every interaction to feel cinematic with Framer Motion, but too many animations made the app feel sluggish. We had to carefully optimize which elements animate and use hardware-accelerated transforms to maintain 60fps performance.

  3. Designing the Zero-Typing UX Removing all text input fields seemed simple, but it forced us to rethink how to convey complex scenarios and gather meaningful user input. We solved this by designing large, interactive multiple-choice cards with clear visual hierarchy.

  4. Creating Realistic Scenarios Writing scenarios that felt genuinely high-stakes (not obvious right/wrong answers) required deep research into each career path. We consulted real professionals to ensure the dilemmas felt authentic.

  5. Deployment Complexity Setting up the Cloud Run deployment with proper environment variables for the OpenAI API key and ensuring the build process worked seamlessly took longer than expected.

🏆 Accomplishments that we're proud of

  • The "Future Self" Feature We're incredibly proud of how the AI persona turned out. When users see the feedback speaking as their future self, it creates a genuine emotional moment that makes the learning stick.

  • The Cinematic UI/UX We achieved a premium, app-like feel that rivals commercial products. The dark theme, neon accents, glassmorphism, and smooth animations create an immersive experience that makes users feel like they're in a high-end simulation game.

  • Zero-Typing Interaction Model — By eliminating all text input, we created a frictionless, mobile-friendly experience that anyone can use immediately. This was a bold design choice that paid off.

  • Getting It Live Despite the tight 4-day deadline, we built, tested, and deployed a fully functional, production-ready application that judges can actually interact with right now.

  • The Visual Career Timeline The scrolling timeline with glowing nodes and "Future Life" milestones is a unique feature that helps users visualize their long-term career progression in a way no other platform does.

📚 What we learned

  • Prompt Engineering is an Art We learned that getting AI to adopt a specific persona consistently requires incredibly detailed, structured prompts with clear examples and constraints.

  • Emotional Design Matters Technical features are important, but the emotional impact of a product is what makes it memorable. The "Future Self" concept taught us that connecting with users on an emotional level is the key to engagement.

  • Less is More in UX By removing text input fields, we were forced to think more creatively about how to present information. This constraint led to a cleaner, more focused user experience.

  • The Power of Hybrid Architecture Combining hardcoded data (for speed) with AI generation (for personalization) gave us the best of both worlds: instant loading times with deeply personalized outputs.

  • Deployment is Part of the Product A project isn't done until it's live and accessible. We learned the importance of setting up proper CI/CD pipelines and environment management early in the process.

🔮 What's next for RealQuest

  • More Career Paths We plan to expand beyond the initial 4 careers to include Healthcare, Education, Creative Arts, and Skilled Trades (green energy, advanced manufacturing).

  • Multiplayer Scenarios We're designing collaborative simulations where teams of students must work together to solve complex business crises, with the AI analyzing team dynamics and communication patterns.

  • B2B Enterprise Version Companies are already expressing interest in using RealQuest for employee onboarding and leadership training. We're building a version tailored for corporate L&D (Learning & Development) teams.

  • Mobile App While the web app is fully responsive, we're developing native iOS and Android apps with push notifications for daily "micro-scenarios" to keep users engaged.

  • Integration with Job Boards We want to connect RealQuest with platforms like LinkedIn and Indeed, so users can showcase their simulation scores and "Future Self" insights directly on their professional profiles.

  • Research Partnerships We're reaching out to universities to study the effectiveness of experiential learning through simulation compared to traditional methods, with the goal of publishing peer-reviewed research.


🔗 Live Demo: https://realquest-152880807025.europe-west2.run.app
💻 Source Code: https://github.com/s333s/Questpath-AI

Built for the Youth Code x AI Hackathon 2026

Built With

  • ai
  • cloud-build
  • docker
  • framer-motion
  • google-cloud-run
  • gpt-4
  • lucide-react
  • next.js
  • openai-api
  • react
  • realquest
  • recharts
  • tailwind-css
  • typescript
Share this project:

Updates

Submission history