AI Learning Assistant

A Next.js web application that helps students learn better by providing AI-generated explanations, mind maps, and interactive quizzes for any topic.

Features

• Topic Explanation: Get comprehensive explanations with key concepts, examples, and prerequisites
• Interactive Mind Maps: Visual representation of topic relationships using Mermaid diagrams
• Dynamic Quizzes: 20-question quizzes with different difficulty levels and skill types based on Bloom's taxonomy
• Dark/Light Mode: Responsive design with theme support
• Real-time Generation: AI-powered content generation using OpenAI's advanced models

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• AI Integration: OpenAI API with structured outputs
• Validation: Zod schemas
• Diagrams: Mermaid for mind maps

Getting Started

Prerequisites

• Node.js 18+ installed
• OpenAI API key

Installation

1. Clone the repository:

   git clone <repository-url>
   cd student_learning_app

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and add your OpenAI API key:

   OPENAI_API_KEY=your_openai_api_key_here
   

4. Run the development server:

   npm run dev

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

Usage

1. Enter a Topic: Type any subject you want to learn about in the input field
2. Get Explanation: View a detailed explanation with key concepts and examples
3. Explore Mind Map: Visualize the topic's structure and relationships
4. Take Quiz: Test your knowledge with 20 carefully crafted questions

Project Structure

src/
├── app/
│   ├── api/                 # API routes for AI generation
│   │   ├── generate-explanation/
│   │   ├── generate-mindmap/
│   │   └── generate-quiz/
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Main application page
├── components/             # React components
│   ├── TopicInput.tsx      # Topic input component
│   ├── TopicExplanation.tsx # Explanation display
│   ├── MindmapViewer.tsx   # Mermaid mind map viewer
│   └── QuizSection.tsx     # Interactive quiz component
└── lib/
    ├── openai.ts          # OpenAI client configuration
    └── schemas.ts         # Zod validation schemas

API Endpoints

• POST /api/generate-explanation - Generate topic explanation
• POST /api/generate-mindmap - Generate mind map data
• POST /api/generate-quiz - Generate interactive quiz

Features in Detail

Topic Explanation

• Comprehensive overview with estimated reading time
• Key concepts with detailed explanations and examples
• Prerequisites and difficulty level assessment
• Clean, readable formatting with visual hierarchy

Mind Maps

• Interactive Mermaid diagrams showing topic relationships
• Color-coded nodes for different concept categories
• Hierarchical structure with connection labels
• Fallback text representation for complex diagrams

Interactive Quizzes

• 20 questions per topic with varied question types:
  • Multiple choice
  • True/False
  • Fill-in-the-blank
  • Short answer
• Difficulty levels: Easy, Medium, Hard
• Bloom's taxonomy skill levels: Knowledge, Comprehension, Application, Analysis, Synthesis, Evaluation
• Real-time timer and progress tracking
• Detailed result analysis with explanations

Building for Production

npm run build
npm start

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Note about OpenAI Models

This application is configured to use OpenAI's o1-mini model, which provides excellent reasoning capabilities at a cost-effective rate. The o3 model mentioned in the original request is currently in limited preview. You can update the model in src/lib/openai.ts when o3 becomes generally available.