Fazendo a requisição de algumas APIs para mostrar os últimos dados e notícias sobre o vírus ao redor do mundo
Visitar demostraçãoMantenha-se informado a respeito de todos os casos do Covid19 pelo mundo criando uma “Progressive Web Application”. Um dos desafios propostos pelo Bootcamp de Front-End da DigitalInnovationOne. No projeto o instrutor desafia realizar o consumo de uma API e criar uma “dashboard” para exibir os últimos relatórios sobre número de afetados pelo Covid-19 em alguns países. Para este projeto implementei a funcionalidade consumindo a mesma API. Adicionei a funcionalidade de pesquisar todos os países suportados, exibindo uma lista com os códigos dos países. O usuário pode então inserir o código no campo de entrada e os dados serão carregados. Além de mostrar os dados do a nível mundial. Também inclui a API Gnews para exibir as últimas notícias que foram publicadas no país que o usuário selecionou. Para exibir a bandeira do país utilizei a CountryFlags. Adicionei algumas seções para simular a exibição de mensagens informativas de prevenção, identificação de sintomas e alertas ao usuário.
As animações são arquivos da biblioteca Lottie, ilustrados por Vijay Verma, Gabriela Schmitz e Dmytro Rohoznyi.
Também utilizei Tailwind.css para estilização, React.js para componentização e Firebase para hospedagem.
A logo foi uma criação minha, faz referência ao jogo FruitNinja, em que os jogadores devem destruir frutas as cortando. Quis remeter a ideia de destruição do vírus se conectando com a primeira ilustração da página, em que o personagem segura uma espada e escudo.
O código completo encontrasse no meu perfil do GitHub ou pode ser diretamente acessado por aqui.
Se quiser fazer um comentário ou saber mais detalhes, ficarei feliz de lhe responder no e-mail ou no meu twitter.