De primeiro queria agradecer pela oportunidade e o desafio que foi muito divertido, segundo vou explicar resumidamente minha linha de raciocínio. Logo quando recebi o desafio, precisei fazer um briefing das informações, sai pesquisando tudo relacionado sobre Covid e interfaces que mostram informações sobre o vírus. Com base nisso, fiz rabiscos e desenhos de possíveis telas e de onde ficariam localizados os dados propostos pela a API.
O Resultado pode ser encontrado no link : Figma - Tascom
Após isso, resolvi escolher o TailwindCss para a estilização, poderia ser qualquer outro ou até css na unha, todavia eu precisava acelerar o tempo para focar na reatividade a qual escolhi uma biblioteca linda utilizado por vocês, o React.js (Que por sorte é minha paixão também rsrs). Na aplicação, copiei os dados da API para um arquivo json, sendo assim conseguia fazer quantos "too many renders" eu quisesse e não ia estourar o limite haha. Logo em seguida comecei a desenvolver o front-end baseado nos espaçamentos, tipografias, cores ( Escolhi as cores análogas baseadas no site da Tascom e alterei ao meu gosto). Com o front pronto, comecei a posicionar os dados vindos da API no layout e formatando / adicionando efeitos. Quando finalizei tudo o que foi pedido, resolvi implementar um gráfico que havia pensado no inicio da prototipagem. Com tudo pronto, dei retoques finais e testei em dispositivos móveis a aplicação que foi desenvolvida pensando no mobile-first.
Com tudo aparentando funcionar corretamente gerei a build e realizei o deploy no Netlify.
Caso você não deseje instalar e almeja apenas visualizar a aplicação em produção :
🔗 https://covidsummary.netlify.app/
Caso queira, siga os passos abaixo para a execução correta do projeto XD .
Se desejar selecionar uma seção.
- Clone o repositório no seu computador :
https://github.com/JRBARROZ/tascom-exam - Vá para a pasta
./tascom/
Você precisa ter instalado em sua máquina :
Após instalar npm ou yarn , verifique a forma de iniciar de cada gerenciador, utilizarei aqui o Yarn :
Na pasta correta, digite no terminal yarn install && yarn run start
Espere até o servidor inicializar e abrir uma aba no seu browser.
caso não abra, vá no seu navegador e digite : localhost:3000.
- Tailwindcss
- React.js (Hooks)
- Figma
😄 Hey, it's me and i love programming <3. Have a mad love, peace out and stay hard on your goals 👽