netflixAi

Projet Netflixai

Netflixai est une application inspirée de Netflix qui imite l'apparence de Netflix, offrant une interface utilisateur et une expérience utilisateur similaires avec des fonctionnalités supplémentaires sur l'IA. L'application intègre Firebase pour les API d'authentification rationalisée et exploite les API pour les données de film et les recommandations alimentées par l'IA. Netflixai prend en charge les fonctionnalités multilingues, les composants réutilisables et est structuré avec la gestion de l'État géré via Redux.

---

Caractéristiques clés

• Authentification: utilise Firebase SaaS pour une authentification facile des utilisateurs.
• Base de données de films: Répondez les données cinématographiques de l'API de la base de données de films (TMDB) , permettant l'accès à une grande variété d'informations cinématographiques.
• Recommandations alimentées par l'IA: Étant donné que l'algorithme de recommandation de Netflix est propriétaire, Netflixai utilise l'API GPT-3.5 Turbo pour générer des recommandations de film personnalisées en fonction des interactions utilisateur.
• Support multilingue: fournit des fonctionnalités multilingues pour améliorer l'accessibilité pour divers publics.
• Composants réutilisables: construits avec des composants réutilisables pour une maintenance et une évolutivité plus faciles.
• Gestion de l'État: géré par Redux avec plusieurs tranches pour gérer différents états et interactions à travers l'application.
• Crochets personnalisés: implémente les crochets personnalisés pour optimiser la réutilisation du code et rationaliser la récupération et le traitement des données.

---

API principaux utilisés

1. API TMDB: sert de base de données de films principale, permettant à Netflixai de récupérer des informations détaillées sur divers films, y compris les genres, les titres de tendance, etc.
2. API Turbo GPT-3.5: Utilisé pour simuler un système de recommandation de film, car l'algorithme de recommandation de Netflix n'est pas disponible. Cette solution axée sur l'IA fournit des suggestions de films sur mesure basées sur des invites et des interactions utilisateur.

---

Structure du projet

1. Composants d'authentification

• Composant de connexion / inscription: un seul composant qui gère à la fois la connexion et les fonctionnalités d'inscription utilisateur, intégrés à Firebase pour l'authentification transparente.

2. Zone de contenu principale

• Composant principal: affiche le contenu du film principal après la connexion de l'utilisateur, composé de:
  • MainContainer: montre une vidéo de film en arrière-plan avec le titre de la vidéo superposé.
  • MOVIELIST COMPONANT: charge dynamiquement une liste de films à l'aide de données obtenues à partir de l'API TMDB.

3. Recherche et suggestions GPT

• Composant de page GPT: un domaine dédié où les utilisateurs peuvent rechercher des films et obtenir des recommandations alimentées par l'IA. Cette page comprend:
  • GPT Search Bar: permet aux utilisateurs de taper des invites pour obtenir des suggestions de films sur mesure.
  • Composant de suggestions de films: affiche des films suggérés par l'API GPT-3.5 Turbo, avec des données récupérées à partir de l'API TMDB en fonction de la requête de l'utilisateur.

---

Technologies et bibliothèques

• Firebase: pour l'authentification des utilisateurs.
• API TMDB: pour accéder aux données du film.
• API GPT-3.5 Turbo: pour générer des recommandations de films.
• Redux: pour gérer l'état d'application global avec différentes tranches de contrôle de l'état organisé.
• Réagissez avec les crochets personnalisés: pour promouvoir la réutilisation du code et simplifier la logique complexe.
• Prise en charge multilingue: permet une interface utilisateur plus accessible et globalement adaptable.

---

Exemple d'utilisation

Voici un exemple de flux du fonctionnement de Netflixai:

1. Connexion / inscription utilisateur: l'utilisateur se connecte ou s'inscrit via Firebase.
2. Contenu du film principal: une fois connecté, l'utilisateur est présenté avec le principal principal film et un titre en vedette, ainsi qu'une liste d'autres films populaires.
3. Recherche GPT: l'utilisateur peut interagir avec la barre de recherche GPT pour recevoir des recommandations de films en fonction de ses contributions.
4. Suggestions personnalisées: les suggestions alimentées en AI sont affichées dans le composant des suggestions de films, en tirant des données de l'API TMDB en fonction de la requête de l'utilisateur.

---

Netflixai combine l'esthétique de Netflix avec des fonctionnalités AI avancées pour fournir une expérience de navigation de film et de recommandation robuste.

Configurations de projet

create-react-app [échafaudage de l'application react]

 npx create-react-app

configurer tailwindcss

 npm install -D tailwindcss
npx tailwindcss init

Un nouveau fichier sera créé comme tailwind.config.css -> Il suffit d'ajouter le code suivant sur ce fichier

 /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // js,tsx,tx,tsx is nothing but the language support
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ajoutez-les à index.css

 @tailwind base;
@tailwind components;
@tailwind utilities;

Ajouter Firebase au projet pour l'authentification et l'hébergement des incendies pour le déploiement