Olá, tudo bom?
Para a próxima fase da seleção, precisamos que você implemente a interface disponibilizada no link abaixo:
https://xd.adobe.com/view/cb0e2b97-02fc-42fe-73b9-559cf064de39-bd3f/
O link contém as telas e os arquivos de imagem necessários pra criação. Para acessar os arquivos de cada tela, basta clicar no símbolo “</>” na barra lateral direita e você verá a opção “Ativos”.
O que esperamos que seja feito:
- As três telas do link, mobile first. Não há a necessidade de pensar em como ficaria na web, mas se fizer, será um plus
- Seguir o mais fidedignamente possível o layout proposto.
- Na tela do gráfico e dados do Covid, o ideal é fazer uma requisição para alguma API de dados do Covid da sua escolha e preencher os resultados com base no resultado da requisição. - Não precisa fazer a troca de países, pode deixar mundial. Se fizer a troca de países será um plus.
- A navegabilidade da aplicação deve funcionar (pode ser client-side ou mudança de arquivos)
O que será analisado (por ordem de prioridade):
- Fidelidade ao layout proposto
- Boa estrutura e código de CSS/LESS/SASS
- Utilização correta de HTML semântico
- Reuso de código - Componentização
- Organização do código
- Velocidade de carregamento
Você terá um plus se:
- Usar React
- Usar Next.js
- Usar Styled-components
- Hospedar a aplicação em algum local (heroku, aws, etc)
- Fizer de maneira legal a versão web-desktop
- Fizer a troca de países - (atualizando os dados)
O prazo para entrega do teste é de 1 semana
Ao final, deve enviar o link do projeto no github com as instruções necessárias pra testar o projeto. Se tiver feito o upload funcional do projeto em algum local (heroku, aws, etc), enviar também o link.
ABORDAGEM: USAR O LESS PARA ESTILOS GLOBAIS USAR O STYLED COMPONENTS PARA CUSTOMIZAR O Material UI USAR A API https://api.covid19api.com/
PIE CHART: https://www.npmjs.com/package/react-minimal-pie-chart
LESS DOCS: http://lesscss.org/features/
Popup: https://www.npmjs.com/package/react-modal#examples
Link para projeto ao vivo: https://app.netlify.com/sites/cranky-carson-d16ac5