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
Este projeto fornece diversas funcionalidades, incluindo:
- Listagem de filmes/séries em alta
- Listagem de filmes/séries 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/série, 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/tmdb-movies.git
# Acesse a pasta do projeto no terminal/cmd
$ cd tmdb-movies
# 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