LearnAble - AI-Powered Educational Platform

An emotionally intelligent, AI-driven learning platform that adapts to each student's unique learning style and needs. Built with React, TypeScript, and cutting-edge AI technologies.

🌟 Features

🧠 AI-Powered Learning

Multi-AI Support: OpenAI GPT, Google Gemini, Hugging Face, and Demo Mode
Personalized Content: AI generates lessons tailored to each student's profile
Adaptive Difficulty: Automatically adjusts based on performance
Learning Style Detection: Analyzes behavior to optimize learning approach
Emotional Support: AI companion provides motivation and encouragement

🎮 Gamified Learning Experience

Quest System: Engaging learning missions with XP and rewards
Achievement System: Unlock badges and milestones
Progress Tracking: Visual progress bars and statistics
Streak System: Maintain learning momentum

♿ Accessibility & Inclusion

Multiple Learning Modes: ADHD, Autism, Dyslexia, Visual Support, Standard
Audio Support: Text-to-speech for all content
Visual Adaptations: High contrast, large buttons, screen reader support
Emotional Intelligence: Responds to student mood and energy levels

🎯 Interactive Features

Real-time Feedback: Immediate responses and explanations
Smart Hints: Contextual help when needed
Audio Stories: Engaging narrative content
Mindfulness Breaks: Built-in wellness features

🚀 Quick Start

Prerequisites

Node.js 18+ or Bun
Modern web browser

Installation

Clone the repository

   git clone <repository-url>
   cd LearnAble

Install dependencies

   # Using Bun (recommended)
   bun install
   
   # Or using npm
npm install

Start the development server
```
bun run dev
# or
npm run dev
```
Open your browser Navigate to http://localhost:5173

🤖 AI Configuration

✅ Ready to Use - No Setup Required!

LearnAble comes with real AI APIs pre-configured and ready to use immediately:

✅ Google Gemini: Advanced reasoning and learning

AI Features Working Out of the Box:

🧠 Personalized Content: AI generates lessons based on student profiles
🎯 Adaptive Difficulty: Automatically adjusts based on performance
🧩 Learning Style Detection: Analyzes behavior patterns
💝 Emotional Support: AI companion provides motivation
📊 Performance Analysis: Real-time insights and recommendations
📝 Content Summarization: AI-powered content simplification

Optional: Custom API Keys

If you want to use your own API keys, create a .env file:

VITE_GEMINI_API_KEY=your_gemini_key_here

Note: The platform works perfectly without any API key setup - real AI features are included by default!

🎮 How to Use

1. Welcome Screen

Choose your learning profile (ADHD, Autism, Dyslexia, Visual Support, or Standard)
Each mode adapts the interface and content to your needs

2. Dashboard

Quests: Click any quest to start learning
Learning Mode: Switch between different learning modes
Achievements: Track your progress and unlock badges
Quick Actions: Access daily challenges, mindfulness breaks, audio stories, and AI tutor sessions
AI Settings: Configure your preferred AI provider

3. Learning Interface

Audio Button: Listen to questions (especially helpful for Dyslexia mode)
Hint Button: Get helpful hints when stuck
Navigation: Move between questions with Previous/Next buttons
Progress Tracking: See your real-time progress and stats

4. AI Companion

Interactive Avatar: Click to expand for more features
Smart Suggestions: AI-powered learning recommendations
Emotional Support: Adapts to your mood and provides encouragement
Audio Toggle: Enable/disable voice feedback

🏗️ Project Structure

src/
├── components/
│   ├── WelcomeScreen.tsx      # Initial profile selection
│   ├── LearningDashboard.tsx  # Main dashboard with quests
│   ├── LessonInterface.tsx    # Interactive learning interface
│   ├── AICompanion.tsx        # AI emotional support companion
│   ├── AISettings.tsx         # AI provider configuration
│   └── ui/                    # Reusable UI components
├── lib/
│   ├── ai-service.ts          # AI integration service
│   ├── demo-data.ts           # Mock data for demo mode
│   └── utils.ts               # Utility functions
├── hooks/
│   └── use-toast.ts           # Toast notification hook
└── pages/
    ├── Index.tsx              # Main application page
    └── NotFound.tsx           # 404 page

🧪 AI Features Deep Dive

Content Generation

Personalized Lessons: AI creates content based on student profile, interests, and learning style
Adaptive Questions: Generates questions that match current difficulty and address specific challenges
Multilingual Support: Can generate content in multiple languages

Learning Analytics

Performance Analysis: AI analyzes response patterns to identify strengths and weaknesses
Learning Style Detection: Determines visual, auditory, kinesthetic, and reading preferences
Difficulty Adjustment: Automatically adjusts content complexity based on performance

Emotional Intelligence

Mood Detection: Monitors student engagement and emotional state
Motivational Support: Provides encouragement and emotional validation
Stress Management: Suggests breaks and mindfulness activities

Accessibility Features

Text-to-Speech: AI reads content aloud for students with reading difficulties
Content Summarization: Creates simplified versions of complex content
Alternative Explanations: Provides multiple ways to understand concepts

🚀 Deployment

Vercel (Recommended)

Install Vercel CLI
```
npm i -g vercel
```
Deploy
```
vercel
```
Configure Environment Variables
- Go to your Vercel dashboard
- Add your AI API keys in the Environment Variables section

Netlify

Build the project
```
bun run build
```
Deploy to Netlify
- Drag the dist folder to Netlify
- Or connect your GitHub repository
Configure Environment Variables
- Go to Site Settings > Environment Variables
- Add your AI API keys

Docker

Build the image
```
docker build -t learnable .
```
Run the container
```
docker run -p 3000:3000 learnable
```

🔧 Development

Available Scripts

# Development
bun run dev          # Start development server
bun run build        # Build for production
bun run preview      # Preview production build

# Linting
bun run lint         # Run ESLint
bun run lint:fix     # Fix linting issues

# Type checking
bun run type-check   # Run TypeScript compiler

Adding New AI Features

Extend the AI Service

// In src/lib/ai-service.ts
async newAIFeature(data: any): Promise<AIResponse> {
  // Implement your AI feature
}

Add to the UI

// In your component
const response = await aiService.newAIFeature(data);

Update Types

// Add new interfaces as needed
interface NewFeatureData {
  // Define your data structure
}

🤝 Contributing

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

📝 License

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

🙏 Acknowledgments

shadcn/ui for the beautiful component library
Framer Motion for smooth animations
Lucide React for the icon set
OpenAI, Google, Hugging Face for AI capabilities

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Email: support@learnable.com

🔮 Roadmap

Multi-language Support: Add support for multiple languages
Voice Recognition: Speech-to-text for hands-free interaction
AR/VR Integration: Immersive learning experiences
Collaborative Learning: Group activities and peer learning
Advanced Analytics: Detailed learning insights and reports
Mobile App: Native mobile applications
Offline Mode: Learn without internet connection
Parent Dashboard: Progress tracking for parents/guardians

Made with ❤️ for inclusive education

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
public		public
src		src
.gitignore		.gitignore
DEPLOYMENT_CHECKLIST.md		DEPLOYMENT_CHECKLIST.md
PROJECT_SUMMARY.md		PROJECT_SUMMARY.md
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

SharletAlex/LearnAble

Folders and files

Latest commit

History

Repository files navigation