🌤️ App Meteorológico

Aplicativo web de previsão do tempo desenvolvido em React com integração a APIs de meteorologia. O projeto oferece informações climáticas em tempo real de qualquer cidade do mundo através de uma interface moderna e responsiva.

✨ Demonstração

🔗 Deploy no CodeSandbox: Ver Aplicação

📋 Funcionalidades

• 🔍 Busca por cidade - Pesquise o clima de qualquer cidade do mundo
• 🌡️ Temperatura atual - Informações em tempo real
• 🌧️ Condições climáticas - Descrição detalhada do clima
• 💨 Informações extras - Umidade, velocidade do vento, pressão
• 📱 Design responsivo - Funciona perfeitamente em mobile e desktop
• 🎨 Interface moderna - Design limpo e intuitivo
• ⚡ Carregamento rápido - Otimizado para performance

🛠️ Tecnologias Utilizadas

• Frontend: React 18+
• Linguagem: JavaScript (ES6+)
• API: OpenWeatherMap API / WeatherAPI
• HTTP Client: Fetch API / Axios
• Styling: CSS3 / Styled Components
• Desenvolvimento: CodeSandbox
• Deploy: CodeSandbox / Netlify / Vercel

📁 Estrutura do Projeto

src/
├── Components/
│   ├── WeatherSearch.js      # Componente de busca
│   ├── WeatherCard.js        # Card com informações do clima
│   ├── WeatherDetails.js     # Detalhes adicionais
│   └── LoadingSpinner.js     # Indicador de carregamento
├── styles/
│   ├── App.css              # Estilos globais
│   ├── WeatherCard.css      # Estilos do card
│   └── Responsive.css       # Media queries
├── utils/
│   ├── api.js               # Configurações da API
│   └── helpers.js           # Funções utilitárias
├── App.js                   # Componente principal
└── index.js                 # Ponto de entrada

🚀 Como Executar

Online (Recomendado)

1. Acesse o CodeSandbox
2. Abra o projeto: https://codesandbox.io/p/sandbox/app-meteorologico
3. O app será executado automaticamente!

Localmente

# Clone o repositório
git clone https://github.com/RGPaix/AppMeteorologico.git
cd AppMeteorologico

# Instale as dependências
npm install

# Configure a API Key (ver seção de configuração)
cp .env.example .env

# Execute o projeto
npm start

⚙️ Configuração da API

1. Obter API Key

• Acesse OpenWeatherMap
• Crie uma conta gratuita
• Gere sua API Key

2. Configurar no projeto

Crie um arquivo .env na raiz do projeto:

REACT_APP_WEATHER_API_KEY=sua_api_key_aqui
REACT_APP_API_BASE_URL=https://api.openweathermap.org/data/2.5

3. Exemplo de uso no código

// utils/api.js
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
const BASE_URL = process.env.REACT_APP_API_BASE_URL;

export const getWeatherByCity = async (cityName) => {
  const response = await fetch(
    `${BASE_URL}/weather?q=${cityName}&appid=${API_KEY}&units=metric&lang=pt_br`
  );
  return response.json();
};

🎨 Componentes Principais

WeatherSearch.js

Componente responsável pela busca de cidades:

import React, { useState } from 'react';

const WeatherSearch = ({ onSearch }) => {
  const [city, setCity] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (city.trim()) {
      onSearch(city);
      setCity('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="search-form">
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="Digite o nome da cidade..."
        className="search-input"
      />
      <button type="submit" className="search-button">
        🔍 Buscar
      </button>
    </form>
  );
};

export default WeatherSearch;

🌍 Funcionalidades Implementadas

📊 Dados Exibidos

• Temperatura atual (°C)
• Sensação térmica
• Temperatura mínima/máxima
• Umidade do ar (%)
• Pressão atmosférica (hPa)
• Velocidade do vento (m/s)
• Visibilidade (km)
• Condição climática (ensolarado, nublado, etc.)

🎯 Recursos Especiais

• Busca inteligente com sugestões
• Tratamento de erros para cidades não encontradas
• Ícones animados para diferentes condições climáticas
• Histórico das últimas buscas
• Favoritos para cidades frequentes

📱 Responsividade

O app funciona perfeitamente em:

• 📱 Mobile (320px+)
• 📱 Tablet (768px+)
• 💻 Desktop (1024px+)
• 🖥️ Telas grandes (1440px+)

🚀 Deploy

CodeSandbox (Atual)

O projeto está hospedado no CodeSandbox e é atualizado automaticamente.

Outras opções de deploy:

# Build para produção
npm run build

# Deploy no Netlify
npm install -g netlify-cli
netlify deploy --prod --dir=build

# Deploy no Vercel  
npm install -g vercel
vercel --prod

🧪 Testes

# Executar testes
npm test

# Executar com cobertura
npm test -- --coverage

# Testes end-to-end
npm run cypress:open

🎨 Customização

Alterando o tema:

/* styles/App.css */
:root {
  --primary-color: #4a90e2;
  --secondary-color: #f39c12;
  --background-color: #f8f9fa;
  --text-color: #2c3e50;
  --border-radius: 12px;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Adicionando novos ícones climáticos:

const weatherIcons = {
  'clear': '☀️',
  'clouds': '☁️', 
  'rain': '🌧️',
  'snow': '❄️',
  'thunderstorm': '⛈️'
};

🔮 Futuras Melhorias

• Previsão de 7 dias
• Gráficos de temperatura
• Mapas interativos
• Notificações push
• Modo escuro/claro
• Múltiplos idiomas
• Geolocalização automática
• Comparação entre cidades

🐛 Problemas Conhecidos

• API gratuita tem limite de requisições (60/min)
• Algumas cidades podem ter nomes ambíguos
• Cache de dados dura apenas 10 minutos

📚 Recursos de Aprendizado

• Documentação React
• OpenWeatherMap API Docs
• CSS Grid & Flexbox
• JavaScript Fetch API

👨‍💻 Autor

Desenvolvido por: @RGPaix
Plataforma: CodeSandbox
Tipo: Aplicação Web React

🤝 Contribuições

Contribuições são sempre bem-vindas! Para contribuir:

1. Fork o projeto
2. Crie uma branch (git checkout -b feature/nova-funcionalidade)
3. Commit suas mudanças (git commit -m 'Adiciona nova funcionalidade')
4. Push para a branch (git push origin feature/nova-funcionalidade)
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para detalhes.

📞 Contato

• GitHub: @RGPaix
• CodeSandbox: Ver Projeto
• Issues: Reportar bugs

---

🌤️ Desenvolvido com ❤️ para fornecer informações meteorológicas precisas e atualizadas!