Learn-ML-DL---Interactive-Learning-Platform

# Learn ML & DL - Interactive Learning Platform

🚀 **Production-ready ML/DL education platform with live Python execution in the browser**

## 🎯 Features

- ✅ **Split-screen landing page** with animated ML/DL selection
- ✅ **Interactive lessons** for Machine Learning & Deep Learning
- ✅ **Monaco Editor** integration for code editing
- ✅ **Pyodide** - Run Python code directly in the browser
- ✅ **AI-powered explanations** via OpenAI API (optional)
- ✅ **Progress tracking** with MongoDB
- ✅ **Quiz system** for each lesson
- ✅ **Responsive design** with TailwindCSS
- ✅ **Production-ready** deployment to AWS EC2

## 🛠️ Tech Stack

| Layer | Technology |
|-------|-----------|
| Frontend | EJS + TailwindCSS + VanillaJS |
| Backend | Node.js + Express.js |
| Python Runtime | Pyodide (browser-based) |
| Code Editor | Monaco Editor |
| AI | OpenAI API (optional) |
| Database | MongoDB / MongoDB Atlas |
| Deployment | AWS EC2 + Nginx + PM2 |

## 📁 Project Structure

```
learnML-DL-Web/
├── server.js                 # Express app entry point
├── package.json              # Dependencies
├── ecosystem.config.js       # PM2 configuration
├── tailwind.config.js        # Tailwind configuration
├── .env.example              # Environment variables template
├── config/
│   └── database.js          # MongoDB connection
├── models/
│   ├── User.js              # User schema
│   ├── Lesson.js            # Lesson schema
│   └── Progress.js          # Progress tracking schema
├── routes/
│   ├── index.js             # Main routes
│   ├── mlRoutes.js          # ML lesson routes
│   ├── dlRoutes.js          # DL lesson routes
│   └── apiRoutes.js         # API endpoints
├── views/
│   ├── index.ejs            # Landing page (split-screen)
│   ├── 404.ejs              # 404 error page
│   ├── error.ejs            # Error page
│   ├── ml/
│   │   ├── home.ejs         # ML lessons overview
│   │   └── playground.ejs   # ML code playground
│   └── dl/
│       ├── home.ejs         # DL lessons overview
│       └── playground.ejs   # DL code playground
└── public/
    ├── css/
    │   ├── input.css        # Tailwind source
    │   └── output.css       # Compiled CSS
    └── js/
        └── (client-side scripts)
```

## 🚀 Local Development Setup

### Prerequisites

- Node.js >= 18.0.0
- npm >= 9.0.0
- MongoDB (local or MongoDB Atlas)

### Installation

1. **Clone the repository**
```bash
git clone <your-repo-url>
cd learnML-DL-Web
```

2. **Install dependencies**
```bash
npm install
```

3. **Configure environment**
```bash
cp .env.example .env
# Edit .env with your configurations
```

4. **Build Tailwind CSS**
```bash
npm run build:css
```

5. **Start development server**
```bash
npm run dev
```

6. **Visit** `http://localhost:3000`

## 🌐 AWS EC2 Production Deployment

### Step 1: Prepare EC2 Instance

```bash
# Launch Ubuntu 24.04 LTS instance
# Instance type: t2.medium or better (2 CPU / 4GB RAM)
# Security Groups: Allow HTTP (80), HTTPS (443), SSH (22)
# Allocate Elastic IP for static IP address

# SSH into your instance
ssh -i your-key.pem ubuntu@your-elastic-ip
```

### Step 2: Server Setup

```bash
# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js via nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.6/install.sh | bash
source ~/.bashrc
nvm install --lts
nvm use --lts

# Install Git
sudo apt install git -y

# Install PM2 globally
npm install -g pm2

# Install Nginx
sudo apt install nginx -y

# Install MongoDB (if not using Atlas)
# Or configure MongoDB Atlas connection string in .env
```

### Step 3: Deploy Application

```bash
# Clone your repository
git clone <your-repo-url>
cd learnML-DL-Web

# Install dependencies
npm install --production

# Configure environment
cp .env.example .env
nano .env
# Set production values:
# - NODE_ENV=production
# - MONGODB_URI=your-mongodb-connection-string
# - SESSION_SECRET=random-secure-string
# - OPENAI_API_KEY=your-key (optional)

# Build Tailwind CSS
npx tailwindcss -i ./public/css/input.css -o ./public/css/output.css --minify

# Start with PM2
pm2 start ecosystem.config.js --env production
pm2 save
pm2 startup
```

### Step 4: Configure Nginx Reverse Proxy

```bash
# Create Nginx configuration
sudo nano /etc/nginx/sites-available/learnml-dl
```

Add this configuration:

```nginx
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

```bash
# Enable site
sudo ln -s /etc/nginx/sites-available/learnml-dl /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
```

### Step 5: Setup SSL with Let's Encrypt

```bash
# Install Certbot
sudo apt install certbot python3-certbot-nginx -y

# Obtain SSL certificate
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# Auto-renewal is configured automatically
# Test renewal
sudo certbot renew --dry-run
```

## 🔄 Deployment Updates

```bash
# SSH into server
cd learnML-DL-Web

# Pull latest changes
git pull origin main

# Install new dependencies (if any)
npm install --production

# Rebuild CSS (if changed)
npx tailwindcss -i ./public/css/input.css -o ./public/css/output.css --minify

# Restart application
pm2 reload learnml-dl-web
```

## 📊 PM2 Management

```bash
# View logs
pm2 logs learnml-dl-web

# Monitor
pm2 monit

# Restart
pm2 restart learnml-dl-web

# Stop
pm2 stop learnml-dl-web

# Status
pm2 status
```

## 🧪 Testing

```bash
# Test local setup
npm start

# Test production build
NODE_ENV=production npm start

# Check if Pyodide loads in browser console
# Check if Monaco Editor initializes
# Test API endpoints: /api/health
```

## 📝 Environment Variables

| Variable | Description | Required |
|----------|-------------|----------|
| `NODE_ENV` | Environment (development/production) | Yes |
| `PORT` | Server port (default: 3000) | Yes |
| `MONGODB_URI` | MongoDB connection string | Yes |
| `SESSION_SECRET` | Session encryption key | Yes |
| `OPENAI_API_KEY` | OpenAI API key for AI features | Optional |
| `DOMAIN` | Your domain name | Optional |

## 🎓 Course Content

### Machine Learning Topics
- Introduction to ML
- Linear Regression
- Logistic Regression
- Decision Trees
- Random Forest
- Support Vector Machines
- K-Nearest Neighbors
- K-Means Clustering
- Principal Component Analysis
- Gradient Boosting

### Deep Learning Topics
- Introduction to Deep Learning
- Neural Networks Basics
- Activation Functions
- Backpropagation
- Convolutional Neural Networks (CNNs)
- Recurrent Neural Networks (RNNs)
- LSTM Networks
- Transformer Architecture
- Generative Adversarial Networks (GANs)
- Autoencoders

## 🤖 AI Features (Optional)

Enable AI-powered features by adding your OpenAI API key to `.env`:

- **Code Explanation**: AI explains your Python code
- **Quiz Generation**: Automatically generate quizzes for topics
- **Hints & Tips**: Context-aware learning assistance

## 🐛 Troubleshooting

### Pyodide not loading
- Check browser console for errors
- Ensure CDN is accessible
- Clear browser cache

### MongoDB connection fails
- Verify connection string in `.env`
- Check MongoDB Atlas IP whitelist
- Ensure database user has correct permissions

### Nginx issues
- Check logs: `sudo tail -f /var/log/nginx/error.log`
- Verify port 3000 is not blocked
- Test config: `sudo nginx -t`

### PM2 app crashes
- Check logs: `pm2 logs`
- Verify all environment variables are set
- Check disk space and memory

## 📈 Performance Optimization

- Enable Nginx caching for static assets
- Use CDN for Monaco Editor and Pyodide
- Implement lazy loading for lessons
- Compress responses with `compression` middleware
- Use PM2 cluster mode for multiple CPU cores

## 🔐 Security Best Practices

- ✅ Helmet.js for security headers
- ✅ Environment variables for secrets
- ✅ HTTPS with Let's Encrypt
- ✅ Rate limiting on API endpoints (add if needed)
- ✅ Input validation and sanitization
- ✅ MongoDB injection prevention with Mongoose

## 📄 License

MIT License - feel free to use for educational purposes

## 👤 Author

Can Uzlaş - [GitHub](https://github.com/canuzlas)

## 🙏 Acknowledgments

- [Pyodide](https://pyodide.org/) - Python in the browser
- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - VS Code editor component
- [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Express.js](https://expressjs.com/) - Web framework

---

**Happy Learning! 🚀📚**