QuestXP

AI-powered learning RPG turning passive YouTube playlists into structured courses with custom study plans, active-recall quizzes, a RAG tutor, and gamified XP to defeat tutorial hell.

Comment

Project Story: QuestXP

Inspiration

The inspiration for QuestXP came from a simple, frustrating observation: my peers were paying thousands of dollars for "professional bootcamps" that essentially consisted of curated YouTube playlists and a basic progress tracker. We live in an era where elite-level instructional content is free on the internet, but the pedagogical structure—the roadmap, the accountability, and the testing—is locked behind massive paywalls. I wanted to build a bridge that gives every self-taught learner the "University Experience" without the tuition debt. I wanted to end "Tutorial Hell" by turning passive watching into active, gamified mastery.

What it does

QuestXP is an AI-driven Learning Management System (LMS) that transforms any YouTube playlist into a full-scale academic course.

  • AI Roadmapping: It analyzes content to build a logical learning path.
  • OpenAI Summaries & Quizzes: For every "mission" (video), the AI generates structured notes and active-recall quizzes.
  • Global Leaderboard: Competitive gamification using XP to keep learners motivated through social accountability.
  • Focus Guard: Built-in Pomodoro timers and "Missions" to minimize cognitive load and maximize deep work.
  • Progress Tracking: Visualizing mastery across multiple domains in a single dashboard.

How we built it

QuestXP is built on a high-performance modern stack:

  • Frontend: React 18 with Vite for lightning-fast HMR, styled with TailwindCSS for a premium "brutalist-vogue" aesthetic. We used Zustand for lightweight, performant state management.
  • Backend: Node.js and Express handle the API logic, with Mongoose managing our structured MongoDB schemas.
  • AI Engine: Integrated OpenAI’s GPT-4o for complex content analysis and summarization.
  • Background Processing: We used BullMQ and Redis to handle the intensive task of processing large YouTube playlists asynchronously without blocking the main event loop.
  • Infrastructure: Deployed across Vercel (frontend) and Railway (backend) for seamless CI/CD.

Challenges we ran into

The biggest technical hurdle was managing the state of AI generation. Processing a 50-video playlist involves hundreds of API calls for transcriptions, notes, and quizzes. Initially, the frontend felt "stale" while waiting. We solved this by implementing a robust background job queue and an "Optimistic UI" pattern that gives users immediate feedback while the AI works in the shadows. We also had to rigorously guard against NoSQL injection and optimize our Redis caching to stay within a student-friendly budget.

Accomplishments that we're proud of

  • Successfully scaling to 80+ active users during our closed beta.
  • Building a UI that feels "premium" and "alive"—moving away from the boring, sterile look of traditional LMS platforms.
  • Creating a seamless "Course Cloning" feature that allows users to share their structured paths with one click.

What we learned

I learned that in the AI era, the "Experience" is the product. Simply having access to a LLM isn't enough; the value lies in how you wrap that intelligence into a workflow that solves a human problem—in this case, the lack of discipline in self-taught learning. I also leveled up significantly in handling asynchronous distributed systems and high-density UI layouts.

What's next for QuestXP

The vision for QuestXP is to become the "Duolingo for everything." We plan to introduce:

  • Peer-to-Peer Study Rooms: Real-time collaborative focus sessions.
  • DoubtAI: A specialized RAG (Retrieval-Augmented Generation) chatbot trained specifically on the current course material.
  • Mobile Application: Enabling "micro-missions" on the go.

Technologies Used

  • Frontend: React.js, Vite, Tailwind CSS, Zustand, Framer Motion, TanStack Query, Lucide Icons
  • Backend: Node.js, Express.js, MongoDB, Mongoose, Redis, BullMQ
  • AI/LLM: OpenAI GPT-4o API, YouTube Data API v3
  • DevOps: Docker, Railway (Backend), Vercel (Frontend), GitHub
  • Security: JWT, Argon2, Helmet, HPP, express-validator

Built With

  • azure-app-service
  • bullmq
  • express.js
  • firebase-(fcm)
  • github
  • mongodb-atlas
  • node.js
  • openai-gpt-4o
  • pinecone
  • react.js
  • tailwind-css
  • valkey
  • vercel
  • vite
  • youtube-data-api-v3
  • zustand
Share this project:

Updates