Weather Dashboard
Painel meteorológico completo e intuitivo para consulta em tempo real e mapas interativos.
Sobre o Projeto
O Weather Dashboard é uma aplicação web rica desenvolvida para entregar dados meteorológicos em tempo real, acompanhados de recomendações e visualizações em mapas interativos. A interface foi planejada para simular a fluidez de um aplicativo nativo usando apenas tecnologias web abertas e front-end puro, eliminando completamente a necessidade de qualquer infraestrutura de backend.
Antes da criação do painel, a centralização de informações climáticas diversas exigia a consulta a diferentes portais isolados. O aplicativo unifica esses dados, transformando temperaturas brutas em contexto visual útil, como a mudança automática de componentes gráficos e a sugestão de ações práticas dependendo do clima selecionado.
Arquitetura e Decisões Técnicas
O projeto foi construído utilizando uma arquitetura cliente pura (Single Page Application estática) organizada em diretórios separados para arquivos públicos de interface e códigos de comportamento técnico:
- Public: Contém os arquivos estruturais da interface (
index.html,settings.html) e o arquivo de dados estáticos (recomendations.json). - Src: Reúne a lógica de script pura da aplicação e os estilos adicionais que complementam as utilidades estruturais do Tailwind.
A lógica principal de comportamento foi concentrada em JavaScript Vanilla nativo. A manipulação do DOM e a reatividade da interface ocorrem de forma direta ao escutar eventos padrão do navegador. Quando o sistema de unidades é alterado nas configurações, um evento de escuta de armazenamento (storage) atualiza automaticamente os cálculos matemáticos de exibição sem exigir o recarregamento forçado da página inteira.
Lógica modular Vanilla JS usada de forma pura para gerenciar requisições assíncronas (fetch) e manipular os elementos da tela.
Framework utilitário que facilitou a criação de uma interface moderna e responsiva sem a necessidade de escrever muitos arquivos CSS manuais.
Desafios e Soluções de Engenharia
Ao longo da implementação do painel frontend, houve a necessidade de contornar problemas relacionados ao fluxo de rede e ao armazenamento local de dados para garantir o bom funcionamento da aplicação.
Desafios Resolvidos
Orquestração de múltiplos provedores de dados no cliente
Buscar dados meteorológicos atuais, previsões estendidas e geocodificação ao mesmo tempo pode causar atrasos ou conflitos na renderização da tela.
Foi implementado um fluxo assíncrono encadeado com promessas (Promises), carregando primeiro a WeatherAPI e puxando os dados secundários de geolocalização e mapas em segundo plano.
Armazenamento de preferências e cidades favoritas
Manter as escolhas de tema (claro/escuro), unidades de medida e a lista de locais favoritados pelo usuário sem possuir um banco de dados backend.
Utilizou-se a API nativa do localStorage do navegador para salvar strings JSON, carregando e atualizando a interface automaticamente a cada inicialização.
Impacto e Resultados
- Dependência Zero de Infraestrutura: Por rodar 100% no navegador, o projeto possui custo zero de manutenção de servidores e está pronto para deploys imediatos em plataformas como Vercel ou GitHub Pages.
- Navegação Fluida Dinâmica: A implementação de scroll assistido por JavaScript faz com que a transição entre o painel de clima, os gráficos de previsão e os mapas ocorra de forma suave dentro de um container controlado.
- Resiliência de Dados Locais: Os dados salvos pelo usuário permanecem preservados mesmo se o navegador for fechado, otimizando o carregamento inicial da aplicação ao reutilizar o último local pesquisado com sucesso.