Skip to main content
Menu

Weather Analytics

Back to projects

Beirut

Weather Analytics

Loading live forecast…

Loading Beirut weather

The rebuild

Turning a basic weather dashboard into a real analytical workspace.

The original project could display weather data. The redesign focused on making that data explorable, reusable, and easier to understand.

01

Observe

KPIs and forecast context

02

Explore

Normalized hourly records

03

Analyze

Insights and comparisons

04

Reuse

Saved layouts and preferences

One weather dataset. Multiple ways to understand it.

Product map

One weather workspace. Six connected ways to understand the data.

Move from monitoring conditions to exploring records, uncovering insights, comparing locations, and preserving the workspace for later.

Weather Analytics
Live data

01 · Overview

Monitor key metrics and forecast behavior.

Product preview

From monitoring to analysis to reuse, every workspace operates around the same weather data experience.

Overview workspace

KPIs, forecast context, and a customizable chart grid on one screen.

The overview opens with live location context, a seven-day forecast strip, and KPI cards for temperature, precipitation, wind, and related metrics.

The overview combines KPI cards, a forecast strip, and four live chart widgets fed by normalized Open-Meteo data.

Edit layout mode lets users reorder, hide, and restore widgets while keeping the arrangement in local storage.

Analytics

Insight cards, category tabs, and optional location comparison.

Analytics groups insight cards by category and keeps a session activity timeline for refresh, export, and view actions.

Comparison mode places two locations side by side with average temperature, precipitation, wind, and record counts.

Data Explorer

Inspect normalized hourly records with search, filters, and export tools.

The Data Explorer supports location filters, search, sorting, pagination, and CSV export over normalized hourly records.

Productivity

Command palette, shortcuts, saved views, settings, and dark mode.

The command palette exposes navigation, charts, data, and actions from one searchable overlay.

Keyboard shortcuts cover navigation, refresh, search focus, edit layout, and overlay dismissal.

Saved views store filter combinations and widget layouts for one-click reuse on the overview workspace.

Settings centralize theme, reduced motion, sidebar behavior, and dashboard defaults.

Dashboard defaults and local storage controls make it easy to reset layouts, views, and preferences.

Dark mode adjusts chart palettes, KPI text, and surface contrast for low-light use.

Architecture

Laravel serves normalized weather data; TypeScript owns the interactive dashboard.

  • Six focused pages replace the original placeholder admin shell.
  • Open-Meteo removed the need for a hardcoded third-party API key.
  • Widget order, hidden charts, saved views, and preferences persist locally.
  • Soft navigation swaps page content without a full reload on dashboard routes.
  • Comparison, explorer filters, and chart drill-down share one normalized dataset payload.

Presentation

  • Blade views
  • Chart.js

Application

  • Laravel controllers
  • WeatherApiService
  • JSON API routes
  • Server-side caching

Data

  • Open-Meteo forecast
  • Open-Meteo archive
  • Geocoding search
  • Normalized hourly records