About

A gamified, fantasy-themed web application that teaches programming fundamentals through interactive quests, embedded videos, and quizzes.

CodeQuest transforms learning to code into an epic adventure. Users embark on a journey through 10 progressive programming quests, each presented as an ancient scroll filled with knowledge. The platform uses fantasy RPG theming - spells, incantations, oracles, and sorcery - to make programming concepts engaging and memorable for beginners.

How It Works

1. Begin Your Journey: Visit the landing page and click "Start Your Journey" to enter the realm.

2. Sign In: Authenticate with your account to track your progress across quests.

3. Explore the Dashboard: View your quest map - a visual progression path showing completed and upcoming quests with connecting arrows.

4. Select a Quest: Choose from 10 programming quests, starting with "Hello World" and advancing through Variables, Loops, Functions, and beyond.

5. Learn from the Scrolls: Each quest presents a beautifully themed tutorial with explanations, code examples, and embedded YouTube videos.

6. Prove Your Knowledge: Complete the quiz at the end of each quest to test your understanding and mark the quest as complete.

7. Track Your Progress: Return to the dashboard to see your completed quests highlighted in green, then continue your adventure!

Key Features

• Fantasy Quest Theme: Immersive RPG - style presentation transforms dry programming concepts into an engaging adventure with scrolls, oracles, and incantations.

• 10 Progressive Programming Quests: A structured curriculum covering Hello World, Variables, User Input, Conditionals, Loops, Math, Functions, Lists & Arrays, Dictionaries, and Recursion.

• Visual Progress Map: An interactive dashboard displays your learning path with visual arrows connecting quests, showing completion status at a glance.

• Embedded Video Tutorials: Each quest includes curated YouTube videos to supplement the written content and cater to different learning styles.

• Interactive Quizzes: Test your knowledge after each quest with themed multiple-choice quizzes that reinforce key concepts.

• User Authentication & Progress Tracking: Secure OAuth login via Supabase with persistent progress tracking - pick up right where you left off.

• Reset Progress: Option to reset all quest completions and start your journey fresh.

Tech Stack

Frontend

• React 19
• Next.js 15 (with Turbopack)
• TypeScript
• TailwindCSS
• DaisyUI
• Lucide React (icons)

Backend

• Next.js API Routes & Server Actions
• Supabase (Authentication & Database)
• PostgreSQL

Testing

• Vitest
• React Testing Library
• jsdom

Getting Started

1. Clone the repository:

   git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
   cd YOUR_REPO

2. Install dependencies:

   npm install

3. Set up environment variables:

   # Create a .env.local file with your Supabase credentials
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser.

Available Scripts

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run test	Run tests with Vitest

License

This project is licensed under the MIT License. See the LICENSE file for details.