📺 Projet Final : Site de Streaming Vidéo de Films et Séries

Description du Projet

Ce projet consiste en la création d'un site web de streaming vidéo permettant aux utilisateurs de regarder des films et des séries en ligne. Le site offre une interface conviviale où les utilisateurs peuvent naviguer, rechercher et regarder une large sélection de contenus vidéo.

Nom du groupe

Rayane ACHOUCHI: Développeur Front-End

Mathéo Vovard: Développeur Backend (gestion et sécurité de l'API) + déploiement + gestion du projet

Joao MARQUIS-DINIS: Designer UX/UI

Cédric HU: Création et Gestion des Bases de Données sur AWS

Fonctionnalités principales

Inscription/Connexion : Les utilisateurs peuvent créer un compte ou se connecter à un compte déjà existant.

Gestion de profil : Les utilisateurs peuvent gérer leurs profils (changer les informations personnelles, ajouter une photo de profil, etc.).

Catalogue de Films et Séries : Une bibliothèque contenant des films et séries classés par genre, popularité, nouveautés, etc.

Streaming vidéo : Les utilisateurs peuvent regarder des vidéos en streaming sans téléchargement.

Fonctionnalités secondaires

Recherche avancée : Les utilisateurs peuvent rechercher des films et séries par titre, genre, acteur, réalisateur, etc.

Favoris : Les utilisateurs peuvent ajouter des films et des séries à leur liste de favoris.

Historique de visionnage : Une section permettant de retrouver les films et séries récemment visionnés.

Système de notation et de commentaires : Les utilisateurs peuvent noter et commenter les films et séries qu'ils ont regardés.

🎯 Objectifs du projet

Développer un site web responsive pour le streaming vidéo.

Implémenter des fonctionnalités d'authentification et de gestion des utilisateurs.

Intégrer une base de données pour stocker les informations relatives aux utilisateurs, aux vidéos, aux commentaires, etc.

Offrir une expérience utilisateur fluide avec une interface intuitive.

Gérer la diffusion de vidéos en streaming de manière efficace.

Technologie utilisée

Backend :

• Langages: TypeScript
• Framework: Express, Node.js
• Bibliothèques: nodemon, concurrently, yup
• Base de donnée: MongoDB / PostgreSQL
• Authentification: NextAuth / OAuth2
• API: API RESTful pour la gestion des utilisateurs, des vidéos, des commentaires, etc...

Frontend :

• Langages: HTML5, CSS3, JavaScript
• Framework: React
• Bibliothèques: ShadcnUI, TailwindCSS
• Lecteur Vidéo: Video.js / Plyr.js

Streaming Video :

• Protocole: HLS (HTTP Live Streaming)
• CDN (Content Delivery Network) pour la distribution efficace du contenu

Hébergement et Serveur :

• Server web : Nginx / Apache
• Hébergement : AWS, Heroku

---

📁 Structure du Projet

    .
├── api/                # Dossier pour les fichiers backend
│   ├── index.js            # Application principale backend (ou app.py pour Python)
│   ├── models/             # Modèles pour la base de données
│   └── routes/             # Routes API pour les fonctionnalités
│
├── frontend/               # Dossier pour les fichiers frontend
│   ├── public/             # Fichiers publics (images, styles)
│   ├── app/                # Code source (composants React, services)
│             # Page HTML principale
│
├── db/                     # Fichiers de migration et schéma de la base de données
│
├── README.md               # Ce fichier
├── requirements.txt        # Liste des dépendances Python (ou package.json pour Node.js)
└── .gitignore              # Fichier pour ignorer certains fichiers dans git

---

🚀 Installation et Démarrage

Prérequis

• Node.js
• Base de donnée
• Git

Étape d'installation

1. Clonez le dépôt :

    git clone [email protected]:MARQUESDINISJoaoGabriel/Server-Web-Efrei-Projet.git
    cd Server-Web-Efrei-Projet

2. Backend :

• Installez les dépendances :

npm install
yarn install

• Configurer la base de donnée dans les fichiers de configuration
• Lancez le server backend

node index.js

3. Frontend

• Allez dans le dossier frontend

cd app-front

• Installez les dépendances

npm install
yarn install

• Lancez l'application frontend

    npm run dev | npm start
    yarn dev

4. Accès au site

• Ouvrez votre navigateur et accédez à http://localhost:3000 pour lancer le site

---

✅ Tests

1. Tests unitaires pour les fonctions backend :

npm test
yarn test

2. Tests d'intégration pour vérifier les fonctionnalités principales du site (authentification, streaming, etc...)

---

🎨 Capture d'Écran

📌 Fonctionnalités à Améliorer

Améliorer les performances du streaming pour les connexions à faible bande passante.

Ajouter un système de recommandation basé sur les préférences des utilisateurs.

Intégrer des sous-titres et plusieurs langues pour les vidéos.

---

👨‍💻 Auteur

Nom de l'Auteur : Rayane

Email : [email protected]

GitHub : https://github.com/Enayarefrei