18 changed files with 20 additions and 657 deletions
@ -0,0 +1,16 @@ |
|||||
|
POSTGRES_USER=user |
||||
|
POSTGRES_PASSWORD=password |
||||
|
POSTGRES_DB=freetube |
||||
|
POSTGRES_HOST=db |
||||
|
|
||||
|
BACKEND_PORT=8000 |
||||
|
|
||||
|
JWT_SECRET=jhkdfgjhkerzuhsdfvjhklfvjkhsdfgq |
||||
|
|
||||
|
LOG_FILE=/var/log/freetube/access.log |
||||
|
|
||||
|
GMAIL_USER=sachaguerin.sg@gmail.com |
||||
|
GMAIL_PASSWORD=yuuu kvoi ytrf blla |
||||
|
|
||||
|
GITHUB_ID=Ov23lihaZwgdcmuE86Y6 |
||||
|
GITHUB_SECRET=61b95c5267c3ffe01f783387951d84fd307dff3b |
||||
@ -1,23 +0,0 @@ |
|||||
up: |
|
||||
docker compose up --build -d |
|
||||
|
|
||||
down: |
|
||||
docker compose down |
|
||||
|
|
||||
logs: |
|
||||
docker compose logs -f |
|
||||
|
|
||||
dev: |
|
||||
docker compose -f developpement.yaml up --build -d |
|
||||
|
|
||||
dev-down: |
|
||||
docker compose -f developpement.yaml down |
|
||||
|
|
||||
dev-logs: |
|
||||
docker compose -f developpement.yaml logs -f |
|
||||
|
|
||||
dev-volumes: |
|
||||
docker compose -f developpement.yaml down -v |
|
||||
|
|
||||
dev-build: |
|
||||
docker compose -f developpement.yaml build |
|
||||
@ -1,146 +0,0 @@ |
|||||
# FreeTube - Checklist de développement Backend |
|
||||
|
|
||||
## **AUTHENTIFICATION** (15 points) |
|
||||
|
|
||||
### Connexion utilisateur standard (5 points) ✅ |
|
||||
- [x] Route de connexion avec nom d'utilisateur/mot de passe |
|
||||
- [x] Validation des credentials |
|
||||
- [x] Génération de token JWT |
|
||||
|
|
||||
### Connexion OAuth2 (10 points) |
|
||||
- [ ] Intégration avec au moins un service OAuth2 (Google, Microsoft, GitHub) |
|
||||
- [ ] Routes pour gérer les callbacks OAuth2 |
|
||||
- [ ] Middleware de gestion des tokens OAuth2 |
|
||||
|
|
||||
## **GESTION UTILISATEUR** (10 points) ✅ |
|
||||
- [x] Modification adresse email (unique) |
|
||||
- [x] Modification nom d'utilisateur (unique) |
|
||||
- [x] Modification mot de passe sécurisé |
|
||||
- [x] Modification photo de profil |
|
||||
- [x] Création/modification nom d'affichage chaîne |
|
||||
- [x] Création/modification description chaîne |
|
||||
|
|
||||
## **ADMINISTRATION CHAÎNE FREETUBE** (55 points) |
|
||||
|
|
||||
### Mettre en ligne une vidéo (30 points) - 27/30 points ✅ |
|
||||
- [x] Upload média vidéo (10 points) |
|
||||
- [x] Upload miniature vidéo (2 points) |
|
||||
- [x] Titre (2 points) |
|
||||
- [x] Description (2 points) |
|
||||
- [x] Date de mise en ligne automatique (2 points) |
|
||||
- [ ] Mots-clefs/hashtags jusqu'à 10 (2 points) |
|
||||
- [x] Visibilité publique/privée (5 points) |
|
||||
- [x] Génération lien partageable (5 points) - via slug système |
|
||||
|
|
||||
### Gestion vidéos existantes (15 points) - 10/15 points |
|
||||
- [x] Éditer une vidéo existante (5 points) |
|
||||
- [x] Changer la visibilité (5 points) |
|
||||
- [x] Supprimer une vidéo (5 points) |
|
||||
|
|
||||
### Statistiques (10 points) - 5/10 points |
|
||||
- [x] Statistiques par vidéo (vues, likes, commentaires) (5 points) |
|
||||
- [ ] Statistiques globales de la chaîne (5 points) |
|
||||
|
|
||||
## **RECHERCHE ET NAVIGATION** (20 points) ✅ |
|
||||
|
|
||||
### Système de recherche (20 points) - 20/20 points ✅ |
|
||||
- [x] Recherche par titre de vidéo (8 points) |
|
||||
- [x] Recherche par chaîne (8 points) |
|
||||
- [x] Interface de recherche fonctionnelle (4 points) |
|
||||
|
|
||||
## **PAGE ACCUEIL** (30 points) - 10/30 points |
|
||||
|
|
||||
### Utilisateur authentifié (15 points) - 5/15 points |
|
||||
- [x] Section Tendances (contenu avec plus d'interactions récentes) (5 points) |
|
||||
- [ ] Section Recommendations (contenu similaire non vu) (5 points) |
|
||||
- [ ] Section "À consulter plus tard" (5 points) |
|
||||
|
|
||||
### Utilisateur non-authentifié (15 points) - 5/15 points |
|
||||
- [x] Section Tendances (5 points) |
|
||||
- [ ] Section Recommendations (3 mots-clefs les plus utilisés) (5 points) |
|
||||
- [ ] Section Top créateurs (plus d'abonnés) (5 points) |
|
||||
|
|
||||
## **PAGE ABONNEMENTS** (10 points) |
|
||||
- [ ] Fil d'actualité des abonnements (8 points) |
|
||||
- [ ] Redirection pour non-authentifiés (2 points) |
|
||||
|
|
||||
## **PAGE UTILISATEUR** (15 points) - 5/15 points |
|
||||
- [ ] Historique des vidéos regardées (10 points) |
|
||||
- [x] Gestion et liste des playlists (5 points) |
|
||||
|
|
||||
## **PAGE PLAYLIST** (10 points) - 8/10 points ✅ |
|
||||
- [x] Affichage nom playlist et vidéos (4 points) |
|
||||
- [x] Tri par date d'ajout (2 points) |
|
||||
- [x] Navigation depuis page utilisateur (2 points) |
|
||||
- [ ] Interface utilisateur complète (2 points) |
|
||||
|
|
||||
## **PAGE VIDÉO** (50 points) - 27/50 points |
|
||||
|
|
||||
### Lecteur vidéo (20 points) - 10/20 points |
|
||||
- [x] Média visualisable (10 points) |
|
||||
- [ ] Bouton Pause (2 points) |
|
||||
- [ ] Bouton Play (2 points) |
|
||||
- [ ] Saut XX secondes en avant (3 points) |
|
||||
- [ ] Saut XX secondes en arrière (3 points) |
|
||||
|
|
||||
### Informations vidéo (20 points) - 12/20 points |
|
||||
- [x] Titre de la vidéo (2 points) |
|
||||
- [x] Description (2 points) |
|
||||
- [x] Nom de la chaîne (2 points) |
|
||||
- [x] Compteur "J'aime" (2 points) |
|
||||
- [x] Compteur vues (2 points) |
|
||||
- [x] Bouton "J'aime" (2 points) |
|
||||
- [ ] Compteur abonnés (2 points) |
|
||||
- [ ] Bouton "S'abonner" (6 points) |
|
||||
|
|
||||
### Commentaires (10 points) ✅ |
|
||||
- [x] Créer un commentaire (5 points) |
|
||||
- [x] Voir les commentaires (5 points) |
|
||||
|
|
||||
### Recommendations (5 points) |
|
||||
- [ ] Section recommendations/tendances selon authentification (5 points) |
|
||||
|
|
||||
## **FONCTIONNALITÉS SYSTÈME** |
|
||||
|
|
||||
### Système de playlists (15 points) ✅ |
|
||||
- [x] Routes créer/gérer playlists (8 points) |
|
||||
- [x] Ajouter/retirer vidéos des playlists (4 points) |
|
||||
- [x] Playlist "À regarder plus tard" automatique (3 points) |
|
||||
|
|
||||
### Système "J'aime" (10 points) ✅ |
|
||||
- [x] Routes like/unlike vidéo (5 points) |
|
||||
- [x] Compteur de likes par vidéo (3 points) |
|
||||
- [x] Interface utilisateur (2 points) |
|
||||
|
|
||||
### Système d'abonnements (18 points estimés) |
|
||||
- [ ] Routes s'abonner/désabonner à une chaîne (8 points) |
|
||||
- [ ] Modèle de données abonnements (5 points) |
|
||||
- [ ] Compteur d'abonnés par chaîne (5 points) |
|
||||
|
|
||||
### Système de tags/mots-clefs (8 points estimés) |
|
||||
- [ ] Modèle de données tags (3 points) |
|
||||
- [ ] Association vidéos-tags (3 points) |
|
||||
- [ ] Interface gestion tags (2 points) |
|
||||
|
|
||||
## **SÉCURITÉ ET MIDDLEWARE** ✅ |
|
||||
- [x] Middleware d'authentification JWT |
|
||||
- [x] Validation des données d'entrée |
|
||||
- [x] Gestion des erreurs |
|
||||
- [x] Upload sécurisé de fichiers |
|
||||
- [x] Logging des actions |
|
||||
|
|
||||
## **INFRASTRUCTURE** ✅ |
|
||||
- [x] Configuration Docker |
|
||||
- [x] Base de données PostgreSQL |
|
||||
- [x] Serveur de fichiers médias |
|
||||
- [x] Tests unitaires |
|
||||
|
|
||||
--- |
|
||||
## **SCORE ESTIMÉ** |
|
||||
**Backend: ~127/183 points (69%)** |
|
||||
**Points prioritaires manquants:** |
|
||||
- OAuth2 (10 points) |
|
||||
- Système d'abonnements (18 points) |
|
||||
- Tags/mots-clefs (8 points) |
|
||||
- Statistiques globales chaîne (5 points) |
|
||||
- Contrôles lecteur vidéo (10 points) |
|
||||
@ -1,4 +0,0 @@ |
|||||
|
|
||||
CREATE ROLE 'sacha' WITH PASSWORD 'sacha'; |
|
||||
CREATE DATABASE 'sacha' OWNER 'sacha'; |
|
||||
|
|
||||
@ -1,4 +0,0 @@ |
|||||
|
|
||||
CREATE ROLE 'sacha' WITH PASSWORD 'sacha'; |
|
||||
CREATE DATABASE 'sacha' OWNER 'sacha'; |
|
||||
|
|
||||
@ -1,68 +0,0 @@ |
|||||
server { |
|
||||
server_name localhost; |
|
||||
listen 80; |
|
||||
|
|
||||
return 301 https://$host$request_uri; |
|
||||
} |
|
||||
|
|
||||
server { |
|
||||
server_name localhost; |
|
||||
listen 443 ssl; |
|
||||
|
|
||||
root /usr/share/nginx/html; |
|
||||
index index.html index.htm; |
|
||||
|
|
||||
# Allow large file uploads for videos (up to 500MB) |
|
||||
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; |
|
||||
|
|
||||
# API routes - proxy to backend (MUST come before static file rules) |
|
||||
location /api/ { |
|
||||
# Handle preflight OPTIONS requests |
|
||||
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://localhost: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; |
|
||||
|
|
||||
# CORS headers for actual requests |
|
||||
add_header 'Access-Control-Allow-Origin' '$http_origin' always; |
|
||||
add_header 'Access-Control-Allow-Credentials' 'true' always; |
|
||||
|
|
||||
# Also set timeout for large uploads |
|
||||
proxy_read_timeout 300s; |
|
||||
proxy_send_timeout 300s; |
|
||||
} |
|
||||
|
|
||||
# Static assets - NO CACHING for development |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
# Handle React Router - all other routes should serve index.html |
|
||||
location / { |
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"; |
|
||||
try_files $uri $uri/ /index.html; |
|
||||
} |
|
||||
} |
|
||||
@ -1,49 +0,0 @@ |
|||||
# 3RESIT Freetube |
|
||||
|
|
||||
## Sommaire |
|
||||
|
|
||||
1) Introduction au projet |
|
||||
2) Organisation |
|
||||
2) Les technologies utilisées |
|
||||
1) Le serveur |
|
||||
2) Le site web |
|
||||
3) La base de données |
|
||||
3) Le serveur |
|
||||
1) Les dépendances |
|
||||
2) Le fonctionnement |
|
||||
4) Le site web |
|
||||
1) Les dépendances |
|
||||
2) Le fonctionnement |
|
||||
5) La base de données |
|
||||
1) Diagramme des tables |
|
||||
6) Installation |
|
||||
1) Docker Compose |
|
||||
2) Script Shell |
|
||||
3) Manuelle |
|
||||
|
|
||||
## Introduction |
|
||||
|
|
||||
Pour ce projet il nous a été demandé de recréer une plateforme similaire a Youtube nommée Freetube. Cette application web devait être gratuite et sans publicités. Nous avions la main libre sur le choix de la pile technologique utilisée et sur l'organisation du projet. |
|
||||
|
|
||||
## Organisation |
|
||||
|
|
||||
J'ai commencé par faire un plan détaillés de toute les routes et vérifications a effectué pour chaque fonctionnalité, puis faire un plan de la base de données. Ceci allait définir toute la structure du projet. |
|
||||
|
|
||||
Pour ce qui est du développement, j'ai choisis de procéder fonctionnalité par fonctionnalité en commençant par le serveur et la base de données pour les intégrer ensuite dans le site web. Pour séparer toute ces parties j'ai utilisé **git** en créant plusieurs branches, une par fonctionnalité. |
|
||||
|
|
||||
## Les technologies utilisées |
|
||||
|
|
||||
### Le serveur |
|
||||
Le serveur utilise **NodeJS**, j'ai choisis ce langage car il permet d'implementer une **API REST** efficacement grâce a son système d'asynchronisation natif très performant. Etant créer a partir du **Javascript** il est aussi plus simple a comprendre et a écrire. Même si NodeJS n'est pas le plus connu en terme de rapidité d'éxecution ce n'est pas un problème dans notre situation car nous travaillons avec une **API** qui ajoutera un temps de latence supplémentaire. |
|
||||
|
|
||||
### Le site web |
|
||||
Le site web est programmé en **ReactJS** avec **Vite** ce qui donne un **backend** et un **frontend** dans le même langage ce qui permet une maintenance et des mises à jour plus simple. Tout comme NodeJS, ReactJS et créé a partir de Javascript, il bénéficie donc de la même intégration de l'asynchrone natif. Le système de **composant** de ReactJS permet aussi une gestion de mise à jour de l'interface en temps réel plus simple a mettre en place et évite la duplication de code. |
|
||||
|
|
||||
### La base données |
|
||||
La base de données et une base **PostgreSQL**, un système basé sur le langage SQL largement connu. PostgreSQL est une alternative **OpenSource** à **MySQL**. Il possède une très bonne intégration du **JSON** très utilisé comme moyen d'envoyer des données via **requête HTTP** utilisé dans les API REST. |
|
||||
|
|
||||
## Le serveur |
|
||||
|
|
||||
### Les dépendances |
|
||||
|
|
||||
Pour l'API REST j'ai choisis d'utiliser **ExpressJS** couplé avec **express-validator** |
|
||||
@ -1,2 +0,0 @@ |
|||||
#!/bin/bash |
|
||||
node ./backend/server.js |
|
||||
|
After Width: | Height: | Size: 9.7 KiB |
@ -1,8 +0,0 @@ |
|||||
FROM nginx:latest |
|
||||
|
|
||||
COPY ../frontend/dist/ /usr/share/nginx/html |
|
||||
|
|
||||
COPY ./default.conf /etc/nginx/conf.d |
|
||||
|
|
||||
EXPOSE 80:80 |
|
||||
|
|
||||
@ -1,68 +0,0 @@ |
|||||
server { |
|
||||
server_name localhost; |
|
||||
listen 80; |
|
||||
|
|
||||
return 301 https://$host$request_uri; |
|
||||
} |
|
||||
|
|
||||
server { |
|
||||
server_name localhost; |
|
||||
listen 443 ssl; |
|
||||
|
|
||||
root /usr/share/nginx/html; |
|
||||
index index.html index.htm; |
|
||||
|
|
||||
# Allow large file uploads for videos (up to 500MB) |
|
||||
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; |
|
||||
|
|
||||
# API routes - proxy to backend (MUST come before static file rules) |
|
||||
location /api/ { |
|
||||
# Handle preflight OPTIONS requests |
|
||||
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; |
|
||||
|
|
||||
# CORS headers for actual requests |
|
||||
add_header 'Access-Control-Allow-Origin' '$http_origin' always; |
|
||||
add_header 'Access-Control-Allow-Credentials' 'true' always; |
|
||||
|
|
||||
# Also set timeout for large uploads |
|
||||
proxy_read_timeout 300s; |
|
||||
proxy_send_timeout 300s; |
|
||||
} |
|
||||
|
|
||||
# Static assets - NO CACHING for development |
|
||||
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; |
|
||||
} |
|
||||
|
|
||||
# Handle React Router - all other routes should serve index.html |
|
||||
location / { |
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"; |
|
||||
try_files $uri $uri/ /index.html; |
|
||||
} |
|
||||
} |
|
||||
@ -1,23 +0,0 @@ |
|||||
-----BEGIN CERTIFICATE----- |
|
||||
MIID5zCCAs+gAwIBAgIUXzNzqa/12lyIcoxXf+v371J3fWkwDQYJKoZIhvcNAQEL |
|
||||
BQAwgYIxCzAJBgNVBAYTAkZSMREwDwYDVQQIDAhOb3JtYW5keTENMAsGA1UEBwwE |
|
||||
Q2FlbjERMA8GA1UECgwIRnJhbWluZm8xFTATBgNVBAMMDFNhY2hhIEdVRVJJTjEn |
|
||||
MCUGCSqGSIb3DQEJARYYc2FjaGEuZ3VlcmluQHN1cGluZm8uY29tMB4XDTI1MDcy |
|
||||
MTEzMzgwMVoXDTI2MDcyMTEzMzgwMVowgYIxCzAJBgNVBAYTAkZSMREwDwYDVQQI |
|
||||
DAhOb3JtYW5keTENMAsGA1UEBwwEQ2FlbjERMA8GA1UECgwIRnJhbWluZm8xFTAT |
|
||||
BgNVBAMMDFNhY2hhIEdVRVJJTjEnMCUGCSqGSIb3DQEJARYYc2FjaGEuZ3Vlcmlu |
|
||||
QHN1cGluZm8uY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvLg7 |
|
||||
nR0UqRZ7UadhI8jrUjRMV1SZj+ljxEnV6tDOVMsvafsym1MhDZHb+cyv8769yqPv |
|
||||
CKtIOQKhMH0PkSqau8szNlF1Tg/1UzT+Mkd4zvLvGE5+aW/oDMg7E2LMJZuCyO4X |
|
||||
9SzWDVA5+b1QFIw6vvb3mCkUOtVDkOFreBBwryZKcWJ0b8o1hT60oB2wr18P14j0 |
|
||||
0C2/TmHMtim0o4r3gKGvpatqt1fXJo0UlYOwTvfMrYhu2VHqsQ2qP7ocazXEWt5u |
|
||||
Alf1vNPkAenF0ZV/2UiaL41Q8GMoV1enDP7k7/qfgXvta/hOeYnLtmv5Qpi4XiWz |
|
||||
xKjSukTUD2sRtSX+YQIDAQABo1MwUTAdBgNVHQ4EFgQUVj9KtmjLFy4xWzkNI9Kq |
|
||||
NAxNsfUwHwYDVR0jBBgwFoAUVj9KtmjLFy4xWzkNI9KqNAxNsfUwDwYDVR0TAQH/ |
|
||||
BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEAGpUPMoF/ASIqOOfX5anDtaPvnslj |
|
||||
DuEVbU7Uoyc4EuSD343DPV7iMUKoFvVLPxJJqMLhSo3aEGJyqOF6q3fvq/vX2VE7 |
|
||||
9MhwS1t2DBGb5foWRosnT1EuqFU1/S0RJ/Y+GNcoY1PrUES4+r7zqqJJjwKOzneV |
|
||||
ktUVCdKl0C1gtw6W4Ajxse3fm9DNLxnZZXbyNqn+KbI8QdO0xSEl+gyiycvPu/NT |
|
||||
+EesdlFoYjO7gdA8dXkmu+Z7R61MYhE9Zvyop5KVMqgU8/Ym04UUWjWQYWWLMyuu |
|
||||
bxngE4XNEI5fhg+0e/I25xJJ9wVV/ZNAF4+XOylHz/CmU8V/SPKuGXBGHg== |
|
||||
-----END CERTIFICATE----- |
|
||||
@ -1,28 +0,0 @@ |
|||||
-----BEGIN PRIVATE KEY----- |
|
||||
MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC8uDudHRSpFntR |
|
||||
p2EjyOtSNExXVJmP6WPESdXq0M5Uyy9p+zKbUyENkdv5zK/zvr3Ko+8Iq0g5AqEw |
|
||||
fQ+RKpq7yzM2UXVOD/VTNP4yR3jO8u8YTn5pb+gMyDsTYswlm4LI7hf1LNYNUDn5 |
|
||||
vVAUjDq+9veYKRQ61UOQ4Wt4EHCvJkpxYnRvyjWFPrSgHbCvXw/XiPTQLb9OYcy2 |
|
||||
KbSjiveAoa+lq2q3V9cmjRSVg7BO98ytiG7ZUeqxDao/uhxrNcRa3m4CV/W80+QB |
|
||||
6cXRlX/ZSJovjVDwYyhXV6cM/uTv+p+Be+1r+E55icu2a/lCmLheJbPEqNK6RNQP |
|
||||
axG1Jf5hAgMBAAECggEAAj+hmDRx6jafAAf67sqi3ZgEGEmBkXNeeLGBTPc/qhxd |
|
||||
ip6krTELnz8TE26RG5LYXzslasUNrn42nIImvBT5ZkcjcosKpWfEqQEAjc1PQovC |
|
||||
9eyKnKfw4TpUvvmiveT4T98vCYEOOqHE0/WTdlOoaBY/f+sZKQYu+1NMtAjFcg2r |
|
||||
vVqwsZb5vGyh7CKmIHZnz3UP8P+7G5digiNRne18pGnE2oTnSoQ3/QIqUWBs69DS |
|
||||
k5ew+CSyTLiUFFnMnE4adwyg6wAud5fBlzowF6UF2agToX7pxEaGxGvpBGG034kk |
|
||||
1UXaB/d5YwcsBeH+x5cNMLKZy4zqjoxEEW31Q466NQKBgQDtKk1R/slpTpRqvtBT |
|
||||
NC7InvjcCBXkXttylQHJRN9glqhmflEOe8iMW1/qRwBPlQgK1wq/sXySanVv2+gO |
|
||||
JGq8XNRLbHyG3YRyshdnJHP1HoWQE0uedD/rfqgkNaW5S1IvHrD7Q7tOvCrF+KbS |
|
||||
612pmIgNVzn+inafDXPhMZc4pQKBgQDLtQGAu2eK58ewndyL8+7+VHZSTEtKpt+h |
|
||||
G/U/ccv+6NGqdxI5YUkrJ7k6vV81VeRMvmN9uUS/i8znORFQmm6noRVkhXytwW5B |
|
||||
HXq2co4WRvv9b/XqcqS0GSYVPJ1u4YNH6lvtDZ4UWPyBzYl700GdHrGa+erT44yL |
|
||||
tnibHx9GDQKBgFW1J+Qt85O+9hvtgVPQU+fkq4K42VCCh0PNXavi2+cICyufEqPt |
|
||||
T/iJPQxpRE9+SD3CoPvNpHs1ReN60U3rEzenRIFNX2NNwoPAoHyBy/YVZac/keBd |
|
||||
mov8Zb9QM+fWtIiaytLDE3nMvph017T5ogucN+66SxcV6vBn6CzFwySRAoGAcUf2 |
|
||||
Tv1ohkGAtgIDrLx5cmvL5NZSpHAKOpDOoHqLA/W66v4OX2RviRUtF7JJ6OIb9GWH |
|
||||
9Fl8Fr0KtKbyrw1CbevRdrYY8JN52bIoFJ+9zjupVHXXnookd5boq7SqpAe6ttpo |
|
||||
RnplJ1GZEiIXy4lemp6AC/vhD/YhqWxOw4zaGl0CgYBslhqVt5F0EHf94p7NrCuY |
|
||||
hNHKHaNaULYP0VXKefQamt/ssDuktqb6DNSIvx2rbbB5+33nTlLTya67gimY1lKt |
|
||||
WeNB33/yBkCjfSP/J5UDD9mE/oPLt3vAOkOUgMCfp2IpC2Wez1QGqLHS260zpotP |
|
||||
VpgalHuSWtn8D4nO2pk1hg== |
|
||||
-----END PRIVATE KEY----- |
|
||||
@ -1,227 +0,0 @@ |
|||||
1 - Contexte du projet |
|
||||
|
|
||||
L’entreprise “Framinfo” souhaite construire FreeTube, une alternative française à Youtube, leader mondial de l’hébergement de vidéos. |
|
||||
|
|
||||
En anticipation d’une levée de fond, “Framinfo” vous a choisi en tant que prestataire pour la réaliser un MVP (Minimum Viable Product). |
|
||||
|
|
||||
Le projet est individuel. Tout plagiat ou utilisation d’intelligence artificielle est strictement interdit. Le code que vous allez rendre doit être votre propre création et non des éléments copiés/collés. Si du plagiat est constaté, votre note sera d’office de 0/20. |
|
||||
2 - Description du projet |
|
||||
|
|
||||
2.1 - Généralités |
|
||||
|
|
||||
Freetube est une application d’hébergement et de partage de vidéos destinée à deux profils d’utilisateurs : |
|
||||
|
|
||||
Les créateurs de contenus, qui mettent en ligne leurs productions afin de s’adresser à leur audience (Divertissement, professionnels, publicités, etc.), |
|
||||
Les “consommateurs”, qui regardent le contenu postés par les créateurs de contenus. |
|
||||
|
|
||||
Afin de concurrencer les plateformes existantes, il est important que l’expérience utilisateur soit parfaitement adaptée à chaque utilisateur en fonction de son profil : Un soin tout particulier doit donc être accordé à l’interface et l’expérience utilisateur. |
|
||||
|
|
||||
2.2 - Fonctionnalités de l’application à implémenter |
|
||||
|
|
||||
2.2.1 - Connexion |
|
||||
|
|
||||
Un utilisateur pourra se connecter à l'application via un compte créé spécifiquement ou en utilisant au moins un service d’Oauth2 (Google, Microsoft, Github, etc.). |
|
||||
|
|
||||
2.2.2 - Gestion utilisateur |
|
||||
|
|
||||
Chaque utilisateur doit pouvoir administrer son compte, à savoir : |
|
||||
|
|
||||
Modifier son adresse email et nom d’utilisateur (qui doivent être uniques), |
|
||||
Modifier son mot de passe (doit être suffisamment sécurisé), |
|
||||
Modifier sa photo de profil, |
|
||||
Créer/Modifier un nom d’affichage pour sa chaîne Freetube, |
|
||||
Créer/Modifier une description pour sa chaîne Freetube, |
|
||||
|
|
||||
2.2.3 - Administration d’une chaine Freetube |
|
||||
|
|
||||
Les créateurs de contenus doivent évidemment pouvoir administrer leur chaine Freetube, publier des vidéos mais aussi suivre toutes leurs statistiques sur un panneau d’administration leur étant dédié. |
|
||||
|
|
||||
Un utilisateur peut : |
|
||||
|
|
||||
Mettre en ligne une vidéo qui générera un lien partageable et qui comprend : |
|
||||
Un média vidéo, tout type de fichier vidéo est accepté (MP4, AVI, WEBM, etc.) |
|
||||
Une miniature de vidéo, tout type de format image est accepté (JPG, PNG, WEBP, etc.) |
|
||||
Un titre, |
|
||||
Une description, |
|
||||
La date de mise en ligne, définie automatiquement lorsque la vidéo est rendue disponible, |
|
||||
La possibilité de mettre la vidéo en publique (accessible à tous les utilisateurs de Freetube via les fonctionnalités de recherche et de mise en avant) ou de la mettre en privée (accessible uniquement par les utilisateur possédant le lien pour accéder à cette dernière). |
|
||||
Jusqu’à 10 mots-clefs prenant la forme de hashtags afin de permettre aux créateurs de contenus de mieux se référencer sur les fonctionnalités de recherches. |
|
||||
Éditer n’importe quel élément une vidéo précédemment créée (tous les points précédemment décrits) |
|
||||
Changer la visibilité d’une vidéo (privée/publique) |
|
||||
Supprimer une vidéo |
|
||||
Consulter les statistiques de chaque vidéo individuellement (Nombre de “J’aime” et commentaire) |
|
||||
Consulter les statistiques globales de sa chaine Freetube dans une page dédiée (Cumul des statistiques de l’ensemble des vidéos) |
|
||||
|
|
||||
2.2.4 - Utilisation de Freetube |
|
||||
|
|
||||
N’importe quel utilisateur de Freetube, authentifié ou non, peut accéder à la plateforme gratuitement et librement. |
|
||||
|
|
||||
Page d’accueil : |
|
||||
|
|
||||
Bien que la disposition de la page d’accueil de l’application soit similaire pour tous les utilisateurs, qu’ils soient authentifiés ou non, les sections et recommendations diffèrent : |
|
||||
|
|
||||
Pour un utilisateur authentifié : |
|
||||
Une section “Recommendations”, mettant en avant du contenu que l’utilisateur n’a pas encore jamais vu et similaire au contenu qu’il regardé et avec lequel il a pu interagir (“J’aime”, commentaire, ajout à une playlist), |
|
||||
Une section “À consulter plus tard” comprenant les vidéos qu’un utilisateur a ajouté à la playlist du même nom, |
|
||||
Une section “Tendances” avec le contenu de la plateforme ayant généré le plus d’interaction récemment. |
|
||||
Pour une utilisateur non-authentifié : |
|
||||
Une section “Recommendations”, mettant en avant les 3 mots-clefs les plus utilisés de la plateforme (par exemple “Informations”, “Jeu vidéo”, etc.) |
|
||||
Une section “Tendances” avec le contenu de la plateforme ayant généré le plus d’interaction récemment, |
|
||||
Une section “Top Créateurs” affichant sous forme de cartes, la photo de profil, le nom et la description de la chaine, des créateurs ayant le plus d’abonnés de la plateforme. |
|
||||
|
|
||||
Page “Abonnements” : |
|
||||
|
|
||||
Pour les utilisateurs non-authentifiés, la page redirige vers la page de connexion/création de compte. |
|
||||
|
|
||||
Affiche le fil d’actualités et les dernières vidéos publiées par les créateurs de contenu auquel l’utilisateur est abonné. |
|
||||
|
|
||||
Page “Utilisateur” : |
|
||||
|
|
||||
Pour les utilisateurs non-authentifiés, la page redirige vers la page de connexion/création de compte. |
|
||||
|
|
||||
Cette page met en avant deux sections : |
|
||||
|
|
||||
Historique des vidéos regardées par l’utilisateur, |
|
||||
Playlists de l’utilisateur : |
|
||||
Liste des playlists de l’utilisateur (dont celle “À consulter plus tard” créée par défaut) |
|
||||
Création/Suppression de playlists |
|
||||
|
|
||||
Page “Playlist” : |
|
||||
|
|
||||
Un utilisateur accède à cette page depuis la liste de ses playlists dans la page “Utilisateur”. |
|
||||
|
|
||||
Cette page comprend uniquement le nom de la playlist et les vidéos (miniature, titre et chaine Freetube) contenus dans cette dernière, trié par date d’ajout dans cette dernière. |
|
||||
|
|
||||
Page pour les vidéos : |
|
||||
|
|
||||
Lorsque un utilisateur clique sur la miniature d’une vidéo ou utilise le lien de partage d’une vidéo, il arrive sur cette page qui affiche : |
|
||||
|
|
||||
Un lecteur vidéo qui comprend : |
|
||||
La vidéo publiée, |
|
||||
Les fonctionnalités de base d’un lecteur vidéo : |
|
||||
Play, |
|
||||
Pause, |
|
||||
Avance de XX secondes dans la vidéo, |
|
||||
Recul de XX secondes dans la vidéo, |
|
||||
Les informations du créateur de contenu : |
|
||||
Image de profil |
|
||||
Nom de la chaine |
|
||||
Nombre de “J’aime(s)” de la vidéo, |
|
||||
Nombre d’abonnés du créateur |
|
||||
Un bouton pour s’abonner à la chaine Freetube du créateur de la vidéo, |
|
||||
Un bouton pour aimer la vidéo, |
|
||||
Un bouton pour ajouter à une playlist (soit la playlist créée par défaut “À consulter plus tard”, soit une playlist personnalisée) |
|
||||
La description de la vidéo, |
|
||||
Un espace commentaire : |
|
||||
Possibilité de laisser un commentaire, |
|
||||
Feed de commentaires, affichés par date de publication (les commentaires les plus récents en premier) |
|
||||
Une section “Recommendations” pour un utilisateur authentifié ou une section “Tendance” pour un utilisateur non-authentifié, |
|
||||
|
|
||||
2.3 - Architecture et déploiement : |
|
||||
|
|
||||
2.3.1 - Architecture |
|
||||
|
|
||||
Votre application doit comporter trois briques distinctes : |
|
||||
|
|
||||
un serveur, devant être une API REST ou GraphQL et devant implémenter l'ensemble des fonctionnalités précédemment énoncées, |
|
||||
un client web devant uniquement interagir avec le serveur., |
|
||||
une base de données (choix libre). |
|
||||
|
|
||||
Aucune logique ne doit avoir lieu sur le client qui ne sert que d'interface et redirige les différentes requêtes vers le serveur. |
|
||||
|
|
||||
2.3.2 - Containérisation |
|
||||
|
|
||||
Le projet doit comporter un fichier docker-compose.yml à la racine du projet permettant de déployer au moins 3 services Docker distincts, respectivement pour le serveur, le client web et la base de données. |
|
||||
|
|
||||
L'application doit pouvoir être lancée intégralement via docker compose et être fonctionnelle. |
|
||||
3 - Rendu |
|
||||
|
|
||||
Il se fera sous la forme d'une archive au format "zip" contenant le code source, les fichiers annexes (sons, images, etc.), la documentations technique et le manuel utilisateur. |
|
||||
|
|
||||
La documentation technique est à destination de professionnels du domaine et contiendra au moins les éléments suivants : |
|
||||
|
|
||||
Informations et éléments à renseigner nécessaires au fonctionnement de l'application, |
|
||||
Guide de déploiement de l'application, |
|
||||
Justification du choix des langages et des librairies, |
|
||||
Diagrammes UML, |
|
||||
Schéma de la base de données, |
|
||||
|
|
||||
Le manuel utilisateur explique lui comment se servir de la solution et présente les différentes fonctionnalités. |
|
||||
|
|
||||
Aucun secret (clef d'API, mot de passe, etc.) ne doit être présent dans le rendu. Un secret présent en clair entrainera un malus de points sur la notation en fonction de la criticité de ce dernier. |
|
||||
|
|
||||
Tout rendu effectué en retard ne pourra pas être pris en compte. |
|
||||
|
|
||||
Ce projet est noté sur 500 points avec possibilité d'obtenir 50 points en bonus : |
|
||||
|
|
||||
Documentations : 50 points (une note inférieure à 30 points sur cette partie entraînera un ajournement à ce projet) |
|
||||
Documentation technique : 30 points |
|
||||
Manuel utilisateur : 20 points |
|
||||
Déploiement : 50 points (une note inférieure à 30 points sur cette partie entraînera un ajournement à ce projet) |
|
||||
Architecture et abstraction : 20 points |
|
||||
Containérisation : 30 points |
|
||||
Interface utilisateur : 50 points |
|
||||
Expérience utilisateur : 50 points |
|
||||
Fonctionnalités : 200 points (une note inférieure à 120 points sur cette partie entraînera un ajournement à ce projet) : |
|
||||
Inscription et connexion : 15 points |
|
||||
Connexion utilisateur standard (nom d’utilisateur et mot de passe) : 5 points |
|
||||
Connexion via OAuth2 (Facebook, Google, etc.) : 10 points |
|
||||
Gestion d’utilisateur : 10 points |
|
||||
Administration d’une chaine Freetube : 55 points |
|
||||
Mettre en ligne une vidéo : 30 points |
|
||||
Un média vidéo : 10 points |
|
||||
Une miniature de vidéo : 2 points |
|
||||
Un titre : 2 points |
|
||||
Une description : 2 points |
|
||||
La date de mise en ligne : 2 points |
|
||||
Mots-clefs : 2 points |
|
||||
Visibilité : 5 points |
|
||||
Lien partageable : 5 points |
|
||||
Éditer une vidéo existante : 5 points |
|
||||
Changer la visibilité : 5 points |
|
||||
Supprimer une vidéo : 5 points |
|
||||
Statistiques d’une vidéo : 5 points |
|
||||
Statistiques globales : 5 poins |
|
||||
Page Accueil : 30 points |
|
||||
Authentifié : 15 points |
|
||||
Recommendations : 5 points |
|
||||
À consulter plus tard : 5 points |
|
||||
Tendances : 5 points |
|
||||
Non-authentifié : 15 points |
|
||||
Recommendations : 5 points |
|
||||
Tendances : 5 points |
|
||||
Top créateurs : 5 points |
|
||||
Page Abonnements : 10 points |
|
||||
Fil d’actualité : 8 points |
|
||||
Redirection non-authentifié : 2 points |
|
||||
Page Utilisateur : 15 points : |
|
||||
Historique des vidéos : 10 points |
|
||||
Gestion et liste des playlists : 5 points |
|
||||
Page Playlist : 10 points |
|
||||
Page Vidéo : 50 points |
|
||||
Lecteur vidéo : 20 points : |
|
||||
Média visualisable : 10 points |
|
||||
Pause : 2 points |
|
||||
Play : 2 points |
|
||||
Saut XX secondes en avant : 3 points |
|
||||
Saut XX secondes en arrière : 3 points |
|
||||
Informations de la vidéo : 20 points |
|
||||
Titre de la vidéo : 2 points |
|
||||
Description : 2 points |
|
||||
Nom de la chaine : 2 points |
|
||||
Compteur abonnés : 2 points |
|
||||
Compteur “J’aime(s)” : 2 points |
|
||||
Bouton “J’aime” : 5 points |
|
||||
Bouton “S’abonner” : 5 points |
|
||||
Commentaires : 10 points |
|
||||
Créer un commentaire : 5 points |
|
||||
Voir les commentaires : 5 points |
|
||||
Recommendations : 5 points |
|
||||
Qualité du code : 100 points (une note inférieure à 60 points sur cette partie entraînera un ajournement à ce projet) : |
|
||||
Le barème item par item est identique à celui des fonctionnalités. Pour un item non réalisé ou complètement dysfonctionnel, la note de qualité de code correspondante sera automatiquement égale à zéro. |
|
||||
Les critères appréciés ici sont essentiellement : |
|
||||
Structures de données adaptées. |
|
||||
Absence de duplication inutile de code. |
|
||||
Lisibilité du code (cela inclut la cohérence et le sens du nommage des variables et sous-programmes). |
|
||||
Facilité de maintenance. |
|
||||
Abstraction du code |
|
||||
Loading…
Reference in new issue