O projeto consiste em uma listagem dos filmes mais populares do dia utilizando a API gratuita themoviedb, os filmes são atualizados em tempo real, com a opção de filtragem e detalhamento do filme em outra página, exibindo todas informações pertinentes a respeito.
Usando a API de filmes gratuita themoviedb, você será responsável por criar uma listagem dos filmes mais populares do dia, consultando o endpoint GET /movie/popular para realizar a listagem. Ao clicar em um item dessa listagem, outra página com os detalhes do filme escolhido deve ser exibida. Para acessar mais detalhes sobre o filme, você pode consultar o endpoint GET /movie/{movie_id}.
Para garantir que o usuário encontre o filme que está procurando, essa lista deverá ser paginada.
Siga o layout do figma sugerido. Não há necessidade de ser pixel perfect mas respeite a composição, fontes e cores.
✔ O usuário deve ter acesso a uma listagem dos filmes mais populares do dia
✔ O usuário deve conseguir paginar a lista para encontrar novos filmes
✔ O usuário deve ter acesso a uma outra página com detalhes sobre o filme, ao clicar em um item na listagem
✔ A página com detalhes de um filme deve possuir uma rota própria e estar preparada para ser indexada em mecanismos de pesquisa
- Página interativa
- Filtragem de filmes
- Design responsivo
- Navegação entre páginas
- HTMl5
- Javascript
- TailwindCSS
- Typescript
- React + ViteJS
Clone o projeto
git clone: https://github.com/GabrielMarcC/Case-Promobit
Entre no diretório do projeto
cd Case-Promobit
Instale as dependências
npm install
Inicie o servidor
npm run dev: inicie dessa forma para modificações no projeto.
npm run preview: inicie uma prévia do projeto.
Durante o projeto, aprendi e utilizei várias tecnologias, incluindo HTML5, JavaScript, Tailwind CSS, TypeScript, React e ViteJS. Essas ferramentas me ajudaram a estruturar a aplicação, estilizá-la, criar componentes reutilizáveis e gerenciar o estado de forma eficiente. Foi uma experiência enriquecedora de aprendizado e me permitiu desenvolver habilidades essenciais no desenvolvimento frontend
Para realizar o deploy da aplicação, utilizei a plataforma Vercel. A Vercel é uma plataforma de hospedagem que oferece integração perfeita com projetos baseados em frameworks como o React e o ViteJS. Com poucos passos, pude fazer o upload do código para a Vercel e configurar as opções de build e deploy. A plataforma se encarregou de compilar o projeto e disponibilizá-lo online de forma rápida e confiável. O uso da Vercel simplificou o processo de deploy, permitindo que eu concentrasse mais tempo no desenvolvimento da aplicação em si.