Uma aplicação interativa de busca de clima em tempo real que utiliza a API do OpenWeatherMap. O projeto foi refatorado para incluir um Backend Proxy em Node.js, garantindo que a chave da API não seja exposta no navegador do utilizador.
O Weather Search permite obter informações meteorológicas instantâneas, como temperatura, condições climáticas, humidade e velocidade do vento. A arquitetura atual utiliza:
-
Frontend: Interface moderna e responsiva.
-
Backend: Servidor Node.js que atua como intermediário (Proxy) para segurança de credenciais.
-
Estado Global: Gestão centralizada dos dados para uma interface mais previsível.
O projeto foi construído com foco em Clean Code e Experiência do Usuário (UX), utilizando alertas personalizados e manipulação dinâmica do DOM.
- Validação de Input: O sistema impede buscas vazias com alertas visuais.
- Tratamento de Erros: Caso a cidade não exista (Erro 404) ou ocorra um problema no servidor, o usuário é notificado via SweetAlert.
- Suporte ao Teclado: É possível realizar a busca pressionando a tecla
Enter. - Interface Dinâmica: O cartão de informações só aparece após a primeira busca bem-sucedida.
O projeto foi desenvolvido utilizando as seguintes tecnologias:
- Frontend: HTML5, CSS3, JavaScript (ES6+).
- Backend: Node.js, Express, Axios, Cors, Dotenv.
- APIs: OpenWeatherMap API e Country Flag Icons
- Feedback visual: SweetAlert2 e Font Awesome
- Preparar o Backend:
Navegue até a pasta do servidor e instale as dependências:
cd weather-backend
npm install- Configurar as Variáveis de Ambiente
Crie um arquivo .env na raiz da pasta weather-backend (baseado no .env.example):
PORT=3000
WEATHER_API_KEY=SUA_CHAVE_AQUI
- Crie sua chave de API:
- Crie uma conta no OpenWeatherMap.
- Dentro do arquivo
.envadicione a chave.
Nota: Nunca envie o arquivo .env para o GitHub. Ele já está listado no .gitignore.
- Iniciar o servidor:
npm run dev
O servidor ficará disponível em http://localhost:3000