Weather Analytics Dashboard
A Next.js dashboard that turns raw weather data into explorable, location-based analytics.
Role
Creator — personal project
Stack
Next.js, Zustand, Axios, Framer Motion
Language
Next.js
Repository
Link pending
Problem
Raw weather data feeds answer single questions ('what is the temperature now?') but not analytical ones ('how does this region's rainfall trend compare over time?'). The dashboard bridges that gap with aggregation and visualization.
Solution
A personal weather-analytics dashboard with interactive map-based visualization and animated UI transitions.
My contribution
Built the dashboard with Next.js, Zustand, Axios, Framer Motion, and MapLibre — interactive map-based visualization with animated transitions (Aug 2026).
Architecture
External weather data fetched through Axios and normalized into a unified model; Zustand holds client state; MapLibre renders the geospatial layer; Framer Motion drives animated UI transitions.
Overview
The dashboard answers analytical questions about weather: trends, comparisons across locations, and map-based exploration rather than single current-value reads.
Technical Decisions
Zustand for state (small surface, no boilerplate), MapLibre for the interactive map, and Framer Motion for transitions between locations and time ranges. The data layer normalizes external sources so views never deal with feed inconsistencies.
Results
A responsive dashboard demonstrating a complete data workflow — external sources, normalization, state, geospatial visualization — within the Next.js ecosystem.
The hard part
Normalizing heterogeneous external data into one consistent model while keeping the map interaction smooth.
A decision worth noting
Kept client state in Zustand (lightweight, store-per-concern) instead of a heavier data layer, since the dashboard is read-heavy with few writers.
Outcome
A working analytics dashboard demonstrating data workflow design, geospatial thinking, and animated frontend engineering.
Next project
Tour Reservation Platform