Projeto PrimeFlix

React JS | Catálogo de Filmes

Visão geral

PrimeFlix é uma aplicação React executada localmente para consumir uma API externa de filmes em cartaz. A experiência inclui listagem dos títulos na home, página de detalhes, favoritos persistidos e acesso rápido ao trailer no YouTube.

Funcionalidades

  • Listagem de 20 filmes em cartaz diretamente na homepage.
  • Página de detalhes com sinopse, capa alternativa e avaliação.
  • Salvamento de filmes em favoritos com feedback visual.
  • Área "Meus Filmes" com leitura dos itens salvos.
  • Persistência dos favoritos via Local Storage.
  • Atalho para busca de trailer no YouTube.

Tecnologias

  • React JS para construção da interface baseada em componentes.
  • React Router DOM para navegação e roteamento entre páginas.
  • JavaScript para lógica de consumo de API e estado.
  • CSS para estilização da experiência web.
  • Local Storage para persistência de favoritos no navegador.

Fluxo principal da aplicação

  1. O usuário abre a home e visualiza os filmes em cartaz retornados pela API.
  2. Ao clicar em um filme, acessa a página de detalhes com informações completas.
  3. Pode salvar o filme nos favoritos e consultar depois em "Meus Filmes".
  4. Se desejar, abre rapidamente a busca de trailer no YouTube.
  5. Ao recarregar a aplicação, os favoritos continuam disponíveis por causa do Local Storage.

Conteúdos praticados

  • Consumo de API REST no front-end.
  • Gerenciamento de estado com hooks como `useState` e `useEffect`.
  • Roteamento no React com `react-router-dom`.
  • Persistência local de dados com `localStorage`.
  • Organização de projeto React para execução local e estudo prático.

Resumo técnico

O PrimeFlix é um projeto focado em experiência de navegação e integração com dados externos, ideal para demonstrar fundamentos sólidos de React no front-end: consumo de API, rotas, persistência local e fluxo completo de interação com o usuário.