Adaptive AI Tutor is a comprehensive educational platform that leverages artificial intelligence to provide personalized learning experiences for students. The platform combines interactive video learning, AI-powered assessments, collaborative study groups, and intelligent content generation to create an adaptive learning environment.
// Core Framework
- Next.js 14 (React Framework)
- TypeScript (Type Safety)
- Tailwind CSS (Styling)
- Radix UI (Component Library)
// UI Components
- shadcn/ui (Modern UI Components)
- Lucide React (Icon Library)
- React Hook Form (Form Management)// Chart Libraries
- Chart.js (Core Charting Engine)
- react-chartjs-2 (React Integration)
- Recharts (Additional Chart Components)
// Chart Types Implemented
- Line Charts (Progress Tracking)
- Bar Charts (Subject Comparisons)
- Pie/Doughnut Charts (Distribution Analysis)
- Radar Charts (Skill Assessment)// WebSocket Implementation
- Native WebSocket API
- Real-time Chat System
- Live Notifications
- Connection Status Monitoring// YouTube Integration
- YouTube Data API v3
- Video Embedding
- Search Functionality
- Educational Content Filtering
// Database Options
- Supabase (PostgreSQL)
- Local Storage (Development)
- Environment Variables Management// AI Features
- Content Filtering Algorithms
- Quiz Generation Logic
- PPT Content Creation
- Learning Path Recommendationsadaptive-ai-tutor/
├── app/ # Next.js App Router
│ ├── dashboard/ # Main Application Pages
│ │ ├── videos/ # Video Learning Section
│ │ ├── quizzes/ # Assessment System
│ │ ├── ppt/ # Presentation Generator
│ │ ├── study-groups/ # Collaborative Learning
│ │ ├── learning-paths/ # Structured Curricula
│ │ └── test-results/ # Analytics Dashboard
│ ├── api/ # API Routes
│ │ └── youtube/ # YouTube Integration
│ ├── login/ # Authentication
│ └── register/ # User Registration
├── components/ # Reusable Components
│ ├── ui/ # Base UI Components
│ ├── charts/ # Chart Components
│ ├── moderation/ # Moderation Tools
│ └── websocket/ # Real-time Features
├── lib/ # Utility Libraries
│ ├── youtube-api.ts # YouTube Integration
│ ├── quiz-generator.ts # Assessment Logic
│ ├── chat-moderation.ts # Content Filtering
│ └── learning-paths.ts # Curriculum Management
└── scripts/ # Database Scripts
└── 01-create-tables.sql # Database Schema// Core Components
- YouTubePlayer: Video streaming and controls
- TestResultsChart: Analytics visualization
- GeminiChartBot: AI-powered chart generation
- ModeratedChat: Real-time communication
- LearningPaths: Curriculum management
- StudyGroups: Collaborative features// Local State (React useState)
- Component-level state for UI interactions
- Form data and user inputs
- Temporary display states
// Browser Storage
- localStorage: User preferences, session data
- sessionStorage: Temporary data during session
// Real-time State (WebSocket)
- Chat messages and notifications
- Live user presence
- Real-time updates// Content Filtering Pipeline
1. Raw Content Input → 2. AI Analysis → 3. Educational Scoring → 4. Filter Application → 5. Curated Content Output
// Learning Analytics Pipeline
1. User Actions → 2. Data Collection → 3. Progress Calculation → 4. Chart Generation → 5. Insights Display# Local Development Setup
npm install
npm run dev
# Runs on http://localhost:3000The Adaptive AI Tutor project represents a comprehensive educational platform that successfully combines modern web technologies with AI-powered features to create an engaging, collaborative learning environment. The platform demonstrates proficiency in full-stack development, real-time communication, data visualization, and user experience design.
Key Technical Accomplishments:
This project showcases the ability to build complex, feature-rich applications that solve real-world educational challenges while maintaining high code quality and user experience standards.