Marvel - Search Heroes

📄 Descrição

Teste técnico para a vaga de desenvolvedor web, como teste foi proposto o seguinte desafio:

Desenvolver uma aplicação de listagem e detalhe de personagens de quadrinhos.

👀 Observações

A API da Marvel possui lentidão em suas requisições, por isso, a aplicação pode demorar um pouco para carregar os dados. A API está com falta de informações em alguns personagens.

📑 Requisitos

Obrigatórios

• Deve ser uma SPA “single page application” (dar preferencia ao React);
• Não utilizar bibliotecas de UI como: bootstrap, semantic-ui, antdesign e etc;
• Utilizar API da Marvel (https://developer.marvel.com/docs);
• Disponibilizar em uma URL pública do projeto rodando para avaliação;
• Disponibilizar código em repositório Git de sua preferência, commitando cada fase do seu processo de desenvolvimento;
• Seguir layout da pasta ./assets, respeitando as páginas, features e componentes (não será avaliado “pixel perfect”).

Funcionalidades

• Página de listagem de personagens (home):
  • Exibir os 20 primeiros resultados da API;
  • Permitir ordenação por nome do personagem;
  • Permitir filtrar por nome, pelo campo de busca;
  • Permitir mostrar apenas os personagens favoritos;
  • Permitir o usuário favoritar/desfavoritar até 5 personagens;
• Página de detalhe do personagem:
  • Exibir dados do personagem;
  • Exibir últimos 10 quadrinhos lançados deste personagem (onSaleDate);
  • Permitir o usuário favoritar/desfavoritar (dentro do limite de 5).

Bônus (não obrigatório)

• Adicionar paginação a listagem para exibir além dos 20 personagens iniciais;
• Persistir os dados de favoritos (para manter os dados após o reload da página);
• Layout responsivo;
• Utilização de ES6+;
• Utilização de ferramentas para garantir a qualidade do código;
• Teste e2e;
• CI/CD.

🌐 Acesse o projeto hospedado

Ver o projeto

🚀 Como executar o projeto localmente

Caso deseje rodar o projeto localmente, siga os passos abaixo:

 # Clone este repositório
 $ git clone https://github.com/luizfelipe9627/marvel-search-heroes

 # Acesse a pasta do projeto no terminal/cmd
 $ cd marvel-search-heroes

 # Instale as dependências
 $ npm install

 # Execute a aplicação em modo de desenvolvimento
 $ npm run dev

 # O servidor iniciará na porta:5173
 $ http://localhost:5173

🛠️ Tecnologias

• React
• CSS
• React Loading Skeleton
• React Router Dom
• Framer Motion
• ESLint
• Crypto JS

🧑‍💻 Criador

Luiz Felipe Silva

📷 Me siga nas redes sociais