Proyecto Netflixai
Netflixai es una aplicación inspirada en Netflix que imita el aspecto de Netflix, proporcionando una interfaz de usuario similar y una experiencia de usuario con características adicionales impulsadas por AI. La aplicación integra Firebase para la autenticación simplificada y aprovecha las API para los datos de la película y las recomendaciones de IA. Netflixai admite funcionalidad multilingüe, componentes reutilizables y está estructurado con la gestión de estado manejada a través de Redux.
Características clave
- Autenticación: utiliza Firebase SaaS para una fácil autenticación del usuario.
- Base de datos de películas: obtiene datos de películas de la API de la base de datos de películas (TMDB) , lo que permite el acceso a una amplia variedad de información de películas.
- Recomendaciones con AI: dado que el algoritmo de recomendación de Netflix es propietario, Netflixai utiliza la API Turbo GPT-3.5 para generar recomendaciones de películas personalizadas basadas en las interacciones del usuario.
- Soporte multilingüe: proporciona funcionalidad multilingüe para mejorar la accesibilidad de diversas audiencias.
- Componentes reutilizables: construidos con componentes reutilizables para un mantenimiento más fácil y escalabilidad.
- Gestión del estado: gestionado por Redux con múltiples rebanadas para manejar diferentes estados e interacciones en toda la aplicación.
- Gancos personalizados: implementa ganchos personalizados para optimizar la reutilización de código y optimizar la recuperación y el procesamiento de datos.
API principales utilizadas
- TMDB API: Sirve como la base de datos de películas principal, lo que permite a Netflixai obtener información detallada sobre varias películas, incluidos géneros, títulos de tendencia y más.
- GPT-3.5 Turbo API: se usa para simular un sistema de recomendación de película, ya que el algoritmo de recomendación de Netflix no está disponible. Esta solución dirigida por IA proporciona sugerencias de películas a medida basadas en las indicaciones e interacciones del usuario.
Estructura de proyectos
1. Componentes de autenticación
- Componente de inicio de sesión/registro: un componente único que maneja las funcionalidades de inicio de sesión y registro del usuario, integrado con Firebase para una autenticación perfecta.
2. Área de contenido principal
- Componente principal: muestra el contenido de la película principal después del inicio de sesión del usuario, que consiste en:
- MainContainer: muestra un video de película en el fondo con el título del video superpuesto.
- Componente Movielist: carga dinámicamente una lista de películas que usan datos obtenidos de la API TMDB.
3. Búsqueda y sugerencias de GPT
- Componente de página GPT: un área dedicada donde los usuarios pueden buscar películas y obtener recomendaciones con IA. Esta página incluye:
- Barra de búsqueda GPT: permite a los usuarios escribir las indicaciones para obtener sugerencias de películas personalizadas.
- Componente de sugerencias de películas: Muestra películas sugeridas por la API Turbo GPT-3.5, con datos obtenidos de la API TMDB basada en la consulta del usuario.
Tecnologías y bibliotecas
- Firebase: para la autenticación del usuario.
- API TMDB: para acceder a los datos de la película.
- GPT-3.5 Turbo API: para generar recomendaciones de películas.
- Redux: para administrar el estado de aplicación global con diferentes rebanadas para el control de estado organizado.
- Reaccione con ganchos personalizados: para promover la reutilización del código y simplificar la lógica compleja.
- Soporte multilingüe: habilita una interfaz de usuario más accesible y adaptable a nivel mundial.
Uso de ejemplo
Aquí hay un flujo de ejemplo de cómo funciona Netflixai:
- Iniciar sesión de usuario/Registro: Iniciar sesión en el usuario o registrarse a través de Firebase.
- Contenido principal de la película: una vez iniciado, al usuario se presenta con el MainContainer, que muestra una película y título destacados, junto con una lista de otras películas populares.
- Búsqueda de GPT: el usuario puede interactuar con la barra de búsqueda GPT para recibir recomendaciones de películas basadas en su entrada.
- Sugerencias personalizadas: las sugerencias con AI se muestran en el componente de sugerencias de películas, extrayendo datos de la API TMDB basada en la consulta del usuario.
Netflixai combina la estética de Netflix con características avanzadas de IA para proporcionar una sólida experiencia de navegación de películas y recomendación.
Configuraciones de proyectos
crear react-app [andamio de la aplicación react]
Configurar las ondas de cola
npm install -D tailwindcss
npx tailwindcss init
Se creará un nuevo archivo como tailwind.config.css -> Simplemente agregue el siguiente código a este archivo
/** @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: [],
}
Agregue estos a index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Agregue Firebase al proyecto para la autenticación y el alojamiento de incendios para la implementación
