Plataformas de streaming se tornaram padrão na forma como consumimos conteúdo hoje. Pensando nisso, desenvolvi o PrimeFlix, uma aplicação frontend inspirada nesse modelo, com foco em recriar uma experiência moderna de navegação e consumo de filmes. O projeto foi construído com o objetivo de evoluir minhas habilidades em React, consumo de APIs e construção de interfaces escaláveis.
Como construir uma interface de streaming que:
- Seja rápida e responsiva
- Consuma dados externos de forma eficiente
- Escale com facilidade conforme novas funcionalidades
- Ofereça uma boa experiência ao usuário mesmo com grandes volumes de dados
Para resolver esses desafios, desenvolvi uma aplicação baseada em:
- Arquitetura componentizada com React
- Consumo de API para dados dinâmicos
- Organização modular para facilitar manutenção e escalabilidade
- Interface responsiva inspirada em plataformas reais
A aplicação permite que o usuário explore filmes, busque conteúdos e visualize detalhes de forma fluida.
Durante o desenvolvimento, algumas decisões foram fundamentais:
Separei a aplicação em componentes reutilizáveis para facilitar manutenção e reuso.
Utilizei a API do The Movie Database (TMDB) para trabalhar com dados reais, simulando um cenário de produção.
Estruturei o projeto pensando em escalabilidade, separando responsabilidades como:
- components/: Componentes reutilizáveis (Header, Skeleton)
- pages/: Páginas da aplicação
- hooks/: Custom hooks para logica reutilizável
- services/: Configuração e integração com APIs
- utils/: Funções utilitárias e constantes
Priorizei:
- Navegação simples
- Carregamento rápido com Skeleton Loading
- Interface limpa e intuitiva
A aplicação foi desenvolvida para funcionar bem em diferentes dispositivos.
Criei hooks personalizados para encapsular lógica complexa:
useMovies: Gerencia listagem e busca de filmesuseMovieDetails: Gerencia detalhes de um filme específicouseFavorites: Gerencia sistema de favoritos com localStorage
Implementei busca com debounce para otimizar requisições à API.
✅ Listagem de filmes em cartaz
✅ Busca de filmes com debounce
✅ Visualização detalhada de filmes
✅ Sistema de favoritos com localStorage
✅ Skeleton Loading para melhor UX
✅ Tratamento de erros com fallback UI
✅ Interface responsiva
| Tecnologia | Versão |
|---|---|
| React | 19.2.0 |
| React Router DOM | 7.9.5 |
| Axios | 1.13.2 |
| React Toastify | 11.0.5 |
src/
├── components/
│ ├── Header/
│ └── Skeleton/
├── pages/
│ ├── Home/
│ ├── Filme/
│ ├── Favoritos/
│ └── Erro/
├── hooks/
│ ├── useMovies.js
│ ├── useMovieDetails.js
│ └── useFavorites.js
├── services/
│ └── api.js
├── utils/
│ ├── constants.js
│ └── debounce.js
├── App.js
├── routes.js
└── index.js
Para aproximar ainda mais de um cenário real, as próximas melhorias incluem:
- Otimização de performance (lazy loading e memoização)
- Implementação de testes automatizados
- Adição de autenticação de usuários
- Criação de recomendações personalizadas
- Integração com mais APIs (notícias, trailers, etc.)
Essas melhorias têm como objetivo transformar o projeto de um clone visual em um produto mais completo.
Com esse projeto, desenvolvi habilidades importantes como:
- Consumo e manipulação de APIs REST
- Organização de aplicações frontend
- Criação de interfaces modernas e responsivas
- Estruturação de código escalável
- Criação de custom hooks
- Tratamento de erros e UX de loading
Além disso, o projeto reforçou minha capacidade de transformar ideias em aplicações funcionais.
# Clone o repositório
git clone https://github.com/seu-usuario/primeflix
# Entre na pasta do projeto
cd primeflix
# Instale as dependências
npm install
# Inicie o projeto
npm start🟢 O projeto será executado em: http://localhost:3000
Desenvolvido por Renan Marinho 💙
Projeto para estudos e evolução em React ⚛️🚀
"Eu não só sei React, eu sei construir produto"