/tmdb-react-js

Um React app consumindo a API do TMDB.

Primary LanguageJavaScriptMIT LicenseMIT

Logo TMDB

🌟 TMDB ReactJs 🌟

Um React app totalmente responsivo construído com React consumindo a api pública do TMDB.

DemoBibliotecasFuncionalidadesIniciando

Tmdb React js

Demo

TMDB ReactJs - Live ◀️

Bibliotecas

As principais bibliotecas usadas nesse projeto:

Biblioteca Descrição
React Uma biblioteca JavaScript para criar interfaces de usuário.
Bootstrap A biblioteca de front-end mais popular reconstruída para React.
Router Dom O React Router Dom é uma lib completa para controle de rotas.
Axios Cliente HTTP baseado em promessa para o navegador e node.js.
Moment Uma biblioteca de datas JavaScript para analisar, validar, manipular e formatar datas.

Funcionalidades

  • Descubra (/discover) - Lista filmes ou séries baseado nos filtros selecionados (Ano e Ordernar por).

  • Filmes/Séries (/movie ou /tvs) - Lista filmes ou séries baseado no tipo selecionado (Populares ou Mais votados).

  • Pesquisa (search) - Lista filmes, séries ou pessoas baseado na palavra digitada.

  • Filmes/Séries (/details) - Exibe informações detalhadas como data de lançamento, gêneros, tempo de duração, trailer etc... sobre o filme ou série escolhida, mostrando também informações sobre o elenco e recomendações.

  • Pessoas (/persons) - Lista pessoas

  • Detalhes Pessoas (/person) - Exibe informações detalhadas como data de nascimento, gênero, trabalhos etc... sobre a pessoa escolhida.

  • OBS: Todas as páginas que contém listagem estão páginadas.

Iniciando

  • Clonar esse repositório

    git clone https://github.com/matheusmhq/tmdb-react-js.git
    
    cd tmdb-react-js
    
  • Instale as dependências

    yarn install ou npm install
    
  • Pegue uma API KEY em TMDB. Faça login usando sua conta e navegue até TMDB Configurações da conta. Copie a API KEY (v3 auth) e crie o seguinte arquivo .env.local na pasta raiz do projeto

  • Cole isso no seu arquivo .env.local e salve

    REACT_APP_API_KEY=COLE_SUA_API_KEY_AQUI
    
  • Agora é só rodar yarn start ou npm start

  • A aplicação irá abrir no seguinte endereço http://localhost:3000

  • Bons estudos pra você! 😀😀😀