italosergio/star-wars-search-planets

Aplicação Front-end com foco em filtros de busca

Project Starwars - Planets Search 🌌

Peek.07-01-2022.00-42.mp4

Como acessar

1. Clone o repositório

• git clone https://github.com/italosergio/star-wars-search-planet
• Entre na pasta do repositório que você acabou de clonar:
  • cd star-wars-search-planet

2. Instale as dependências e inicialize o projeto

• Instale as dependências:
  • npm install
• Inicialize o projeto:
  • yarn start ou npm start

3. Use os filtros de busca pra escolher seu planeta perfeito para explorar!

Habilidades

Nesse projeto, você será capaz de:

• Utilizar a Context API do React para gerenciar estado.
• Utilizar o React Hook useState;
• Utilizar o React Hook useContext;
• Utilizar o React Hook useEffect;
• Criar React Hooks customizados.

Status do Projeto

Desafio 1 [✅] (commit) Faça uma requisição para o endpoint /planets da API de Star Wars e preencha uma tabela com os dados retornados, com exceção dos da coluna residents

• - Realize uma requisição para a API
• - Preencha a tabela com os dados retornados
• - Verifique se a tabela tem 13 colunas
• - Verifique se a tabela tem uma linha para cada planeta retornado

Desafio 2 [✅] (commit) Filtre a tabela através de um texto, inserido num campo de texto, exibindo somente os planetas cujos nomes incluam o texto digitado

• Renderiza o campo de texto para o filtro de nomes
• Filtra os planetas que possuem a letra "o" no nome
• Filtra planetas que possuem a letra "oo" no nome
• Realiza vários filtros em sequência

Desafio 3 [✅] (commit) (commit) Crie um filtro para valores numéricos

• Renderiza o filtro de coluna
• Renderiza o filtro de comparação
• Renderiza o campo para o valor do filtro
• Renderiza o botão para executar a filtragem
• Verifica valores iniciais de cada campo
• Filtra utilizando apenas o botão de filtrar
• Filtra utilizando a comparação "menor que"
• Filtra utilizando a comparação "maior que"
• Filtra utilizando a comparação "igual a"

Desafio 4 [✅] (commit) (commit) Não utilize filtros repetidos

• Filtra por população e o remove das opções
• Resolver filtro repetido para todos os casos

Desafio 5 [✅] (commit) Apague o filtro de valores numéricos e desfaça as filtragens dos dados da tabela ao clicar no ícone de X de um dos filtros

• Adiciona um filtro e verifica se a tabela foi atualizada com as informações filtradas, depois remove o filtro e verifica se os valores da tabela voltaram ao original.
• Adiciona dois filtros e verifica se a tabela foi atualizada com as informações filtradas, depois remove os filtros e verifica se os valores da tabela voltaram ao original.

Desenvolvimento

• Implement 🦾

  { conceive: 'semantic ui framework' } { conceive: 'Loading' } { conceive: 'Next/Prev page buttons' } { conceive: 'csshake framework' }

• Styles ✨

  { update: 'general styles' } { change: 'styles' } { update: 'styles' } { create: 'filter flag', update: 'search button style' } { animation: 'header icon' } { animation: 'shake titles and labels' } { change: 'browser tab icon' }

• Refactor 🧬

  { update: 'home title' } { update: 'context structure' } { update: 'context structure' } { update: 'Table, SearchPlanet' } { update: 'Table', create: 'NextPrev' } { update: 'Requirement 4' } { upgrade: 'GENERAL REFACTOR'} { exchanges: 'functions by components' }

• Clean up code 🧹

  { changes: 'SearchPlanet.jsx e Table.jsx' } { changes: 'Index.html' } { changes: 'GENERAL CLEAN UP CODE'} { changes: 'components return' }

• Code Review 🔎

  • @caiojlima
  • @fernandosenacruz
  • @leonardodfelix

    { codeReview: 'useEffect & clearInterval' } { codeReview: 'kill getElementById' } { codeReview: 'componentization' } { codeReview: 'requisition function refactored' }

"FINALIZAR O PROJETO, VOCÊ DEVE.." 🖖🏼👽