Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luizfelipe9627/marvel-search-heroes
Teste para vaga de Desenvolver Web, sendo uma aplicação de listagem e detalhe de personagens de quadrinhos da Marvel.
https://github.com/luizfelipe9627/marvel-search-heroes
cryptojs css3 eslint framer-motion react-loading-skeleton react-router-dom reactjs
Last synced: about 18 hours ago
JSON representation
Teste para vaga de Desenvolver Web, sendo uma aplicação de listagem e detalhe de personagens de quadrinhos da Marvel.
- Host: GitHub
- URL: https://github.com/luizfelipe9627/marvel-search-heroes
- Owner: luizfelipe9627
- Created: 2024-08-16T19:49:03.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-08-16T21:07:04.000Z (about 1 month ago)
- Last Synced: 2024-09-13T20:17:27.254Z (11 days ago)
- Topics: cryptojs, css3, eslint, framer-motion, react-loading-skeleton, react-router-dom, reactjs
- Language: JavaScript
- Homepage: https://luizfelipe9627-marvel-search-heroes.netlify.app
- Size: 2.42 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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`
- [x] Deve ser uma SPA “single page application” (dar preferencia ao React);
- [x] Não utilizar bibliotecas de UI como: bootstrap, semantic-ui, antdesign e etc;
- [x] Utilizar API da Marvel (https://developer.marvel.com/docs);
- [x] Disponibilizar em uma URL pública do projeto rodando para avaliação;
- [x] Disponibilizar código em repositório Git de sua preferência, commitando cada fase do seu processo de desenvolvimento;
- [x] Seguir layout da pasta `./assets`, respeitando as páginas, features e componentes (não será avaliado “pixel perfect”).
#### `Funcionalidades`
- [x] Página de listagem de personagens (home):
- [x] Exibir os 20 primeiros resultados da API;
- [x] Permitir ordenação por nome do personagem;
- [x] Permitir filtrar por nome, pelo campo de busca;
- [x] Permitir mostrar apenas os personagens favoritos;
- [x] Permitir o usuário favoritar/desfavoritar até 5 personagens;
- Página de detalhe do personagem:
- [x] Exibir dados do personagem;
- [x] Exibir últimos 10 quadrinhos lançados deste personagem (onSaleDate);
- [x] Permitir o usuário favoritar/desfavoritar (dentro do limite de 5).
#### `Bônus (não obrigatório)`
- [x] Adicionar paginação a listagem para exibir além dos 20 personagens iniciais;
- [x] Persistir os dados de favoritos (para manter os dados após o reload da página);
- [x] Layout responsivo;
- [x] Utilização de ES6+;
- [x] Utilização de ferramentas para garantir a qualidade do código;
- [ ] Teste e2e;
- [ ] CI/CD.
## 🌐 Acesse o projeto hospedado
## 🚀 Como executar o projeto localmente
Caso deseje rodar o projeto localmente, siga os passos abaixo:
```bash
# 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](https://pt-br.reactjs.org/)
- [CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- [React Loading Skeleton](https://www.npmjs.com/package/react-loading-skeleton)
- [React Router Dom](https://reactrouter.com/web/guides/quick-start)
- [Framer Motion](https://www.framer.com/motion/)
- [ESLint](https://eslint.org/)
- [Crypto JS](https://www.npmjs.com/package/crypto-js)
## 🧑💻 Criador
## 📷 Me siga nas redes sociais
