Organizamos as branches para serem guardadas as versões do projeto

• main: em produção
• developer: em desenvolvimento das tarefas
• v-dev-promobit: primeira versão do projeto
• v-dev-rocketflix: segunda versão do projeto

Um projeto para consumir informações de uma api de filmes e exibir em um bonito design.

• Usando a API de filmes gratuita themoviedb em sua versão 3, você será responsável por criar uma listagem dos filmes mais populares do dia, consultando o endpointGET /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}.
• Siga o layout do figma sugerido. Não há necessidade de ser pixel perfect mas respeite a composição, fontes e cores.
• Para garantir que o usuário encontre o filme que está procurando, essa lista deverá ser paginada.

• O usuário deve ter acesso a uma listagem dos filmes mais populares do dia
• O usuário deve ter acesso a uma outra página com detalhes sobre o filme, ao clicar em um item na listagem
• O usuário deve conseguir paginar a lista para encontrar novos filmes
• A página com detalhes de um filme deve possuir uma rota própria e estar preparada para ser indexada em mecanismos de pesquisa

• O app deverá ser criado usando React
• Na raiz do projeto, será necessário incluir um arquivo README.md com as instruções para construir seu projeto localmente. Opcionalmente você pode detalhar as razões pelas escolhas de ferramentas e técnicas aplicadas ao desafio.
• O app deverá se comportar da mesma forma na última versão estável dos seguintes browsers: Chrome, Firefox, Edge
• O app deverá ser responsivo

• Temos insights que nos levam a acreditar que os usuários dessa lista costumam ter uma experiência melhor se conseguirem criar um filtro usando seus gêneros favoritos. Portanto, você também poderá criar filtros de filmes por gênero nessa listagem.
• Note que um novo endpoint deverá ser consultado para obter uma lista dos possíveis gêneros a serem filtrados, GET /genre/movie/list.
• O usuário deve conseguir filtrar os filmes listados por gênero, com a possibilidade de usar mais de um gênero
• O usuário deve conseguir remover filtros e a listagem deve ser atualizada de acordo com o filtro removido
• O usuário deve conseguir voltar para a página de listagem de filmes com os filtros ainda ativos

Projeto no github com documentação no readme e hospedagem.

• Boas práticas de desenvolvimento

  • html semântico
  • componentização: pages, components
  • design patterns
  • clean code

• Domínio das ferramentas que compõe um app de frontend moderno

  • VSCode
  • Git Bash
  • Github
  • Google Chrome modo Desenvolvedor

• Linguagens que compõe um app de frontend moderno

  • react para o frontend
  • API com fetch

• Documentação

  • explicação para construir o app localmente
  • histórico de tarefas
  • workflow de git: branches main, developer e nome_tarerfa. Abrir pull request da nome_tarefa para a developer, após aprovado pr na developer, mergear da developer na main.
  • GitHub Wiki
  • GitHub Issues
  • GitHub Project Boards
  • GitHub Readme: Titulo (Badges), Status, Tabela de Conteúdos, Descrição (Emojis), Objetivos (o que o app pode fazer), Layout da aplicação, Deploy da aplicação, Pré-requisitos, Tecnologias, Dependências Instaladas, Libs Instaladas, Como rodar a aplicação, Como rodar os testes, Database, Solução de problemas, Tarefas em aberto, Licença
  • GitHub Discussions
  • GitHub Pages ou hospedar em outro servidor

🚀 Executar esse app na sua máquina

• git clone url_repos + cd promobit + npm install + npm start

• iniciar o projeto reactjs: npx create-react-app
• organizar e limpar arquivos e códigos
• favicon
• componente navbar: mobile e desktop
• componente em films top: slogan, filter
• componente em films filter: botões de mesma dimensão
• componente em films filter: títulos de botões em um objeto
• componente em films: filme, lista de filmes
• componente em details informações técnicas: estáticos. buscar o endpoint
• componente em details elenco: estáticos. buscar o endpoint
• componente em details trailer: estático. buscar o endpoint
• componente em details recommendations: estático. buscar o endpoint
• componente em details back to
• componente em details logo
• componente em details informações listagem dos gêneros
• consumir api-themoviedb-v3 usando fetch then. Cada requisição retorna 20 elementos. themoviedb-v3-docs. themoviedb-v3-api_key. themoviedb-v3-api_key
• listar os filmes mais populares do dia com o endpoint GET /movie/popular
• abrir outra página com os detalhes do filme escolhido ao clicar em um item dessa listagem
• acessar mais detalhes sobre o filme com o endpoint GET /movie/{movie_id}
• essa lista deverá ser paginada: react-router-dom com npm install react-router-dom@6
• fazer o layout do figma pixel perfect, respeitando a composição, fontes e cores
• possuir uma rota própria para a página com detalhes de um filme
• fazer um componente de carregando avaliação
• atributo rate do filme para o loader
• tratar a data e exibir conforme design
• tratar a duração e exibir conforme design
• requisição async await no fetch e usar try catch
• responsividade: mobile, tablet, desktop
• a página com detalhes de um filme deve estar preparada para ser indexada em mecanismos de pesquisa
• criar um filtro de filmes usando seus gêneros favoritos nessa listagem
• novo endpoint GET /genre/movie/list deverá ser consultado para obter a lista dos possíveis gêneros filtrados
• filtrar os filmes listados por gênero, com a possibilidade de usar mais de um gênero
• remover filtros e a listagem deve ser atualizada de acordo com o filtro removido
• conseguir voltar para a página de listagem de filmes com os filtros ainda ativos

Para aperfeiçoar meu processo de desenvolver software e solucionar os desafios, acredito que anotar e analisar o período produtivo pode colaborar para percebermos avanços.

• 08/02 - 07:00/11:44
• 07/02 - 07:00/12:40 - 13:40/18:05
• 06/02 - 07:30/12:35 - 13:20/19:40
• 03/02 - 10:50/17:30

• Analisar o projeto e listar melhorias a serem feitas

• Desktop

• Mobile

• create-a-new-react-app
• flaticon
• de-pixels-px-para-rem
• letter-spacing
• grid-auto-flow
• grid-template-columns
• auto-sizing-columns-css
• sass
• classnames
• paginacao
• github matheusmhq
• github charleseduardome
• consumir API em reactjs
• Fetch Data from an API
• React MovieDB API
• how-to-use-react-router
• themoviedb developers
• themoviedb
• Circular Progress Bar
• Grid_Layout
• guide-grid
• horizontal_scroll
• custom_scrollbar
• Circular Progress Bar
• Array map
• typeerror-data-map
• conditional-rendering
• Math round
• typeof
• Paginação com Hooks
• API DO TMDB
• site de cinema

Obrigado e bom desafio!

Feito com ❤️ por Douglas A B Novato. 👋🏽 Entre em contato!

Fonte do projeto na promobit 👋