Esse é um microsite de previsão do tempo construído com React, que automaticamente pega a localização do usuário e exibe a condição atual do tempo e a previsão para os próximos dois dias na localidade através da API da OpenWeather. Além disso, é possível verificar a previsão de outros lugares do mundo usando a
barra de pesquisa.
- 🧭 Geolocalização automática
- 🌎 Pesquisa global de localidades
- 🌡️ Temperaturas em Celsius ou Fahrenheit
- 🎨 Tema dinâmico que muda de acordo com a temperatura do local
- 🖼️ Fundo dinâmico que muda todos os dias
Para ser avisado sobre problemas de tipagem no compile time, foi escolhido o Typescript como linguagem, transpilado com Babel.
O layout foi modificado para criar uma hierarquia visual entre as informações mais relevantes e para criar um fluxo de leitura mais confortável na aplicação. No ambiente mobile, foi omitido a imagem de fundo do Bing para evitar clutter ou possíveis perdas de leitura se as informações fossem colocadas contra um fundo transparente para que a imagem de fundo ainda aparecesse.
Para evitar prop drilling e ter acesso global aos estados da aplicação, foi preciso escolher um gerenciador de estados, nesse processo o Zustand foi escolhido pela sua simplicidade de sintaxe e facilidade de uso.
Em conjunto com o Zustand, foi usado o Immer, que permite uma manipulação mais fácil de estados aninhados sem quebrar o príncipio da imutabilidade do estado e o uso repetitivo do operador spread (...).
O Tailwind foi o método escolhido para estilização da aplicação devido a velocidade de iteração e por facilitar a estilização dependendo do estado da aplicação, já que usa diretamente classNames.
Biblioteca de componentes criada pelo Tailwind Labs, facilita o uso de componentes dinâmicos e acessíveis
- Se tratando das chaves de API armazenadas como variáveis de ambiente, o arquivo .env faz parte do repositório apenas por questão de praticidade de uso da aplicação clonada. Se esse fosse um aplicativo em produção, as chaves precisariam ser manualmente preenchidas para executar a aplicação
Para clonar o projeto, execute o comando:
git clone https://github.com/jpsaiago/challenge-charlie.gitDepois mude seu terminal para o diretório que foi criado do projeto e execute:
yarn -OU- npm installPara instalar as dependências do projeto.
Para iniciar o ambiente de desenvolvimento através do Node, basta usar o comando:
npm start -OU- yarn run startA aplicação será levantada na porta 4000 com hot reload e source maps ativados.
Para executar a aplicação em produção, não é preciso instalar as dependências, mas é preciso ter o Docker instalado. O comando para verificar se ele existe na máquina é:
docker -vFeito isso, basta executar:
npm compose:prod-up -OU- yarn run compose:prod-upA aplicação será levantada na porta 4000 minificada no modo de produção.
Existem também códigos para buildar o container sem iniciar o servidor
npm compose:prod -OU- yarn run compose:prodPara criar o pacote do webpack
npm build -OU- yarn run buildE para levantar o container no modo de desenvolvimento
npm compose:dev -OU- yarn run compose:dev
Para rodar os testes da aplicação, use o comando
npm test -OU- yarn run test- Testes unitários usando MSW para emular um servidor e verificar o comportamento dos métodos de aquisição de dados.
- Testes de integração e end-to-end.
- Criar mensagens de erro mais detalhadas, tratando os erros retornados e apresentando-os ao usuário.
- Customizar as tags ARIA para a utilização do site com leitores de tela.
- Implementar transições na UI usando Headless UI.