A modern, responsive weather dashboard with beautiful visualizations and smooth animations
Weather Insight Dashboard is a production-ready, glassmorphism-styled weather application that provides comprehensive weather data visualization. Built with Next.js 16, TypeScript, Tailwind CSS, and Framer Motion, it delivers an exceptional user experience with smooth animations and intuitive interactions.
The dashboard fetches real-time weather data from the Open-Meteo API (no API key required) and presents it through interactive charts, expandable cards with morph animations, and a fully responsive design that works seamlessly across all devices.
- 🎨 Modern Glassmorphism Design: Beautiful translucent UI with backdrop blur effects
- 🚀 Smooth Animations: Premium motion design using Framer Motion
- 📊 Interactive Charts: Dynamic visualizations powered by Recharts
- 🌙 Dark/Light Mode: Full theme support with smooth transitions
- 📱 Fully Responsive: Mobile-first design that scales to any screen
- 🔍 Smart City Search: Real-time geocoding with autocomplete
- ⚡ Real-time Data: Live weather updates from Open-Meteo API
- 🌍 Global Weather Coverage: Search for any city worldwide with instant geocoding
- 📈 Comprehensive Weather Data:
- Current conditions (temperature, humidity, wind, precipitation)
- Hourly forecasts (24-hour breakdown)
- 7-day extended forecast
- Apparent temperature ("feels like")
- Wind speed and direction
- Precipitation probability and amount
- UV index
- Sunrise/sunset times
- 🎭 Hero Card: Large, animated display of current weather with embedded temperature chart
- 🔮 Expandable Cards: Morph-style animations reveal detailed hourly breakdowns
- Humidity card with min/max/avg values
- Wind card with speed, direction, and gusts
- Feels Like card with temperature comparisons
- Precipitation card with probability and amounts
- 📊 Advanced Data Panel: Tabbed interface for detailed chart visualizations
- Temperature chart with actual vs feels like comparison
- Wind chart with speed and gusts
- Humidity bar chart
- Precipitation chart with probability overlay
- 🔍 Smart Search: Debounced city search with real-time autocomplete results
- 🌓 Theme Toggle: Seamless dark/light mode switching
- 🎬 Page Transitions: Smooth entry animations for all components
- 🔄 Morph Animations: Shared layout animations when expanding/collapsing cards
- 🎯 Micro-interactions: Hover states, active states, and feedback animations
- 📈 Chart Animations: All charts animate on data changes with smooth easing
- ☁️ Background Effects: Subtle floating gradient orbs for visual depth
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.1 | React framework with App Router |
| TypeScript | 5.0 | Type-safe development |
| React | 19.0 | UI library |
| Technology | Version | Purpose |
|---|---|---|
| Tailwind CSS | 4.0 | Utility-first styling |
| shadcn/ui | Latest | Pre-built UI components |
| Framer Motion | 12.23 | Animation library |
| next-themes | 0.4.6 | Theme management |
| Lucide Icons | 0.525 | Icon library |
| Technology | Version | Purpose |
|---|---|---|
| Recharts | 2.15 | Charting library |
| Technology | Purpose |
|---|---|
| Open-Meteo API | Free weather data (no API key needed) |
- Glassmorphism First: All major components use glass effect styling with backdrop blur, semi-transparent backgrounds, and subtle borders for depth
- Motion as Communication: Animations are not decorative; they guide user attention and communicate state changes
- Cohesive Timing: All animations share consistent easing curves and durations for a unified feel
- Performance-First: Animations use hardware-accelerated CSS transforms for smooth 60fps performance
- Layout Animations:
layoutIdprop in Framer Motion for seamless card morphing - Spring Physics: Natural-feeling transitions with configurable stiffness and damping
- Staggered Reveals: Sequential animations for list items and data points
- Hover Feedback: Subtle scale and opacity changes on interactive elements
The dashboard uses Tailwind CSS's color system with semantic tokens:
primary: Main actions and highlightsaccent: Secondary information and chartsmuted: Subtext and less important elementsdestructive: Errors and alerts- Full dark mode support with inverted luminance values
All charts follow these principles:
- Clarity Over Decoration: Clean, minimal charts that prioritize data readability
- Interactive Tooltips: Hover tooltips show precise values with context
- Animated Entry: Charts animate smoothly when data changes
- Responsive Scaling: Charts resize fluidly to container dimensions
- Consistent Styling: All charts share colors, fonts, and styling patterns
- Hourly Data: First 24 hours from the current time
- Time Formatting: Locale-aware formatting with timezone support
- Temperature Rounding: Consistent rounding to nearest whole number
- Precipitation Precision: One decimal place for accuracy
- Line Charts: Temperature and wind trends over time
- Bar Charts: Humidity and precipitation distribution
- Multi-Series: Multiple data series for comparison (e.g., actual vs feels like)
- Reference Lines: Current values highlighted on historical charts
- Free: No API key required
- Reliable: High-quality weather data from trusted sources
- Comprehensive: Current conditions, hourly, and daily forecasts
- Fast: Low-latency responses with global coverage
- No Rate Limits: Generous usage limits for development
-
Geocoding API:
https://geocoding-api.open-meteo.com/v1/search- Converts city names to coordinates
- Returns multiple search results with confidence scores
-
Forecast API:
https://api.open-meteo.com/v1/forecast- Fetches comprehensive weather data
- Supports current, hourly, and daily data
- Automatic timezone detection
Current Weather:
- Temperature (2m above ground)
- Apparent temperature
- Relative humidity
- Weather code (WMO)
- Precipitation, rain, showers, snowfall
- Cloud cover
- Surface pressure
- Wind speed and direction
- Wind gusts
Hourly Data:
- Temperature and apparent temperature
- Humidity
- Precipitation and probability
- Weather codes
- Cloud cover (all levels)
- Pressure
- Wind speed and direction (multiple altitudes)
- Dew point
Daily Data:
- Sunrise and sunset
- Daylight and sunshine duration
- UV index
- Precipitation sums
- Temperature min/max
- Weather codes
- Node.js 18+ or Bun
- Git
- Clone the repository
git clone <repository-url>
cd weather-insight-dashboard- Install dependencies
Using Bun (recommended):
bun installUsing npm:
npm install- Run the development server
bun run dev- Open your browser
Navigate to http://localhost:3000
bun run buildThe production build will be optimized and ready for deployment.
weather-insight-dashboard/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ ├── weather/
│ │ │ │ └── route.ts # Weather data API endpoint
│ │ │ └── geocode/
│ │ │ └── route.ts # Geocoding API endpoint
│ │ ├── layout.tsx # Root layout with providers
│ │ ├── page.tsx # Main dashboard page
│ │ └── globals.css # Global styles & utilities
│ ├── components/
│ │ └── weather/
│ │ ├── HeroCard.tsx # Main weather display
│ │ ├── WeatherCards.tsx # Expandable detail cards
│ │ ├── AdvancedDataPanel.tsx # Tabbed chart panel
│ │ ├── SearchBar.tsx # City search input
│ │ └── ThemeToggle.tsx # Theme switcher
│ ├── lib/
│ │ ├── openmeteo.ts # Open-Meteo API client
│ │ └── weather-utils.ts # Utility functions
│ └── types/
│ └── weather.ts # TypeScript types
├── public/ # Static assets
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
├── tailwind.config.ts # Tailwind config
└── next.config.mjs # Next.js config
No environment variables are required as Open-Meteo API doesn't need an API key.
The application is optimized for Vercel deployment. The next.config.mjs and vercel.json files are pre-configured.
- 5-Day Forecast View: Expandable daily forecast cards
- Weather Alerts: Integration with weather warning systems
- Saved Locations: Store favorite cities with local storage
- Historical Data: View past weather for any date
- Weather Maps: Interactive radar and precipitation maps
- Air Quality: AQI index and pollutants data
- PWA Support: Install as a native app
- Offline Mode: Service worker for offline access
- Unit Conversion: Switch between Celsius/Fahrenheit, km/h/mph
- Notifications: Weather alerts and daily summaries
- Caching Layer: Implement Redis or similar for faster responses
- Data Pre-fetching: Smart pre-loading of likely locations
- Performance Optimization: Web Workers for heavy computations
- Accessibility Improvements: Full ARIA support and keyboard navigation
- Testing Suite: Unit and integration tests with Jest/Playwright
This project is licensed under the MIT License - see the LICENSE file for details.
Terima kasih kepada:
- Open-Meteo — menyediakan data cuaca gratis dan berkualitas
- shadcn/ui — komponen UI yang keren dan accessible
- Framer Motion — library animasi yang smooth
- Vercel & Next.js — platform dan framework yang luar biasa
For issues, questions, or contributions:
- Open an issue on GitHub
- Open a pull request or discussion on GitHub
Built with ❤️ by Jabes using Next.js, TypeScript, and Framer Motion