Este projeto é um desafio técnico sobre a utilização da API do themoviedb.org (TMDB) para listar filmes e séries populares, implementar filtros de pesquisa e exibir detalhes das produções em uma aplicação React utilizando Next.js, TypeScript e Tailwind CSS.
Clique para ver o projeto online
Clique para ver o video no YouTube
- React
- Next.js
- O Next.js foi escolhido por seu excelente suporte a renderização no lado do servidor (SSR - Server-Side Rendering) e geração estática (SSG - Static Site Generation). Estas funcionalidades são fundamentais para melhorar a performance e otimização para motores de busca (SEO), o que é um grande diferencial para aplicações que necessitam de um carregamento rápido e eficiente, além de uma excelente indexação em motores de busca. Ideal para projetos que exigem alta performance e um ótimo SEO.
- TypeScript
- Tailwind CSS
- Shadcn/ui
- Zod
- React Hook Form
- Jest
- React Testing Library
- Suspense API do React para melhorar a experiência do usuário com estados de loading
Os testes unitários desempenham um papel crucial na garantia da qualidade e confiabilidade da aplicação. Utilizando Jest em conjunto com a React Testing Library, criamos testes para verificar o funcionamento correto de componentes chave. Exemplos de testes realizados incluem:
- Componente de Paginação: Verificação se a paginação é renderizada corretamente, e se a navegação entre páginas funciona como esperado.
- Componente de Busca: Garantia que a busca é submetida corretamente, e que exibe mensagens de erro apropriadas para entradas inválidas.
- Modal de Pesquisa: Testes para assegurar que o modal abre e fecha corretamente, e que o componente de busca é renderizado dentro do modal.
Esses testes garantem que os componentes críticos da aplicação se comportem conforme esperado, proporcionando uma experiência de usuário estável e sem erros.
Este projeto fornece diversas funcionalidades, incluindo:
- Listagem de filmes em alta
- Listagem de filmes mais populares
- Filtro de pesquisa de produções específicas, salvando o resultado na URL
- Paginação na página de pesquisa e filmes (20 filmes por página) - salvando o resultado na URL
- Página de detalhes do filme, contendo informações detalhadas como:
- Nome
- Data de lançamento
- Gêneros
- Duração
- Poster
- Banner
- Sinopse
- Classificação geral
- Diretor
- Elenco
- Título original
- Idioma original
- Orçamento
- Bilheteria
O objetivo principal é demonstrar habilidades nas tecnologias mencionadas, focando na integração com APIs externas, implementação de filtros de pesquisa e exibição de detalhes das produções.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
# Clone este repositório
$ git clone https://github.com/danielrdsdev/pilar-challenge.git
# Acesse a pasta do projeto no terminal/cmd
$ cd pilar-challenge
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# O servidor inciará na porta:3000 - acesse http://localhost:3000