astria
/
3RESIT
1
0
Fork 0
Code Issues Pull Requests 1 Projects 1 Releases 6 Wiki Activity
Browse Source

Updated README.md

pull/11/head
astria 3 months ago
parent
d3b948385c
commit
a9e596c699
2 changed files with 423 additions and 349 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 764
      README.md
  2. 8
      backend/app/utils/mail.js

764
README.md
View File

@ -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 <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
```
## 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)
</details>
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 <url du serveur>;
#------------------------------------------------------------------
listen 80;
return 301 https://$host$request_uri;
}
server {
#------------------------------ ici -------------------------------
server_name <url du serveur>;
#------------------------------------------------------------------
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=<utilisateur_de_la_base>
POSTGRES_PASSWORD=<mot_de_passe>
POSTGRES_DB=<nom_de_la_base>
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=<votre_clé_JWT>
## 📁 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=<adresse e-mail>
GMAIL_PASSWORD=<mot_de_passe_créer_precedemment>
FRONTEND_URL=<URL_HTTPS_de_votre_nginx>
## 🔧 Development
GITHUB_ID=<ID_github>
### Available Scripts
GITHUB_SECRET=<secret_github>
#### 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=<utilisateur_de_la_base>
POSTGRES_PASSWORD=<mot_de_passe>
POSTGRES_DB=<nom_de_la_base>
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=<votre_clé_JWT>
Current test coverage includes:
- User authentication
- Video management
- Comment system
- Channel operations
- Playlist functionality
LOG_FILE=/var/log/freetube/access.log
## 🔍 Troubleshooting
GMAIL_USER=<adresse e-mail>
GMAIL_PASSWORD=<mot_de_passe_créer_precedemment>
### Common Issues
FRONTEND_URL=<URL_HTTPS_de_votre_nginx>
#### 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=<ID_github>
#### Media File Issues
- **404 on images**: Verify nginx proxy configuration
- **Upload fails**: Check file permissions and upload directory
GITHUB_SECRET=<secret_github>
```
#### 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 <url du serveur>;
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 <url du serveur>;
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 "<nom_utilisateur>" WITH PASSWORD "<mot_de_passe>";
```
Pour créer la base
```postgresql
CREATE DATABASE "<nom_de_la_base>" OWNER "<nom_utilisateur";
```
## 👥 Authors
#### Créer le fichier de log
Pour créer le fichier de log
```bash
mkdir -p /var/log/freetube/
touch /var/log/freetube/access.log
```
- **Developer**: [Your Name]
- **Institution**: [Institution Name]
- **Course**: 3 RESIT - Web Development
#### Activer les services
Pour activer et lancer les services
```bash
systemctl enable --now postgresql
systemctl enable --now nginx
```
---
#### Lancement
Pour lancer Freetube
```bash
cd backend
npm run start
```
## 📞 Support
## Conclusion
For support and questions:
- Create an issue in the repository
- Check the troubleshooting section
- Review the API documentation
## Documentations externes
**Happy coding! 🚀**
[NodeJS](https://nodejs.org/docs/latest/api/)
[ReactJS](https://react.dev/)
[Vite](https://vite.dev/guide/)
[ExpressJS](https://expressjs.com/en/guide/routing.html)
[NGINX](https://nginx.org/en/docs/)
[PostgreSQL](https://www.postgresql.org/docs/)
[Multer](https://www.npmjs.com/package/multer)
[TailwindCSS v4.0](https://tailwindcss.com/docs/installation/using-vite)
[PassportJS](https://www.passportjs.org/docs/)
[Swagger](https://swagger.io/docs/)

8
backend/app/utils/mail.js
View File

@ -12,6 +12,14 @@ function getTransporter() {
});
};
/**
* Send an email
* @param {string} to
* @param {string} subject
* @param {string} text
* @param {string} html
* @return {Promise<object>}
*/
export function sendEmail(to, subject, text, html = null) {
const transporter = getTransporter();
const mailOptions = {

Write Preview
Loading…
Cancel
Save