Projeto Netflixai
A Netflixai é um aplicativo inspirado na Netflix que imita a aparência da Netflix, fornecendo uma interface de usuário semelhante e experiência do usuário com recursos adicionais orientados a IA. O aplicativo integra o FireBase para autenticação simplificada e aproveita as APIs para dados de filmes e recomendações de IA. A Netflixai suporta funcionalidade multilíngue, componentes reutilizáveis e é estruturada com o gerenciamento de estado tratado através do Redux.
Principais recursos
- Autenticação: usa o Firebase SaaS para fácil autenticação do usuário.
- Banco de dados de filmes: busca dados de filmes da API do banco de dados de filmes (TMDB) , permitindo o acesso a uma ampla variedade de informações sobre filmes.
- Recomendações a IA: Como o algoritmo de recomendação da Netflix é proprietário, a Netflixai utiliza a API do GPT-3.5 Turbo para gerar recomendações personalizadas de filmes com base nas interações do usuário.
- Suporte multilíngue: fornece funcionalidade multilíngue para melhorar a acessibilidade para diversos públicos.
- Componentes reutilizáveis: construído com componentes reutilizáveis para facilitar a manutenção e a escalabilidade.
- Gerenciamento de Estado: gerenciado pelo Redux com várias fatias para lidar com diferentes estados e interações em todo o aplicativo.
- Ganchos personalizados: implementa ganchos personalizados para otimizar a reutilização do código e otimizar a busca e processamento de dados.
APIs principais usadas
- API do TMDB: serve como o banco de dados de filmes primários, permitindo que a Netflixai busque informações detalhadas sobre vários filmes, incluindo gêneros, títulos de tendências e muito mais.
- GPT-3.5 API TURBO: Usado para simular um sistema de recomendação de filmes, pois o próprio algoritmo de recomendação da Netflix não está disponível. Esta solução orientada a IA fornece sugestões de filmes personalizados com base em avisos e interações do usuário.
Estrutura do projeto
1. Componentes de autenticação
- Componente de inscrição/inscrição: um único componente que lida com as funcionalidades de entrada e inscrição do usuário, integradas à Firebase para autenticação perfeita.
2. Área de conteúdo principal
- Componente primário: exibe o conteúdo do filme principal após o login do usuário, consistindo em:
- Maincontainer: mostra um vídeo de filme em segundo plano com o título do vídeo sobreposto.
- Componente MovieList: carrega dinamicamente uma lista de filmes usando dados obtidos na API TMDB.
3. Pesquisa e sugestões GPT
- Componente da página GPT: Uma área dedicada onde os usuários podem pesquisar filmes e obter recomendações movidas a IA. Esta página inclui:
- Barra de pesquisa do GPT: permite que os usuários digitem instruções para obter sugestões de filmes personalizados.
- Componente de sugestões de filmes: exibe filmes sugeridos pela API GPT-3.5 Turbo, com dados obtidos na API TMDB com base na consulta do usuário.
Tecnologias e bibliotecas
- Firebase: para autenticação do usuário.
- API do TMDB: para acessar dados do filme.
- GPT-3.5 API TURBO: Para gerar recomendações de filmes.
- Redux: para gerenciar o estado de aplicação global com diferentes fatias para controle de estado organizado.
- Reaja com ganchos personalizados: para promover a reutilização do código e simplificar a lógica complexa.
- Suporte multilíngue: Ativa uma interface de usuário mais acessível e globalmente adaptável.
Exemplo de uso
Aqui está um exemplo de fluxo de como as funções de Netflixai:
- Inscrição/inscrição do usuário: o usuário faz login ou se inscreve via Firebase.
- Conteúdo do filme principal: Uma vez conectado, o usuário é apresentado com o Maincontainer, mostrando um filme e título em destaque, juntamente com uma lista de outros filmes populares.
- Pesquisa do GPT: O usuário pode interagir com a barra de pesquisa do GPT para receber recomendações de filmes com base em sua entrada.
- Sugestões personalizadas: As sugestões movidas a IA são exibidas no componente de sugestões do filme, extraindo dados da API do TMDB com base na consulta do usuário.
A Netflixai combina a estética da Netflix com recursos avançados de IA para fornecer uma experiência robusta de navegação e recomendação de filmes.
Configurações de projeto
Criar-react-app [andaimes do aplicativo React]
Configure Tailwindcss
npm install -D tailwindcss
npx tailwindcss init
O novo arquivo será criado como Tailwind.config.css -> Basta adicionar o seguinte código neste arquivo
/** @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: [],
}
Adicione -os ao index.csss
@tailwind base;
@tailwind components;
@tailwind utilities;
Adicione Firebase ao projeto para autenticação e hospedagem de incêndio para implantação
