Venho apresentar um projeto que criei, um simples Widget de previsão do tempo, que nos da algumas das informações que irei mencionar abaixo:
- Descrição do Tempo atual
- Porcentagem de Humidade
- Qualidade do Ar
- Temperatura Mínima e Máxima do Dia
- Temperatura Atual
- Cidade e Estado
Para utilizar é simples, digite o nome da cidade/estado na caixa de pesquisa, espere alguns segundos que ele irá te trazer o resultado !
Utilizei algumas tecnologias e recursos que irei listar abaixo:
- Typescript
- CSS3
- HTML5
- NextJs
- framer-motion
- react-spinners
- Tailwind CSS
- Current Weather Data API
- Air Pollution API
- Geolocation API - Reverse
- Vercel
O principal objetivo pessoal deste meu projeto, foi colocar em pratica a minha lógica/estudos para chegar no resultado esperado de um simples widget de previsão do tempo e se familiarizar com as tecnologias que utilizei... Achei essa API através de um repositório que consiste em mostrar API's publicas para os desenvolvedores, clique aqui para visualizar este repositório que eu citei.
Porque utilizei Framework como o NextJs para um projeto simples?
O intuito é como mencionei acima, por mais que seja um projeto pequeno, quero ter o maximo de familiaridade de utilizar o React/NextJs, descobrir melhores formas de trabalhar com componentes, Hooks, configuração de projeto, variaveis de ambiente e etc.
Passou alguma dificuldade durante o projeto?
Sim! foram diversas dificuldades, uma delas com os Hooks, poís no momento tenho uma certa dificuldade em como obter um certo resultado utilizando useState e useEffects (ex: implementar o input sem botão), com certeza irei estudar e colocar em pratica sobre isso... Outras dificuldades foram como buscar as coordenadas do usuário e como aplica-la com a API Weather, se caso o usuário não fornecer uma cidade no input e eletrônico e caso o usuário queira ver as atualizações de temperaturas da sua localização em tempo real. Claro, tive que buscar bastante informações e ferramentas na web e como aplica-las, mas tentei também "quebrar a cabeça" para melhorar minha lógica de programação.
Considerações finais...
Fiquei bem feliz com este projeto, demorei 8 dias para chegar neste resultado de hoje e considero que dei mais um passo dado nesta área do desenvolvimento Web. Utilizei recursos que antes eu não conhecia como TailWindCSS, react-spinners, fui em busca de outras alternativas também mas que deixei de lado pois não se aplicava nesse projeto, li bastante documentação mais do que procurei por video-aulas, por exemplo, eu ja tenho uma base bacana com o Bootstrap, mas optei por utilizar o TailwindCSS, porque além dele vir padrão no NextJS, queria conhecer na pratica.
Se você chegou até aqui, fico muito agradecido por ver meu projeto! Estou aberto a sugestões sobre como posso estar melhorando ou o que eu poderia ter feito melhor aqui. Por enquanto é isso! Me siga no LinkedIn que irei segui-lo de volta! Thanks!
🚀🚀