diff --git a/README.md b/README.md index 6db5d56..0359ba0 100644 --- a/README.md +++ b/README.md @@ -1,436 +1,502 @@ -# 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 -``` +## Sommaire + +1) Introduction +2) Description du projet +3) La pile technologique + 1) Le serveur + 2) Le site web + 3) La base de donnĂ©es +4) Le serveur + 1) Les dĂ©pendances + 2) Le fonctionnement +5) Le site web + 1) Les dĂ©pendances + 2) Le fonctionnement +6) La base de donnĂ©es +7) Installation du projet + 1) Docker Compose + 2) Script Shell + 3) Manuellement +8) Conclusion + +## Introduction + +Cette documentation est Ă  destination des futurs dĂ©veloppeurs travaillant sur Freetube. Elle a pour but d’expliquer le fonctionnement technique de toutes les couches de l’application et Ă  justifier les choix pris pour chaque langage et framework.  + +La documentation est une ressource indispensable pour tous ceux voulant comprendre le fonctionnement interne de Freetube. Les parties dĂ©montrĂ©es ici couvrent toutes les couches de l’application. Par ailleurs des diagrammes UML et schĂ©mas de base de donnĂ©es vous sont fournies pour une meilleure comprĂ©hension du code. Un indexe est disponible en fin de document.  + +Cette documentation est Ă  un but technique, elle rentre volontairement dans les dĂ©tails du fonctionnement de chaque partie. Elle n’est pas faite pour ĂȘtre lu par un utilisateur, un manuel utilisateur vous a Ă©tĂ© fournies pour remplir ce besoin. + +De plus les documentations externes sont disponible en fin de document et un **Swagger** est prĂ©sent sur l'endpoint `/api/api-docs` pour une documentation de l'API plus approfondie. + +## Description du projet + +Il m’a Ă©tĂ© demandĂ© de crĂ©er une plateforme concurrente à YouTube nommĂ©e Freetube. Cette alternative a pour but de mieux remplir les demandes des utilisateurs, pas d’abonnement ni publicitĂ© pour consommer ou poster des vidĂ©os sur la plateforme.  + +Le cahier des charges du projet demande certaines fonctionnalitĂ©s Ă  implĂ©menter. Les utilisateurs doivent pourvoir regarder des vidĂ©os sans avoir Ă  se connecter oĂč à crĂ©er de compte, ils doivent pouvoir crĂ©er un compte et le gĂ©rer, pouvoir crĂ©er une chaĂźne la gĂ©rer et y poster des vidĂ©os. La fonctionnalitĂ© de vidĂ©o privĂ© a aussi Ă©tĂ© demandĂ©.  + +Pour ce projet j’avais la main libre sur la pile technologique Ă  utiliser tout en respectant les demandes d’efficacitĂ© d’une plateforme de streaming vidĂ©o. + +## La pile technologique + +### Le serveur + +Le serveur a Ă©tĂ© codĂ© en **Nodejs**, j’ai choisi ce langage car il permet d’implĂ©menter une **API REST** efficacement grĂące Ă  son implĂ©mentation native de l’asynchrone indispensable pour une API REST. NodeJS Ă©tant basĂ© sur **Javascript** il n’est pas le plus efficient mais ce n’est pas dĂ©rangeant car nous travaillons avec une API, le temps de rĂ©ponse sera biaisĂ© par la connexion internet de l’utilisateur. + +### Le site web + +Le site web a lui Ă©tĂ© codĂ© en **ReactJS** une librairie Javascript permettant de crĂ©er des interfaces utilisateur. ReactJS Ă©tant lui aussi basĂ© sur Javascript, cela permet une maintenabilitĂ© plus simple car les deux parties sont dans le mĂȘme langages, de plus le site web bĂ©nĂ©ficie lui aussi de l’implĂ©mentation de l’asynchrone. J’ai choisi d’utiliser ReactJS car il permet l’utilisation de **components** permettant le live reload et Ă©vite la duplication de code inutile. + +### La base de donnĂ©es -#### Database Setup -- Install PostgreSQL -- Create database and user -- Run migrations (if available) -
+La base de donnĂ©es est en **PostgreSQL**, un langage basĂ© sur **SQL** largement utilisĂ© pour communiquer avec une base de donnĂ©es. Cependant PostgreSQL possĂšde quelques avantages par rapport Ă  une base de donnĂ©es comme **MySQL**, il intĂšgre une trĂšs bonne gestion du **JSON** que j’ai beaucoup utilisĂ© dans ce projet et il est **Open Source**. -## ⚙ Configuration +## Le serveur -### Environment Variables +### Les dĂ©pendances -| 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 | ❌ | +Le serveur NodeJS sert de plateforme entre le site web et la base de donnĂ©es, il doit donc pouvoir recevoir des requĂȘtes HTTP et envoyer des requĂȘtes SQL. Pour les requĂȘtes HTTP j’ai choisis le framework **ExpressJS** car il est trĂšs connu et a donc beaucoup de contenu disponible sur internet. Pour les requĂȘtes SQL j'ai utilisĂ© la librairie **pg** qui permet de communiquer avec PostgreSQL, cette librairie peux gĂ©rer les fermetures de connexion inutile comme les time out ou les oublies.  -### Docker Volumes +Puisque l’API transmet des donnĂ©es sensibles j’ai dĂ» sĂ©curiser les endpoints en vĂ©rifiant les donnĂ©es entrantes, pour cela j’ai utilisĂ© **express-validator** qui permet de crĂ©er des **middlewares** pour vĂ©rifier les donnĂ©es. Pour les images et les fichiers vidĂ©o j’ai utilisĂ© **multer** qui s’intĂšgre trĂšs bien avec ExpressJS. Pour l’authentification par **Github** j’ai choisi de passĂ© par **PassportJS** qui s’occupe du passage de token entre GitHub et le backend.  -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 +Pour la gestion de l’authentification j’ai utilisĂ© **Json Web Token** qui permet de gĂ©nĂ©rer et de vĂ©rifier des tokens d’authentifications. Pour l’encryption des mots de passe **Bcrypt** a Ă©tĂ© utilisĂ©. -## 📖 Usage +### Le fonctionnement -### Getting Started +Chaque endpoints et diviser en trois parties distinctes, la dĂ©finition de la route, qui va dĂ©finir l’URL Ă  appeler, les middlewares qui vont effectuer les vĂ©rifications et modifications des donnĂ©es avant leur utilisation, et les controllers qui vont faire les actions (appels de base donnĂ©es, dĂ©placement de fichier...). Des diagrammes UML expliquant les routes unes-Ă -unes est disponible dans le dossier “Diagramme_UML”. -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 +Chaque endpoints qui doivent ĂȘtre protĂ©gĂ©es par l’utilisation d’un compte utilisent le middleware “auth.middleware.js” pour vĂ©rifier la validitĂ© d’un token. -2. **Login** - - Click "Se connecter" on the homepage - - Enter your username and password - - You'll be redirected to the authenticated homepage +## Le site web -3. **Upload Videos** - - Use the API endpoints to upload videos (see API documentation) - - Videos are stored in the uploads directory +### Les dĂ©pendances -4. **Browse Content** - - View recommendations on the homepage - - Search for videos using the search bar - - Browse trending videos and top creators +Le site web ne doit faire aucun calcul, tout passe donc par des requĂȘte HTTP, j'ai donc utilisĂ© la librairie **fetch** intĂ©grĂ© Ă  NodeJS dans sa version 22.  -### Authentication Flow +Pour l’hĂ©bergement j’ai choisi **NGINX** car il permet de d’hĂ©berger un site et de faire des redirections, il m’a permis de rediriger les requĂȘtes vers l’API en passant par la route “/api/” ce qui Ă©vite d’exposer des ports inutilement.  -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 +NGINX permet aussi de mettre en place l’**HTTPS** avec des **certificats SSL** ce qui chiffre les requĂȘtes du site et de l'API.  -## 📚 API Documentation +Le site fonctionnant avec ReactJS nĂ©cessite l’utilisation de **Vite** pour le dĂ©veloppement et le dĂ©ploiement.  -### Authentication Endpoints +Freetube est un site multi-page et doit utiliser un systĂšme de routage. Pour cela j’ai utilisĂ© **React Router 7** car il est trĂšs utilisĂ© et donc trĂšs bien documentĂ©. -#### Register User -```http -POST /api/users/ -Content-Type: multipart/form-data +Pour la partie style du site web, j'ai utilisĂ© TailwindCSS dans sa version 4.0. Tailwind permet de crĂ©er des classes CSS directement depuis le JSX et prend en charge le responsive grĂące a des **breakpoints**. Il est notamment plus lĂ©ger que ses concurrents car il crĂ©er ses classes CSS au moment du build contrairement, par exemple, a Bootstrap qui Ă  besoin d'un fichier contenant toue les classes CSS de la librairie pour fonctionner. -email: user@example.com -username: johndoe -password: securepassword -picture: [file upload] +### Le fonctionnement + +Les Ă©lĂ©ments du site sont divisĂ©s en plusieurs parties, les pages sont dans le dossier “/src/pages” et servent Ă  accueillir et Ă  mettre en forme les composants et Ă  appeler les services.   + +Les composants dans le dossier “/src/components” servent Ă  diviser le code et Ă  Ă©viter la duplication, un composant peut ĂȘtre appelĂ© plusieurs fois sur plusieurs pages diffĂ©rentes. Les composants ne font pas d'appel aux services, les Ă©vĂ©nements liĂ©s aux composants sont passer en paramĂštre de ces dernier.  + +Les modales sont dans le dossier “/src/modals” et sont toujours afficher au-dessus de la vue principale. Comme les composants elles ne fonts aucun appels aux services, les Ă©vĂ©nements liĂ©s aux modales sont passer en paramĂštre de ces derniers. Elles sont toujours appelĂ©es en fin de fichier.  + +Les services prĂ©sent dans le dossier “/src/services” sont les seuls fichiers faisant appel Ă  l’API (Ă  l’exception du fichier AuthContext.jsx). Les services sont organisĂ©s de la mĂȘme maniĂšre que les endpoints. Un service peut ĂȘtre appelĂ© plusieurs fois dans plusieurs pages.  + +Les routes utilisĂ©es par React Router sont prĂ©sente dans le fichier “/src/routes/route.jsx”. Les routes ayant besoin d’un compte sont protĂ©gĂ©es par “ProtectedRoute” et rĂ©digeront automatiquement Ă  la page de connexion. React Router n’étant pas directement compatible avec le systĂšme de NGINX une configuration supplĂ©mentaire est nĂ©cessaire, elle est dĂ©taillĂ©e dans le fichier “/nginx/default.conf”. + +## La base de donnĂ©es + +La structure de la base de donnĂ©es est créée automatiquement par le serveur au lancement, chaque modification effectuĂ©e doit ĂȘtre modifiĂ© dans le fichier `/backend/src/utils/database.js` dans la fonction `initDb()`.   + +La base de donnĂ©es Ă©tant relationnelle, elle repose sur beaucoup de clĂ© Ă©trangĂšre dĂ©taillĂ©s dans le schĂ©ma fourni. A savoir que les enfants se dĂ©truisent automatiquement si le lien parent est supprimĂ© grĂące Ă  la condition “ON CASCADE” prĂ©sente dans chacun des liens.   + +Le port de la base de donnĂ©es (5432 par defaut) ne doit jamais ĂȘtre exposĂ© sans pare-feu, seul le serveur doit y avoir accĂšs. Pour cela PostgreSQL propose deux fichiers de configuration. `pg_hba` crĂ©er des rĂšgles internes en fonction de l’utilisateur, la base cible et l’IP du client et `postgres.conf` qui permet de dĂ©finir un schĂ©ma d’IP autorisĂ©. A savoir que si le projet et lancĂ© via Docker seul localhost peut avoir accĂšs à cette base de donnĂ©es. + +## Installation et lancement + +**Ces instructions sont prĂ©vues pour un serveur tournant sous Ubuntu 24.04/Debian 12.** Par consĂ©quent certaines commandes peuvent ĂȘtre incompatible avec votre systĂšme, cependant cotre systĂšme d'exploitation fournis des commandes alternatives. + +Freetube peut ĂȘtre installĂ© de trois maniĂšre diffĂ©rentes : +- Docker Compose +- Script Shell +- Manuellement + +### Installation avec Docker Compose + +#### Installer Docker et Docker Compose + +De part la [documentation officielle de Docker](https://docs.docker.com/engine/install/ubuntu/) +```bash +# Add Docker's official GPG key: +sudo apt-get update +sudo apt-get install ca-certificates curl +sudo install -m 0755 -d /etc/apt/keyrings +sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc +sudo chmod a+r /etc/apt/keyrings/docker.asc + +# Add the repository to Apt sources: +echo \ + "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \ + $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \ + sudo tee /etc/apt/sources.list.d/docker.list > /dev/null +sudo apt-get update + +sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin ``` -#### Login User -```http -POST /api/users/login -Content-Type: application/json +#### ParamĂ©trages NGINX +Quelque modification doivent ĂȘtre faites pour le fonctionnement de NGINX +```nginx +server { + #------------------------------ ici ------------------------------- + server_name ; + #------------------------------------------------------------------ + listen 80; + return 301 https://$host$request_uri; +} + +server { + #------------------------------ ici ------------------------------- + server_name ; + #------------------------------------------------------------------ + listen 443 ssl; + + root /usr/share/nginx/html; + index index.html index.htm; + + client_max_body_size 500M; + + ssl_certificate /etc/nginx/ssl/nginx-selfsigned.crt; + ssl_certificate_key /etc/nginx/ssl/nginx-selfsigned.key; + + ssl_protocols TLSv1.2 TLSv1.3; + ssl_ciphers HIGH:!aNULL:!MD5; + + location /api/ { + if ($request_method = 'OPTIONS') { + add_header 'Access-Control-Allow-Origin' '$http_origin' always; + add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; + add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always; + add_header 'Access-Control-Allow-Credentials' 'true' always; + add_header 'Access-Control-Max-Age' 1728000 always; + add_header 'Content-Type' 'text/plain; charset=utf-8' always; + add_header 'Content-Length' 0 always; + return 204; + } + + proxy_pass http://resit_backend:8000; + proxy_set_header Host $host; + 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; + proxy_set_header Origin $http_origin; + proxy_buffering off; + + add_header 'Access-Control-Allow-Origin' '$http_origin' always; + add_header 'Access-Control-Allow-Credentials' 'true' always; + + proxy_read_timeout 300s; + proxy_send_timeout 300s; + } + + location ~* ^/(?!api/).*\.(js|css|png|jpg|jpeg|gif|ico|svg)$ { + add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"; + add_header Pragma "no-cache"; + add_header Expires "0"; + try_files $uri =404; + } + + location / { + add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"; + try_files $uri $uri/ /index.html; + } -{ - "username": "johndoe", - "password": "securepassword" } ``` -### Media Endpoints +#### CrĂ©ation de clĂ© d'API Gmail + +Rendez-vous sur [Gmail](https://gmail.com) et allez dans le panel d'administration de votre compte +Dans la barre de recherche tapez `Mot de passe des applications` +CrĂ©er un mot de passe et gardez le de cĂŽtĂ© il servira pour les variables d'environnements + +#### CrĂ©ation Application OAuth Github + +Rendez-vous sur [Github](https://github.com) et allez dans les paramĂštres de votre compte +En bas du menu Ă  gauche, cliquez sur `ParamĂštres de dĂ©veloppeur` puis cliquez sur `Application OAuth` +CrĂ©ez une nouvelle application et gardez les clĂ© de cĂŽtĂ©, elle serviront pour les variables d'environnements -#### Get Profile Picture -```http -GET /api/media/profile/{filename} +#### Mise en place des variables d'environnements + +A la racine du projet crĂ©er un fichier `.env` +```bash +touch .env ``` -#### Get Video Thumbnail -```http -GET /api/media/thumbnail/{filename} +A l'aide de l'Ă©diteur de votre choix entrez dans le fichier +``` +nano .env ``` -### Additional Endpoints +Rentrez les informations dans ce format +/!\ les valeurs non-entourĂ©es de chevrons **ne doivent pas ĂȘtre modifiĂ©**. +```env +POSTGRES_USER= +POSTGRES_PASSWORD= +POSTGRES_DB= +POSTGRES_HOST=db -- **Videos**: `/api/videos/` -- **Comments**: `/api/comments/` -- **Channels**: `/api/channels/` -- **Playlists**: `/api/playlists/` -- **Recommendations**: `/api/recommendations/` +BACKEND_PORT=8000 -For detailed API documentation, check the `.http` files in the `backend/requests/` directory. +JWT_SECRET= -## 📁 Project Structure +LOG_FILE=/var/log/freetube/access.log -``` -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 -``` +GMAIL_USER= +GMAIL_PASSWORD= + +FRONTEND_URL= -## 🔧 Development +GITHUB_ID= -### Available Scripts +GITHUB_SECRET= -#### Backend + +#### Lancement + +Pour lancer le groupe de conteneur ```bash -npm run dev # Start development server with hot reload -npm run start # Start production server -npm run test # Run tests +docker compose up -d # pour dĂ©tacher de la session ``` -#### Frontend +### Installation via le Script Shell + +#### Ajout des autorisations + +Pour ajouter les autorisations nĂ©cessaire au lancement du script ```bash -npm run dev # Start development server -npm run build # Build for production -npm run preview # Preview production build -npm run lint # Run ESLint +chmod +x ./deploy.sh ``` -#### Docker Commands -```bash -# Start all services -docker-compose up --build +#### CrĂ©ation de clĂ© d'API Gmail -# Stop all services -docker-compose down +Rendez-vous sur [Gmail](https://gmail.com) et allez dans le panel d'administration de votre compte +Dans la barre de recherche tapez `Mot de passe des applications` +CrĂ©er un mot de passe et gardez le de cĂŽtĂ© il servira pour les variables d'environnements -# View logs -docker-compose logs [service-name] +#### CrĂ©ation Application OAuth Github -# Restart specific service -docker-compose restart [service-name] +Rendez-vous sur [Github](https://github.com) et allez dans les paramĂštres de votre compte +En bas du menu Ă  gauche, cliquez sur `ParamĂštres de dĂ©veloppeur` puis cliquez sur `Application OAuth` +CrĂ©ez une nouvelle application et gardez les clĂ© de cĂŽtĂ©, elle serviront pour les variables d'environnements -# Reset database -docker-compose down --volumes +#### Lancer l'installation + +Lancer le script et rĂ©pondez au question +```bash +./deploy.sh +``` + +Lancer le projet +```bash +cd backend && npm run start +cd frontend && npx vite build + +systemctl enable --now nginx # Pour un dĂ©marrage automatique au lancement de la machine +systemctl enable --now postgresql ``` -### Development Workflow +### Installation manuelle -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 +#### CrĂ©ation de clĂ© d'API Gmail -### File Upload Testing +Rendez-vous sur [Gmail](https://gmail.com) et allez dans le panel d'administration de votre compte +Dans la barre de recherche tapez `Mot de passe des applications` +CrĂ©er un mot de passe et gardez le de cĂŽtĂ© il servira pour les variables d'environnements -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 +#### CrĂ©ation Application OAuth Github -## đŸ§Ș Testing +Rendez-vous sur [Github](https://github.com) et allez dans les paramĂštres de votre compte +En bas du menu Ă  gauche, cliquez sur `ParamĂštres de dĂ©veloppeur` puis cliquez sur `Application OAuth` +CrĂ©ez une nouvelle application et gardez les clĂ© de cĂŽtĂ©, elle serviront pour les variables d'environnements -### Running Tests +#### Mise en place des variables d'environnements +A la racine du projet crĂ©er un fichier `.env` ```bash -# Backend tests -cd backend -npm test +touch .env +``` -# Frontend tests (if configured) -cd frontend -npm test +A l'aide de l'Ă©diteur de votre choix entrez dans le fichier ``` +nano .env +``` + +Rentrez les informations dans ce format +/!\ les valeurs non-entourĂ©es de chevrons **ne doivent pas ĂȘtre modifiĂ©**. +```env +POSTGRES_USER= +POSTGRES_PASSWORD= +POSTGRES_DB= +POSTGRES_HOST=db -### Test Structure +BACKEND_PORT=8000 -- **Unit Tests**: Individual component/function testing -- **Integration Tests**: API endpoint testing -- **E2E Tests**: Full application workflow testing +JWT_SECRET= -Current test coverage includes: -- User authentication -- Video management -- Comment system -- Channel operations -- Playlist functionality +LOG_FILE=/var/log/freetube/access.log -## 🔍 Troubleshooting +GMAIL_USER= +GMAIL_PASSWORD= -### Common Issues +FRONTEND_URL= -#### 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 +GITHUB_ID= -#### Media File Issues -- **404 on images**: Verify nginx proxy configuration -- **Upload fails**: Check file permissions and upload directory +GITHUB_SECRET= +``` -#### Docker Issues -- **Containers won't start**: Check port conflicts -- **Database connection fails**: Verify environment variables -- **Build failures**: Clear Docker cache with `docker system prune` +#### Installation des paquets -### Debug Commands +Pour installer PostgreSQL/NGINX +```bash +apt install nginx postgresql +``` +Pour installer NodeJS de part la [documentation officielle](https://nodejs.org/en/download/) ```bash -# Check container status -docker-compose ps +# Download and install nvm: +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash -# View service logs -docker-compose logs -f [service-name] +# in lieu of restarting the shell +\. "$HOME/.nvm/nvm.sh" -# Access container shell -docker-compose exec [service-name] /bin/bash +# Download and install Node.js: +nvm install 22 -# Reset everything -docker-compose down --volumes --rmi all -docker system prune -a +# Verify the Node.js version: +node -v # Should print "v22.19.0". +nvm current # Should print "v22.19.0". + +# Verify npm version: +npm -v # Should print "10.9.3". ``` -### Performance Optimization +#### Installations des dĂ©pendances NodeJS -- Enable nginx caching for static assets -- Implement image optimization for uploads -- Use CDN for media file delivery -- Database query optimization -- Frontend code splitting +Pour le serveur +```bash +cd backend && npm i --production +``` -## đŸ€ Contributing +Pour le site web +```bash +cd frontend && npm i --production +npx vite build # pour la construction du site +``` -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 +#### Configuration de NGINX -### Code Style +Dans `/etc/nginx/conf.d/` ajouter le fichier `freetube.conf` avec cette configuration +```nginx +server { + server_name ; + listen 80; + return 301 https://$host$request_uri; +} -- **Backend**: ESLint with Node.js rules -- **Frontend**: ESLint with React rules -- **Formatting**: Prettier for consistent code style -- **Commits**: Conventional commit messages +server { + server_name ; + listen 443 ssl; + + root /usr/share/nginx/html; + index index.html index.htm; + + client_max_body_size 500M; + + ssl_certificate /etc/nginx/ssl/nginx-selfsigned.crt; + ssl_certificate_key /etc/nginx/ssl/nginx-selfsigned.key; + + ssl_protocols TLSv1.2 TLSv1.3; + ssl_ciphers HIGH:!aNULL:!MD5; + + location /api/ { + if ($request_method = 'OPTIONS') { + add_header 'Access-Control-Allow-Origin' '$http_origin' always; + add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; + add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always; + add_header 'Access-Control-Allow-Credentials' 'true' always; + add_header 'Access-Control-Max-Age' 1728000 always; + add_header 'Content-Type' 'text/plain; charset=utf-8' always; + add_header 'Content-Length' 0 always; + return 204; + } + + proxy_pass http://resit_backend:8000; + proxy_set_header Host $host; + 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; + proxy_set_header Origin $http_origin; + proxy_buffering off; + + add_header 'Access-Control-Allow-Origin' '$http_origin' always; + add_header 'Access-Control-Allow-Credentials' 'true' always; + + proxy_read_timeout 300s; + proxy_send_timeout 300s; + } + + location ~* ^/(?!api/).*\.(js|css|png|jpg|jpeg|gif|ico|svg)$ { + add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"; + add_header Pragma "no-cache"; + add_header Expires "0"; + try_files $uri =404; + } + + location / { + add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"; + try_files $uri $uri/ /index.html; + } -## 📜 License +} +``` -This project is part of an educational assignment. All rights reserved. +#### CrĂ©ation de la base de donnĂ©es +Pour crĂ©er l'utilisateur PostgreSQL +```postgresql +CREATE ROLE "" WITH PASSWORD ""; +``` + +Pour crĂ©er la base +```postgresql +CREATE DATABASE "" OWNER "} + */ export function sendEmail(to, subject, text, html = null) { const transporter = getTransporter(); const mailOptions = {