josieljcc / movies-react-tailwindcss

Boas-vindas ao repositório do projeto Trymovies!

👨‍💻 O que será desenvolvido

Neste projeto você irá criar o Trybemovies, uma aplicação capaz de exibir filmes, criar uma lista de filmes favoritos e fazer Login . Essa aplicação será capaz de:

• Fazer login;
• Pesquisar por um filme;
• Visualizar os detalhes de um filme selecionado;
• Favoritar e desfavoritar os filmes;
• Ver a lista de filmes favoritas;

Habilidades

Neste projeto, verificamos se você é capaz de:

• Fazer requisições e consumir dados vindos de uma API;

• Utilizar os ciclos de vida de um componente React;

• Utilizar a função setState de forma a garantir que um determinado código só é executado após o estado ser atualizado

• Utilizar o componente BrowserRouter corretamente;

• Criar rotas, mapeando o caminho da URL com o componente correspondente, via Route;

• Utilizar o Switch do React Router

• Criar links de navegação na aplicação com o componente Link;

Requisitos

1. Crie as rotas necessárias para a aplicação

Para poder fazer uso de React Router, é preciso que se instale em uma aplicação React o pacote react-router-dom:

    npm install react-router-dom@v5

Você deve utilizar o BrowserRouter pra criar as rotas da sua aplicação e cada rota deverá renderizar um componente específico. Crie cada componente dentro da pasta src/pages, conforme o indicado abaixo:

⚠️ DICA

"Route exact path="/about" component={ About } "

Rota /

- A rota `/` deve renderizar um componente chamado `Login`.

Rota /home

• A rota /home deve renderizar um componente chamado Home;

Rota /movies/:id

• A rota /movies/:id deve renderizar um componente chamado MovieDetail.

Rota /favorites

• A rota /favorites deve renderizar um componente chamado Favorites.

2. Crie um formulário para identificação

Dentro da page Login, que é renderizado na rota /, crie um formulário para que a pessoa usuária se identifique com um nome:

• Você deve criar um campo para que a pessoa usuária insira seu nome.

• Crie um botão com o texto Entrar.

• O botão para entrar só deve estar habilitado caso o nome digitado tenha 3 ou mais caracteres.

• Ao clicar no botão Entrar, deve salvar o nome digitado no localStorage com o nome da chave 'user'.

• Após a informação ter sido salva, faça um redirect para a rota /home.

3. Crie um componente de cabeçalho

Crie um componente chamado Header, dentro da pasta src/components:

• Crie esse componente com a tag header envolvendo todo seu conteúdo.

• Recupere o nome da pessoa logada e exiba essa informação na tela.

• Renderize o componente de cabeçalho na página da rota /home;

⚠️ Requisição a API dos filmes ⚠️

Crie um arquivoMoviesApi, dentro da pasta src/services:

• No arquivo MoviesApi.js, crie as funções que fazem requisição a API de filmes. A API themoviedb é gratuita e precisa fazer cadastro para conseguir utilizar, desta forma receberá uma key que deve ser utilizada na url. Segue algumas informações sobre a API:

• documentação:

   https://api.themoviedb.org

• requisição para filmes mais procurados da semana:

   `https://api.themoviedb.org/3/trending/all/week?api_key=${apiKey}`

• requisição para um filme pelo id:

  `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`

• requisição para um filme buscado pelo nome:

  `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${search}`

4. Faça a requisição para pesquisar os filmes

Dentro da page Home, crie uma função para que faça uma requisição dos filmes mais procurados da semana:

Crie um componente chamado MovieCard, dentro da pasta src/components:

• Crie esse componente com a tag p que deve conter o titulo do filme.

• Crie esse componente com a tag img que deve conter o poster do filme.

  ⚠️ DICA

  Para exibir a imagem, deve colocar desta forma na src:

    `https://image.tmdb.org/t/p/w500${poster_path}`

• Renderize o componente MovieCard na página da rota /home passando as informações dos filmes como props;

• Exiba na tela o titulo do filme e a imagem.

-* Enquanto aguarda exiba a mensagem Carregando... na tela.

5. Crie a página de detalhes do filme selecionado

Dentro da page MovieDetail, exiba o detalhes somente do filme selecionado

• Ao clicar em um filme da rota Home, faça um redirect para a rota /movie/:id desse filme selecionado.

• Faça uma requisição apenas do filme selecionado

• Enquanto aguarda a resposta da API exiba a mensagem Carregando... na tela.

• Deve exibir a imagem de fundo, titulo e a descrição do filme selecionado

  ⚠️ DICA

  Para exibir a imagem, deve colocar desta forma na src:

    `https://image.tmdb.org/t/p/original/${backdrop_path}`

6. Crie o componente para pesquisar o filme desejado

Este componente deve conter um input e um botão para que seja possível pesquisar os filmes.

Crie um componente chamado Search, dentro da pasta src/components:

• Crie um campo para pessoa digitar o nome do filme a ser pesquisado.

• Crie um botão com o texto Procurar.

• Renderize o componente de pesquisa no componente Header.

7. Faça a requisição para pesquisar os filmes

Dentro da page Home, crie uma função para que faça uma requisição para o filme que deseja pesquisar pelo nome:

• Após receber a resposta da requisição, deve renderizar no componente MovieCard somente o filme pesquisado.

• Enquanto aguarda a resposta da API, esconda o input e o botão de pesquisa e exiba a mensagem Carregando... na tela.

8. Crie o mecanismo para adicionar e remover os filmes na lista de filmes favoritas

Dentro do componente MovieCard, crie um input do tipo checkbox para marcar os filmes favoritos

• Deve existir um checkbox para cada filme da lista;

• Ao clicar no checkbox, deve salvar no localStorage as informações do filme;

9. Crie a lista de filmes favoritas

Crie a lista dentro do componente Favorites

• Ao entrar na página, recupere a lista de filmes favoritas.

• Enquanto aguarda a resposta, exiba a mensagem Carregando...

• Após receber o retorno da lista de favoritas, utilize o componente MovieCard para renderizar a lista de filmes favoritos.

• Nesta página deve ser possível desfavoritar os filmes

• A lista de filmes favoritos é atualizada ao remover um filme da lista.