DevQuestPROEstudos de Código
Voltar para o Catálogo de Projetos
IntermediáriofrontendEstimativa: ~10 horas de dedicação

Weather Radar & Previsão Global

Painel climático interativo que consome dados da OpenWeatherMap API, detecta localização do usuário e exibe previsão horária e para 7 dias.

Stack:Next.jsAPIs RESTLucide IconsRechartsTailwind
Funcionalidades Requeridas

O que o seu projeto final precisa conter para ser considerado concluído:

  • Busca de cidades com autocomplete inteligente
  • Detecção automática da cidade via Geolocation API
  • Gráficos de variação de temperatura e umidade ao longo do dia
  • Ícones climáticos animados baseados nas condições atuais
Conhecimentos Pré-requisitos

Recomendamos dominar os seguintes tópicos antes de iniciar a codificação:

  • Async/Await & Fetch API
  • Gerenciamento de loading e erro
  • Componentes controlados
Documentação & Links de Apoio

Consulte materiais oficiais e tutoriais relacionados para acelerar o desenvolvimento do projeto:

Docs / MDN
MDN: Fetch API e Async/Await

Como consumir APIs REST assíncronas com tratamento de erros HTTP.

Docs / MDN
OpenWeatherMap Official API Docs

Especificação dos endpoints de previsão do tempo e geocoding.

DevQuest Labs
DevQuest Debug Clinic: Erros com useEffect & Fetch

Como prevenir loops infinitos e vazamentos de memória em requisições.

W3Schools
W3Schools: JavaScript Async/Await

Sintaxe moderna para lidar com Promises em JavaScript.

Submeta o seu Repositório

Concluiu o projeto Weather Radar & Previsão Global? Envie o link do GitHub para registrar no seu portfólio.

Roteiro de Implementação Passo a Passo

Siga as etapas recomendadas, abra as dicas práticas e marque conforme for progredindo.

Progresso do Projeto(0/3 etapas concluídas)
0%
Etapa 1

Setup da API de Clima & Integração com Fetch

Configure a chave da OpenWeatherMap API ou WeatherAPI no .env e crie o wrapper de requisições tipado.

Etapa 2

Detecção por Geolocation API & Skeletons de Loading

Capture as coordenadas do usuário automaticamente com permissão do navegador e mostre skeletons visuais.

Etapa 3

Visualização com Gráficos Recharts

Plote as previsões horárias e variações de temperatura ao longo de 24h em um gráfico responsivo.

Estrutura de Pastas Recomendada

Uma organização limpa para o seu repositório de projeto:

src/
├── app/
│   ├── api/weather/route.ts  # BFF (Backend for Frontend) que oculta a API Key
│   └── page.tsx              # Dashboard principal
├── components/
│   ├── WeatherCard.tsx       # Card hero com temperatura atual e ícone animado
│   ├── ForecastChart.tsx     # Gráfico horário de temperatura com Recharts
│   └── CitySearchBar.tsx     # Busca com debounce e histórico recente
└── types/
    └── weather.ts            # Interfaces TypeScript da API climática
Dicas de Ouro para o seu Portfólio

Como valorizar este projeto no seu GitHub e entrevistas técnicas:

  • •Ter uma rota de API no Next.js protegendo a API Key externa mostra maturidade em segurança da informação.
  • •Mostre no portfólio como você tratou o 'Cumulative Layout Shift' (CLS) usando Skeletons idênticos ao layout final.