diff --git a/README.md b/README.md index b70c783..6db5d56 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,436 @@ -# 3 RESIT - -## Introduction -Ce projet consiste en la création d'une plateforme concurrente a Youtube, permettant aux utilisateurs de publier des vidéos, de les visionner et de les commenter. Le projet est divisé en plusieurs parties, chacune correspondant à une fonctionnalité spécifique. - -## Fonctionnalités -- **Partie 1** : Création d'un serveur HTTP permettant de servir des pages HTML. -- **Partie 2** : Création d'une API REST permettant de gérer les vidéos, les utilisateurs et les commentaires. -- **Partie 3** : Création d'une interface utilisateur permettant de visualiser les vidéos, de les commenter et de les liker. - -## Installation -Il y a plusieurs façons d'installer le projet. La méthode la plus simple est d'utiliser Docker. Il est également possible de l'installer manuellement en clonant le dépôt et en installant les dépendances. - -### Installation avec Docker -1. Assurez-vous d'avoir Docker et Docker Compose installé sur votre machine. - -2. Entrer les variables d'environnement dans le fichier `.env` : - ```.env - BACKEND_PORT= - DB_USER= - DB_NAME= - DB_HOST= - DB_PASSWORD= - JWT_SECRET= - LOG_FILE= - ``` -3. Lancer le projet avec Docker Compose : - ```bash - docker-compose up --build - ``` - -### Installation manuelle - -// TODO: Ajouter les instructions d'installation manuelle - -## Utilisation -- Pour utiliser la plateforme, vous pouvez accéder à l'interface utilisateur via votre navigateur web à l'adresse `http://localhost:80` (ou le port que vous avez configuré dans le fichier `.env`). -- Pour interagir avec l'API REST, vous pouvez utiliser un outil comme Postman ou curl. Les endpoints de l'API sont documentés dans le fichier `api.md`. - -## Commandes utiles -- Pour supprimer les conteneurs Docker : - ```bash - docker-compose down --volumes // Supprime les volumes pour réinitialiser la base de données - ``` -- Pour vider la base de données : - ```bash - docker-compose exec resit_backend node tools flush // Vide la base de données sans supprimer les conteneurs ni les tables - ``` +# 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 + 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 + +
+Click to expand manual installation steps + +#### 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) +
+ +## ⚙️ 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! 🚀**