# FreeTube - Video Sharing Platform

![FreeTube Logo](frontend/src/assets/img/hero.png)

## 📋 Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Configuration](#configuration)
- [Usage](#usage)
- [API Documentation](#api-documentation)
- [Project Structure](#project-structure)
- [Development](#development)
- [Testing](#testing)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)

## 🎯 Overview

FreeTube is a modern video sharing platform built as a YouTube competitor. It allows users to upload, watch, and interact with videos through comments and likes. The platform features user authentication, video management, channel subscriptions, and a recommendation system.

This project is part of a 3-part development resit assignment focusing on:
- **Part 1**: HTTP server serving HTML pages
- **Part 2**: REST API for video, user, and comment management
- **Part 3**: Interactive frontend user interface

## ✨ Features

### 🔐 Authentication System
- User registration with profile picture upload
- Secure login with JWT tokens
- Persistent sessions with localStorage
- Protected routes and authentication guards
- Profile management and display

### 📹 Video Management
- Video upload with thumbnail generation
- Video streaming and playback
- Video metadata management
- Video search and filtering

### 👥 User Features
- User profiles with customizable avatars
- Channel creation and management
- Subscription system
- User activity tracking

### 💬 Social Features
- Video commenting system
- Like/dislike functionality
- Video recommendations
- Trending videos section

### 🎨 Frontend Features
- Responsive React-based UI
- Modern design with Tailwind CSS
- Client-side routing with React Router
- Real-time updates and interactions

## 🛠 Tech Stack

### Backend
- **Runtime**: Node.js
- **Framework**: Express.js
- **Database**: PostgreSQL
- **Authentication**: JWT (JSON Web Tokens)
- **File Upload**: Multer
- **Testing**: Vitest

### Frontend
- **Framework**: React 18
- **Build Tool**: Vite
- **Styling**: Tailwind CSS
- **Routing**: React Router
- **State Management**: React Context API
- **Fonts**: Montserrat, Inter

### Infrastructure
- **Containerization**: Docker & Docker Compose
- **Reverse Proxy**: Nginx
- **Development**: Hot reload for both frontend and backend

## 📋 Prerequisites

Before you begin, ensure you have the following installed:
- [Docker](https://docs.docker.com/get-docker/) (v20.10+)
- [Docker Compose](https://docs.docker.com/compose/install/) (v2.0+)
- [Git](https://git-scm.com/downloads)

## 🚀 Installation

### Quick Start with Docker (Recommended)

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd 3RESIT_DOCKER
   ```

2. **Set up environment variables**
   Create a `.env` file in the root directory:
   ```env
   # Database Configuration
   POSTGRES_USER=freetube_user
   POSTGRES_PASSWORD=your_secure_password
   POSTGRES_DB=freetube_db
   POSTGRES_HOST=db

   # Backend Configuration
   BACKEND_PORT=8000
   JWT_SECRET=your_jwt_secret_key_min_32_chars
   LOG_FILE=/var/log/freetube/access.log
   ```

3. **Build and start the application**
   ```bash
   docker-compose up --build
   ```

4. **Access the application**
   - Frontend: http://localhost
   - Backend API: http://localhost:8000
   - Database: localhost:5432

### Manual Installation

<details>
<summary>Click to expand manual installation steps</summary>

#### Backend Setup
```bash
cd backend
npm install
npm run dev
```

#### Frontend Setup
```bash
cd frontend
npm install
npm run dev
```

#### Database Setup
- Install PostgreSQL
- Create database and user
- Run migrations (if available)
</details>

## ⚙️ Configuration

### Environment Variables

| Variable | Description | Default | Required |
|----------|-------------|---------|----------|
| `POSTGRES_USER` | Database username | - | ✅ |
| `POSTGRES_PASSWORD` | Database password | - | ✅ |
| `POSTGRES_DB` | Database name | - | ✅ |
| `POSTGRES_HOST` | Database host | db | ✅ |
| `BACKEND_PORT` | Backend server port | 8000 | ✅ |
| `JWT_SECRET` | JWT signing secret | - | ✅ |
| `LOG_FILE` | Log file path | /var/log/freetube/access.log | ❌ |

### Docker Volumes

The application uses the following volumes:
- `./backend/logs:/var/log/freetube` - Application logs
- `./backend/app/uploads:/app/app/uploads` - Uploaded files (videos, images)
- Database data volume for PostgreSQL persistence

## 📖 Usage

### Getting Started

1. **Create an Account**
   - Navigate to http://localhost
   - Click "Créer un compte"
   - Fill in your details and optionally upload a profile picture
   - Submit the form to register and automatically log in

2. **Login**
   - Click "Se connecter" on the homepage
   - Enter your username and password
   - You'll be redirected to the authenticated homepage

3. **Upload Videos**
   - Use the API endpoints to upload videos (see API documentation)
   - Videos are stored in the uploads directory

4. **Browse Content**
   - View recommendations on the homepage
   - Search for videos using the search bar
   - Browse trending videos and top creators

### Authentication Flow

The authentication system works as follows:
1. User registers/logs in through the frontend forms
2. Backend validates credentials and returns JWT token
3. Token is stored in localStorage for persistence
4. Protected routes check authentication status
5. Navbar updates to show user profile and logout option

## 📚 API Documentation

### Authentication Endpoints

#### Register User
```http
POST /api/users/
Content-Type: multipart/form-data

email: user@example.com
username: johndoe
password: securepassword
picture: [file upload]
```

#### Login User
```http
POST /api/users/login
Content-Type: application/json

{
  "username": "johndoe",
  "password": "securepassword"
}
```

### Media Endpoints

#### Get Profile Picture
```http
GET /api/media/profile/{filename}
```

#### Get Video Thumbnail
```http
GET /api/media/thumbnail/{filename}
```

### Additional Endpoints

- **Videos**: `/api/videos/`
- **Comments**: `/api/comments/`
- **Channels**: `/api/channels/`
- **Playlists**: `/api/playlists/`
- **Recommendations**: `/api/recommendations/`

For detailed API documentation, check the `.http` files in the `backend/requests/` directory.

## 📁 Project Structure

```
3RESIT_DOCKER/
├── backend/                    # Node.js Express backend
│   ├── app/
│   │   ├── controllers/        # Request handlers
│   │   ├── middlewares/        # Express middlewares
│   │   ├── routes/            # API route definitions
│   │   ├── uploads/           # File storage
│   │   └── utils/             # Utility functions
│   ├── logs/                  # Application logs
│   ├── requests/              # HTTP request examples
│   └── test/                  # Test files
├── frontend/                  # React frontend
│   ├── src/
│   │   ├── components/        # Reusable React components
│   │   ├── contexts/          # React Context providers
│   │   ├── pages/             # Page components
│   │   ├── routes/            # Route configuration
│   │   └── assets/            # Static assets
│   └── public/                # Public assets
├── nginx/                     # Nginx configuration
└── docker-compose.yaml       # Docker orchestration
```

## 🔧 Development

### Available Scripts

#### Backend
```bash
npm run dev          # Start development server with hot reload
npm run start        # Start production server
npm run test         # Run tests
```

#### Frontend
```bash
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
```

#### Docker Commands
```bash
# Start all services
docker-compose up --build

# Stop all services
docker-compose down

# View logs
docker-compose logs [service-name]

# Restart specific service
docker-compose restart [service-name]

# Reset database
docker-compose down --volumes
```

### Development Workflow

1. **Backend Changes**: Automatically reload with nodemon
2. **Frontend Changes**: Hot module replacement with Vite
3. **Database Changes**: Restart containers to apply schema changes
4. **Nginx Changes**: Restart nginx service

### File Upload Testing

Use the provided `.http` files in `backend/requests/` to test API endpoints:
- `user.http` - User registration and authentication
- `video.http` - Video management
- `medias.http` - Media file serving
- `comment.http` - Comment system

## 🧪 Testing

### Running Tests

```bash
# Backend tests
cd backend
npm test

# Frontend tests (if configured)
cd frontend
npm test
```

### Test Structure

- **Unit Tests**: Individual component/function testing
- **Integration Tests**: API endpoint testing
- **E2E Tests**: Full application workflow testing

Current test coverage includes:
- User authentication
- Video management
- Comment system
- Channel operations
- Playlist functionality

## 🔍 Troubleshooting

### Common Issues

#### Authentication Problems
- **Blank screen on reload**: Check browser console for context errors
- **Login not persisting**: Verify JWT token in localStorage
- **Registration fails**: Check file upload size limits

#### Media File Issues
- **404 on images**: Verify nginx proxy configuration
- **Upload fails**: Check file permissions and upload directory

#### Docker Issues
- **Containers won't start**: Check port conflicts
- **Database connection fails**: Verify environment variables
- **Build failures**: Clear Docker cache with `docker system prune`

### Debug Commands

```bash
# Check container status
docker-compose ps

# View service logs
docker-compose logs -f [service-name]

# Access container shell
docker-compose exec [service-name] /bin/bash

# Reset everything
docker-compose down --volumes --rmi all
docker system prune -a
```

### Performance Optimization

- Enable nginx caching for static assets
- Implement image optimization for uploads
- Use CDN for media file delivery
- Database query optimization
- Frontend code splitting

## 🤝 Contributing

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

### Code Style

- **Backend**: ESLint with Node.js rules
- **Frontend**: ESLint with React rules
- **Formatting**: Prettier for consistent code style
- **Commits**: Conventional commit messages

## 📜 License

This project is part of an educational assignment. All rights reserved.

## 👥 Authors

- **Developer**: [Your Name]
- **Institution**: [Institution Name]
- **Course**: 3 RESIT - Web Development

---

## 📞 Support

For support and questions:
- Create an issue in the repository
- Check the troubleshooting section
- Review the API documentation

**Happy coding! 🚀**