O Projeto mostra a previsão do tempo baseado na localização do usuário ou da localização que for inserida, envolve consumo da API de geolocalização do navegador para as coordenadas atuais, OpenCageAPI para conseguir dados da localização com base nas coordenadas ou conseguir as coordenadas com base na localização inserida e OpenWeatherAPI para as informações sobre o clima.

• Tempo aproximado para finalizar: 37h

Mais Informações...

☁️ Clonar projeto

$ git clone [email protected]:efraim-andrade/hurb-challenge.git && cd hurb-challenge

🚀 Iniciar o projeto com docker no modo desenvolvimento

$ docker-compose up -d development

🚀 Iniciar o projeto com docker no modo produção

$ docker-compose up -d production

☁️ Clonar projeto

$ git clone [email protected]:efraim-andrade/hurb-challenge.git

📦 Instalar dependências

$ npm i

🚀 Iniciar o projeto

$ npm run dev

Rodar testes automatizados

$ npm run test

• NextJS
• Typescript
• Styled-components
• Jest
• Docker

• Eslint
• Prettier
• Idiomatic CSS

• API Routes

  • Escolhi utilizar o API Routes do NextJS para consumir as API's de terceiro por dois motivos, na API do bing para evitar o erro de CORS que impede de consumir direto no client e para não deixar as chaves de utilização do OpenCageAPI e do OpenWeatherAPI expostas no front-end.

• ENV

  • Coloquei as chaves das API's no .env para utilizar no back, porém para fins de utilização do pessoal que for analisar o teste subi no repositório para a aplicação funcionar quando forem clonar, porém em uma situação real o .env não seria enviado para o repositório

• Contraste das cores

  • O amarelo apresentado no print do design não estava contrastando bem com as letras brancas das informações, optei por deixar mais escuro para deixar mais visível.

• Limitação da API free do OpenCage

  • Após dar uma olhada na API do OpenCageAPI verifiquei que a versão gratuita não fornece suporte a Fuzzy Search (Buscar text por aproximação) oque torna inviável utilizar a estratégia de Debounce para apresentar sugestões de resultados enquanto for digitando no input de busca, a API só funciona colocando o nome da localidade inteiro.

• Melhorando a usabilidade da busca

  • Visando uma melhor usabilidade na hora de buscar a cidade optei por adicionar um botão de busca e limpeza do input tendo em vista que não temos um autocomplete na parte grátis da API de localidade. Também adicionei alguns loaders para mostrar um feedback enquanto a aplicação busca a localização e as informações da previsão do tempo.

• Troca de tipo de temperatura entre Celsius e Fahrenheit

  • No layout passado não estava muito claro que a parte da temperatura era uma área clicável então pegando como referência o layout do google resolvi adicionar a letra da temperatura que não estava sendo usada meio opaca pra demonstrar que não estava ativa e coloquei um ícone representando que é algo trocável.

• Salvando estado do tipo e temperatura no local storage

  • Resolvi adicionar a funcionalidade de salvar a informação do tipo da temperatura no Local Storage para ao recarregar a página a escolha do usuário seja mantido.