Seja bem vindo ao repositório do desafio Mettzer!
O Core API é o portal que cobre quase todo o conteúdo de acesso aberto, fornece API de fácil integração e possui um poderoso mecanismo de consulta de pesquisa. O desafio é implementar uma aplicação utilizando frameworks JS, que oferece uma interface web com as seguintes funcionalidades:
- Deve ser possível buscar por artigos científicos na API do portal CORE https://core.ac.uk
- Exibir na listagem:
- authors
- type
- title
- description
- urls (devem ser clicáveis e abrir em uma nova aba)
- Deve ser possível marcar/desmarcar os resultados da pesquisa como favorito.
- Deve ter uma listagem com os artigos favoritados e ela deve estar disponível mesmo que a janela do navegador seja fechada e aberta novamente.
- As listagens, tanto da pesquisa quanto dos favoritos, devem ter paginação
Este projeto está concluído, porém sugestões de melhorias são sempre bem vindas!
- Desenvolvimento de telas com React, javascript e hooks
- Estilização e responsividade com Tailwindcss
- Implementação de testes utilizando jest e react-testing-library
O projeto está organizado e estruturado da seguinte maneira:
├── core-search
│ ├── package.json
│ ├── package-lock.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo_mettzer.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── components
│ │ │ ├── NavBar.jsx
│ │ │ ├── Pagination.jsx
│ │ │ └── SearchBar.jsx
│ │ ├── helpers
│ │ │ └── request.jsx
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── logo.svg
│ │ ├── __mocks__
│ │ │ └── axios.js
│ │ ├── pages
│ │ │ ├── Favorites.jsx
│ │ │ └── Home.jsx
│ │ ├── reportWebVitals.js
│ │ ├── routes
│ │ │ └── index.jsx
│ │ ├── setupTests.js
│ │ └── tests
│ │ ├── Favorites.test.js
│ │ ├── Home.test.js
│ │ ├── mettzerMock.js
│ │ └── RouterWrapper.jsx
│ └── tailwind.config.js
├── README.md
Para rodar o projeto, você vai precisar instalar as seguintes ferramentas:
- Git;
- Node.js;
- Um editor para trabalhar com o código como VSCode ou outro de sua preferência;
- Documentação da API
- Solicitar a chave de uso da API
-
Clone o projeto e instale as dependências
- Clone este repositório
git clone https://github.com/LeandroGoerck/desafio-mettzer.git
- Acesse a pasta do projeto no terminal/cmd
cd desafio-mettzer/core-search- Instale as dependências
npm install
- Configure as variáveis de ambiente No ubuntu Em posse da chave de uso, digite o seguinte comando no ubuntu:
export REACT_APP_API_KEY="sua_chave_de_uso"
Se você estiver usando WSL, digite o comando:
set REACT_APP_API_KEY="sua_chave_de_uso"
-
Rode os testes:
- Dentro da pasta core-search, digite o comando:
npm testDigite a letra 'a' para rodar todos os testes
-
Inicie a aplicação:
- Dentro da pasta core-search, digite o comando:
npm start
Abra em qualquer navegador http://localhost:3000/
A aplicação WEB possui duas telas. Os botões PESQUISA e FAVORITOS navegam por elas.
A primeira tela apresentada ao usuário é a tela de pesquisa, onde basta digitar o termo desejado e clicar no botão com o ícone de lupa. A imagem abaixo ilustra a tela inicial de pesquisa:
Os resultados retornados pela API CORE serão exibidos em forma de cards retangulares. O usuário dispõe de uma descrição do conteúdo e um link que o redireciona para o site do conteúdo original. A figura abaixo ilustra a exibição dos resultados da busca:
O usuário pode adicionar seus artigos preferidos aos favoritos clicando no ícone da estrela. Para acessar a lista de artigos favoritos, basta clicar no botão FAVORITOS. A figura abaixo ilustra a tela de visualização dos artigos favoritos:
