🚀 LearnAI - AI-Powered Learning Platform

🎯 Personalized learning roadmaps powered by AI with secure authentication

Build your skills with interactive, visual learning journeys tailored to your goals

---

✨ Features

🔐 Secure Authentication Complete JWT-based user system with password hashing	🤖 AI-Powered Roadmaps Personalized learning paths generated by AI	📈 Progress Tracking Visual progress indicators and milestone tracking
🎯 Interactive Roadmaps Visual learning journey with step dependencies	📱 Responsive Design Works seamlessly on all devices	🛡️ Security Features Rate limiting, CORS, and input validation

---

🛠️ Tech Stack

🎨 Frontend

React 19          - Modern React with hooks and concurrent features
TypeScript        - Type-safe development experience
Vite             - Lightning-fast build tool and dev server
Tailwind CSS     - Utility-first CSS framework
Lucide React     - Beautiful, customizable icon library
React Flow       - Interactive node-based diagrams

⚙️ Backend

Node.js          - JavaScript runtime environment
Express.js       - Fast, unopinionated web framework
MongoDB          - NoSQL document database
Mongoose         - Elegant MongoDB object modeling
JWT              - Secure token-based authentication
bcryptjs         - Advanced password hashing
express-validator - Server-side input validation
helmet           - Security middleware collection
cors             - Cross-origin resource sharing

---

📁 Project Structure

📦 LearnAI/
├── 🎨 src/                    # Frontend React application
│   ├── 🧩 components/         # Reusable UI components
│   │   ├── ui/                # Base UI components (Button, Card, etc.)
│   │   ├── layout/            # Layout components (Header, Sidebar)
│   │   └── forms/             # Form components
│   ├── 📄 pages/             # Page components and route handlers
│   │   ├── auth/              # Authentication pages
│   │   ├── dashboard/         # Dashboard and user pages
│   │   └── roadmap/           # Roadmap-related pages
│   ├── 🔧 utils/             # Utility functions
│   │   ├── auth.ts            # Authentication helpers
│   │   ├── api.ts             # API client configuration
│   │   └── constants.ts       # Application constants
│   ├── 📝 types/             # TypeScript type definitions
│   └── 🎭 mockData/          # Mock data for development
├── 🖥️ backend/               # Backend Node.js application
│   ├── ⚙️ config/            # Configuration files
│   │   └── database.js        # MongoDB connection setup
│   ├── 🎮 controllers/       # Business logic controllers
│   │   ├── authController.js  # Authentication logic
│   │   ├── userController.js  # User management
│   │   └── roadmapController.js # Roadmap operations
│   ├── 🛡️ middleware/        # Express middleware
│   │   ├── auth.js            # JWT authentication middleware
│   │   ├── validation.js      # Input validation
│   │   └── rateLimiter.js     # Rate limiting
│   ├── 📊 models/            # Database models
│   │   ├── User.js            # User model schema
│   │   ├── Roadmap.js         # Roadmap model schema
│   │   └── Progress.js        # Progress tracking schema
│   ├── 🛣️ routes/            # API route definitions
│   │   ├── auth.js            # Authentication routes
│   │   ├── users.js           # User management routes
│   │   └── roadmaps.js        # Roadmap routes
│   └── 🔧 utils/             # Backend utility functions
├── 📖 docs/                   # Documentation files
├── 🧪 tests/                  # Test files
└── 📄 README.md

---

🚀 Quick Start Guide

📋 Prerequisites

Requirement	Version	Download
Node.js	18.0+	Download
MongoDB	6.0+	Download or Atlas
Package Manager	npm/yarn	Included with Node.js

1️⃣ Clone and Install

# Clone the repository
git clone https://github.com/yourusername/LearnAI.git
cd LearnAI

# Install frontend dependencies
npm install

# Install backend dependencies
cd backend
npm install
cd ..

2️⃣ Environment Setup

🖥️ Backend Configuration

Create backend/.env:

cd backend
cp .env.example .env

Configure your environment variables:

# 🔧 Server Configuration
PORT=5000
NODE_ENV=development

# 🗄️ MongoDB Configuration
MONGODB_URI=mongodb://localhost:27017/LearnAI
# For Atlas: mongodb+srv://username:[email protected]/LearnAI

# 🔑 JWT Configuration
JWT_SECRET=your-super-secret-jwt-key-min-32-chars-change-in-production
JWT_EXPIRES_IN=7d

# 🌐 CORS Configuration
FRONTEND_URL=http://localhost:5173

# 🛡️ Security Configuration
RATE_LIMIT_WINDOW_MS=900000    # 15 minutes
RATE_LIMIT_MAX_REQUESTS=100    # Max 100 requests per window

# 📧 Email Configuration (Optional)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=[email protected]
SMTP_PASS=your-app-password

🎨 Frontend Configuration

Create root .env:

# API Configuration
VITE_API_URL=http://localhost:5000/api

# Feature Flags
VITE_ENABLE_ANALYTICS=false
VITE_ENABLE_DEBUG=true

3️⃣ Database Setup

🏠 Local MongoDB

# Install MongoDB locally
# macOS with Homebrew
brew install mongodb-community

# Start MongoDB service
brew services start mongodb-community

# Or start manually
mongod --config /usr/local/etc/mongod.conf

☁️ MongoDB Atlas (Recommended for Production)

1. 📝 Create a MongoDB Atlas account
2. 🆕 Create a new cluster
3. 👤 Create a database user
4. 🌐 Whitelist your IP address
5. 🔗 Get your connection string
6. ✏️ Update MONGODB_URI in your .env file

4️⃣ Launch Application

Start Backend Server

cd backend
npm run dev

🌐 Backend runs on: http://localhost:5000

Start Frontend Server

# In a new terminal from root directory
npm run dev

🌐 Frontend runs on: http://localhost:5173

5️⃣ Verify Setup

Service	URL	Status
🎨 Frontend	http://localhost:5173	Should show login page
🖥️ Backend Health	http://localhost:5000/health	Should return {"status":"OK"}
🗄️ Database	MongoDB Compass	Connect with your URI

---

🔌 API Documentation

🔐 Authentication Endpoints

POST /api/auth/signup - Register new user

Request Body:

{
  "name": "John Doe",
  "email": "[email protected]",
  "password": "SecurePassword123!"
}

Response:

{
  "success": true,
  "message": "User created successfully",
  "data": {
    "user": {
      "id": "user_id",
      "name": "John Doe",
      "email": "[email protected]"
    },
    "token": "jwt_token_here"
  }
}

POST /api/auth/signin - Login user

Request Body:

{
  "email": "[email protected]",
  "password": "SecurePassword123!"
}

Response:

{
  "success": true,
  "message": "Login successful",
  "data": {
    "user": {
      "id": "user_id",
      "name": "John Doe",
      "email": "[email protected]"
    },
    "token": "jwt_token_here"
  }
}

GET /api/auth/me - Get current user

Headers:

Authorization: Bearer jwt_token_here

Response:

{
  "success": true,
  "data": {
    "user": {
      "id": "user_id",
      "name": "John Doe",
      "email": "[email protected]",
      "createdAt": "2024-01-01T00:00:00.000Z"
    }
  }
}

🎯 Roadmap Endpoints

GET /api/roadmaps - Get user's roadmaps

Headers:

Authorization: Bearer jwt_token_here

Response:

{
  "success": true,
  "data": {
    "roadmaps": [
      {
        "id": "roadmap_id",
        "title": "Full Stack Development",
        "description": "Complete web development roadmap",
        "progress": 45,
        "totalSteps": 12,
        "completedSteps": 5
      }
    ]
  }
}

---

🛡️ Security Features

Security Layer	Implementation	Protection Against
🔐 Password Security	bcrypt with salt rounds	Rainbow table attacks
🎫 JWT Authentication	Secure token-based auth	Session hijacking
🚦 Rate Limiting	Express rate limiter	Brute force attacks
🌐 CORS Protection	Configured origins	Cross-origin attacks
✅ Input Validation	express-validator	Injection attacks
🛡️ HTTP Security	Helmet middleware	Various web vulnerabilities

---

🧪 Development

📜 Available Scripts

Frontend Commands

npm run dev          # 🚀 Start development server
npm run build        # 🏗️ Build for production
npm run preview      # 👀 Preview production build
npm run lint         # 🔍 Run ESLint
npm run type-check   # 📝 Run TypeScript checks

Backend Commands

npm run dev          # 🔄 Start with nodemon (hot reload)
npm start            # 🏃 Start production server
npm run test         # 🧪 Run tests
npm run seed         # 🌱 Seed database with sample data

🏗️ Development Workflow

1. 🔄 Hot Reloading: Both frontend and backend support hot reloading
2. 🎨 Code Formatting: Prettier configuration included
3. 🔍 Linting: ESLint rules for consistent code style
4. 📝 TypeScript: Full type safety on frontend
5. 🧪 Testing: Jest setup for unit and integration tests

🗂️ Code Organization

📦 Architecture Pattern: Feature-based modules
├── 🧩 Components: Reusable UI building blocks
├── 📄 Pages: Route-level components
├── 🎮 Controllers: Business logic handlers
├── 📊 Models: Data structure definitions
├── 🛡️ Middleware: Request/response interceptors
├── 🔧 Utils: Helper functions and utilities

---

🚀 Deployment Guide

☁️ Backend Deployment Options

Platform	Complexity	Free Tier	Guide
🚂 Railway	Easy	✅ Yes	Deploy
▲ Vercel	Easy	✅ Yes	Deploy
🟣 Heroku	Medium	❌ No	Deploy
🌊 DigitalOcean	Medium	💰 Credit	Deploy

🎨 Frontend Deployment

# Build the application
npm run build

# Deploy options:
# 1. Vercel: vercel --prod
# 2. Netlify: ntl deploy --prod --dir=dist
# 3. GitHub Pages: npm run deploy

🔧 Environment Variables for Production

# Production Backend (.env)
NODE_ENV=production
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_super_secure_production_secret
FRONTEND_URL=https://your-domain.com

# Production Frontend (.env.production)
VITE_API_URL=https://your-api-domain.com/api
VITE_ENABLE_ANALYTICS=true

---

🤝 Contributing

We welcome contributions! Please follow these steps:

🚀 Quick Contribution Guide

1. 🍴 Fork the repository
2. 🌿 Create a feature branch: git checkout -b feature/amazing-feature
3. ✨ Make your changes with proper commit messages
4. 🧪 Add tests if applicable
5. 📝 Update documentation if needed
6. 🔄 Submit a pull request

📏 Code Style Guidelines

• ✅ Follow existing code patterns
• 📝 Use TypeScript for new frontend code
• 🧪 Add tests for new features
• 📖 Update documentation
• 🏷️ Use conventional commit messages

🏷️ Commit Message Format

type(scope): description

feat(auth): add password reset functionality
fix(ui): resolve mobile navigation issue
docs(api): update endpoint documentation

---

📊 Performance & Monitoring

🎯 Performance Features

• ⚡ Code Splitting: Automatic route-based splitting
• 🗜️ Asset Optimization: Vite's built-in optimizations
• 💾 Caching: Strategic API response caching
• 📱 Lazy Loading: Components loaded on demand

📈 Monitoring Setup

// Performance monitoring (optional)
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);

---

🐛 Troubleshooting

❌ Common Issues & Solutions

MongoDB Connection Error

# Check if MongoDB is running
brew services list | grep mongodb
# Restart if needed
brew services restart mongodb-community

Port Already in Use

# Find process using port 5000
lsof -i :5000
# Kill the process
kill -9 PID

JWT Token Issues

• Verify JWT_SECRET is set and consistent
• Check token expiration settings
• Ensure proper token storage on frontend

CORS Errors

• Verify FRONTEND_URL matches your development URL
• Check browser network tab for preflight requests
• Ensure credentials are included in requests

---

📚 Additional Resources

Resource	Link	Description
📖 Documentation	View Docs	Comprehensive API and feature docs
🎨 Design System	Design Guide	UI components and guidelines
🧪 API Testing	Postman Collection	Ready-to-use API tests
🎯 Roadmap	Project Roadmap	Upcoming features and timeline

---

📄 License

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

Made with ❤️ by Aditya

⭐ Star this project • 🐛 Report Bug • 💡 Request Feature

---

_{🚀 Ready to build amazing learning experiences? Let's get started!}