Cursos

App de Clima em Tempo Real com React + OpenWeather API

• Nível: Projetos
• Módulos: 6
• Aulas: 21
• Tempo de leitura: 1h 1min
• Tecnologias: React
• Preço: R$ 67,00

Código do curso: github.com/johnpires/app-clima-react-openweather

Conteúdo do curso

Módulo 1: Módulo 1 — Introdução e Setup

Visão geral do projeto, configuração do ambiente e estrutura inicial da aplicação React.

1. O que vamos construir: visão geral do app de clima (3 min)
2. Configurando o ambiente de desenvolvimento (2 min)
3. Estrutura do projeto e primeiros componentes (2 min)

Módulo 2: Módulo 2 — Integração com OpenWeather API

Criação da conta, obtenção da chave de API, primeiras chamadas e tratamento de respostas.

1. Criando conta e obtendo a API Key da OpenWeather (2 min)
2. Criando o serviço weatherApi com Axios (3 min)
3. Hook personalizado useWeather (3 min)
4. Tratamento de erros e estados de loading (3 min)

Módulo 3: Módulo 3 — Exibindo o Clima Atual

Componentes para exibição de temperatura, condição climática, ícones dinâmicos e dados adicionais.

1. Componente WeatherCard: temperatura e condição climática (2 min)
2. Ícones dinâmicos e formatação de dados (2 min)
3. Dados extras: umidade, vento e sensação térmica (8 min)
4. Formatação de temperatura e conversão de unidades (3 min)

Módulo 4: Módulo 4 — Previsão dos Próximos 5 Dias

Consumo do endpoint de forecast, agrupamento dos dados e exibição da previsão semanal.

1. Endpoint de forecast e estrutura de dados (3 min)
2. Componentes ForecastCard e ForecastList (2 min)
3. Barra de temperatura mínima e máxima com CSS (3 min)

Módulo 5: Módulo 5 — UI/UX e Recursos Avançados

Design responsivo, geolocalização, histórico de cidades, animações e temas claro/escuro.

1. Design responsivo com CSS Modules (2 min)
2. Geolocalização: clima da localização atual do usuário (3 min)
3. Histórico de cidades com localStorage (3 min)
4. Tema claro/escuro com Context API (2 min)

Módulo 6: Módulo 6 — Deploy e Conclusão

Deploy na Vercel, variáveis de ambiente em produção, otimizações finais e próximos passos.

1. Deploy na Vercel com variáveis de ambiente (3 min)
2. Otimizações de performance: React.memo e lazy loading (3 min)
3. Próximos passos e melhorias possíveis (4 min)