CodeQuest: Gamified Coding Adventures

CodeQuest is an interactive, gamified web application designed to make learning to code an exciting adventure. Users progress through different realms, complete coding quests, earn badges for their achievements, and unlock new challenges. With an integrated AI assistant, learners can get personalized hints to overcome obstacles, making the learning process smoother and more engaging.

✨ Features

• Gamified Learning: Progress through fantasy-themed realms like the "Beginner's Grove" and "The Silicon Steppe".
• Interactive Quests: Solve real coding challenges that cover fundamental concepts.
• Badge Collection: Earn unique, pixel-art badges to celebrate your accomplishments and showcase your skills.
• AI-Powered Hints: Stuck on a quest? The AI Oracle can provide personalized hints based on your code to guide you toward the solution without giving it away.
• Progressive Unlocks: Completing key quests unlocks new, more challenging realms to explore.
• Modern UI: A beautiful, responsive, and dark-mode-first interface built with the latest web technologies.

🛠️ Tech Stack

This project is built with a modern, full-stack TypeScript setup:

• Framework: Next.js (App Router)
• UI Library: React
• Styling: Tailwind CSS
• UI Components: ShadCN UI
• Generative AI: Genkit (for AI-powered hints)
• Language: TypeScript

🚀 Getting Started

Follow these instructions to get a local copy of the project up and running.

Prerequisites

• Node.js (v18 or later recommended)
• npm or another package manager like yarn or pnpm

Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/your-repo-name.git
   cd your-repo-name

2. Install dependencies:

   npm install

3. Set up environment variables: Create a file named .env in the root of your project and add your Gemini API key. This is required for the AI hint generation feature. You can get a key from Google AI Studio.

   GEMINI_API_KEY="YOUR_API_KEY_HERE"

4. Run the development server:

   npm run dev

The application should now be running at http://localhost:9002.

📂 Project Structure

Here is an overview of the key directories in the project:

.
├── data/                  # Static JSON data for quests, badges, etc.
├── src/
│   ├── app/               # Next.js routes, pages, and layouts.
│   ├── ai/                # Genkit configurations, flows, and schemas.
│   │   ├── flows/         # AI logic for features like hint generation.
│   │   └── schema/        # Zod schemas for AI input/output validation.
│   ├── components/        # Reusable React components.
│   │   └── ui/            # ShadCN UI components.
│   ├── lib/               # Utility functions and data access logic.
│   └── types/             # TypeScript type definitions.
└── ...

✒️ Author

AK DINESH https://github.com/akdinesh2003