Code Quest RPG

An immersive gamified learning platform for React, blending medieval fantasy aesthetics with magical technology (technomagie). Learn React concepts through an RPG-style progression system with quests, skills, and character development.

Features

• Interactive Learning System: Two-phase quest system with theory lessons before practical challenges
• RPG Progression: Gain XP, level up, and unlock new skills as you master React concepts
• Quest-Based Learning: Complete coding challenges to progress through your React journey
• Skill Tree: Unlock React skills (hooks, components, state management, etc.) as you advance
• Code Editor: Built-in Monaco Editor for hands-on practice
• Persistent Progress: Your progress is automatically saved to localStorage
• Technomagie Theme: Beautiful medieval-fantasy UI with magical technological elements
• Character System: Track your stats, level, and mastered skills

Quick Start

Installation

# Clone the repository
git clone <your-repo-url>
cd code-quest-rpg

# Install dependencies
npm install

# Start the development server
npm run dev

Building for Production

npm run build
npm run preview

Project Structure

code-quest-rpg/
├── src/
│   ├── components/
│   │   ├── CodeEditor.jsx       # Monaco Editor wrapper
│   │   ├── Lesson.jsx            # Interactive lesson viewer
│   │   └── Navigation.jsx        # App navigation
│   ├── data/
│   │   ├── quests.js             # Quest definitions with lessons
│   │   └── skills.js             # React skills catalog
│   ├── pages/
│   │   ├── Character.jsx         # Character stats page
│   │   ├── Home.jsx              # Landing page
│   │   ├── QuestDetail.jsx       # Quest lesson & challenge
│   │   ├── Quests.jsx            # Quest list
│   │   └── Skills.jsx            # Skill grimoire
│   ├── store/
│   │   └── gameStore.js          # Zustand state management
│   ├── App.css                   # Component styles
│   ├── App.jsx                   # Main app with routing
│   ├── index.css                 # Global styles & theme
│   └── main.jsx                  # Entry point
├── package.json
└── README.md

How to Play

1. Home Page

Start your journey on the home page where you'll see:

• Your character stats (Level, XP, Health, Mana)
• Quick navigation to Quests, Character, and Skills

2. Quest System

Navigate to the Quests page to see available challenges:

• Beginner quests (green) - Start here
• Intermediate quests (yellow) - For experienced learners
• Advanced quests (red) - Master-level challenges

Each quest has two phases:

1. Learn - Interactive lesson with theory, code examples, and tips
2. Practice - Code challenge to apply what you learned

3. Skill Grimoire

View all React skills organized by category:

• Locked skills require higher levels
• Available skills can be unlocked by completing quests
• Mastered skills show your progress

4. Character Page

Track your overall progress:

• Current level and XP
• Total skills mastered
• Completed quests
• Character stats

Available Quests

Quest 1: First Steps - The Counter Challenge

• Difficulty: Beginner
• XP Reward: 50
• Skill Unlock: useState
• Level Required: 1
• Learn to create a simple counter component using React's useState hook

Quest 2: Component Forge

• Difficulty: Beginner
• XP Reward: 40
• Skill Unlock: components
• Level Required: 1
• Learn to create and use React components with props

Quest 3: Props Passage

• Difficulty: Beginner
• XP Reward: 45
• Skill Unlock: props
• Level Required: 2
• Master the art of passing props between components

Quest 4: The Effect Temple

• Difficulty: Intermediate
• XP Reward: 75
• Skill Unlock: useEffect
• Level Required: 3
• Learn to handle side effects with useEffect hook

Tech Stack

• React 19.2.0 - UI framework
• Vite 7.2.4 - Build tool and dev server
• React Router DOM 7.11.0 - Client-side routing
• Zustand 5.0.9 - State management with persistence
• Monaco Editor 4.7.0 - Code editor component
• Google Fonts - Cinzel (headings) & Crimson Pro (body text)

Design System

Color Palette

/* Background Colors */
--bg-primary: #0a0e1a      /* Deep dark blue */
--bg-secondary: #131826    /* Slightly lighter */
--bg-tertiary: #1a1f35     /* Card backgrounds */

/* Magical Colors */
--magic-purple: #8b5cf6    /* Primary accent */
--magic-blue: #3b82f6      /* Secondary accent */
--magic-cyan: #06b6d4      /* Highlights */
--magic-gold: #f59e0b      /* Rewards, links */
--magic-emerald: #10b981   /* Success states */

/* Text Colors */
--text-primary: #e8e6f0    /* Main text */
--text-secondary: #a8a5bc  /* Dimmed text */
--text-accent: #d4af37     /* Gold accent */

Typography

• Headings: Cinzel (medieval fantasy serif)
• Body: Crimson Pro (elegant readable serif)

Visual Effects

• Glow Pulse: Magical glowing animation on cards
• Shimmer: Gradient animation on important elements
• Float: Subtle floating animation on skill icons
• Energy Grid: Background overlay pattern

State Management

The app uses Zustand with persist middleware for state management:

const useGameStore = create(
  persist(
    (set, get) => ({
      player: {
        name: 'Hero',
        level: 1,
        xp: 0,
        xpToNextLevel: 100,
        health: 100,
        mana: 50,
        skills: []
      },
      unlockedSkills: [],
      completedQuests: [],
      // Actions
      gainXP: (amount) => { /* ... */ },
      unlockSkill: (skillId) => { /* ... */ },
      completeQuest: (questId) => { /* ... */ }
    }),
    { name: 'code-quest-storage' }
  )
);

Adding New Quests

To add a new quest, edit src/data/quests.js:

{
  id: 'quest-5',
  title: 'Your Quest Title',
  description: 'Short description',
  difficulty: 'beginner', // or 'intermediate', 'advanced'
  xpReward: 50,
  skillUnlock: 'skillId',
  requiredLevel: 1,
  category: 'Hooks', // or 'Basics', 'Advanced', etc.
  story: 'Narrative description',
  lesson: {
    title: 'Lesson Title',
    sections: [
      { type: 'text', content: '...' },
      { type: 'heading', content: '...' },
      { type: 'code', language: 'javascript', content: '...' },
      { type: 'list', items: [...] },
      { type: 'example', title: '...', content: '...' },
      { type: 'tip', content: '...' }
    ]
  },
  challenge: {
    type: 'code',
    instructions: 'What the learner needs to do',
    starterCode: `// Initial code here`,
    solution: `// Solution code here`,
    tests: [
      'Test description 1',
      'Test description 2'
    ]
  }
}

Lesson Section Types

• text: Paragraph of explanatory text
• heading: Section heading
• code: Code block with syntax highlighting
• list: Bulleted list of items
• example: Complete code example with title
• tip: Important tip or warning

Adding New Skills

To add a new skill, edit src/data/skills.js:

export const SKILLS = {
  yourSkill: {
    id: 'yourSkill',
    name: 'Skill Name',
    description: 'What this skill does',
    icon: '🎯', // Emoji icon
    requiredLevel: 1,
    category: 'Hooks' // or 'Basics', 'Advanced', etc.
  }
};

Code Validation

Quests validate code before completion in src/pages/QuestDetail.jsx. Add validation logic:

const validateCode = () => {
  const codeLines = userCode.split('\n').map(line => line.trim());

  if (questId === 'your-quest-id') {
    if (!userCode.includes('yourRequiredCode')) {
      setCodeValidation({
        success: false,
        message: 'Error message here'
      });
      return false;
    }
  }

  return true;
};

Roadmap

Phase 1 (Current Prototype)

• ✅ Basic quest system with lessons
• ✅ Skill tree
• ✅ Character progression
• ✅ Code editor integration
• ✅ Technomagie theme

Phase 2 (Planned)

• More quests covering all React concepts
• Real code execution and testing
• Achievements system
• Leaderboards
• Quest hints system
• Multiple character classes

Phase 3 (Future)

• Multiplayer features
• Community quests
• Custom quest creator
• Mobile app version
• Advanced TypeScript quests

Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch
3. Add your quests/skills/features
4. Follow the existing code style
5. Test thoroughly
6. Submit a pull request

License

MIT License - Feel free to use this project for learning and education.

Credits

Created with ❤️ for React learners everywhere.

• Design: Medieval fantasy meets magical technology (technomagie)
• Fonts: Google Fonts (Cinzel, Crimson Pro)
• Code Editor: Monaco Editor
• State: Zustand
• Build: Vite

---

Start your journey to React mastery today! 🗡️✨