🌤️ Weather Dashboard

A modern, responsive Weather Dashboard application built with Next.js 14, TypeScript, and Tailwind CSS. Display current weather conditions, hourly and 7-day forecasts, and interactive data visualizations.

✨ Features

• Current Weather Display

  • Real-time temperature, conditions, and weather icons
  • Feels like temperature, humidity, wind speed, pressure
  • Visibility, sunrise/sunset times
  • High/low temperatures

• Hourly Forecast

  • Next 24 hours weather forecast
  • Hour-by-hour temperature and conditions
  • Precipitation probability
  • Wind speed per hour

• 7-Day Forecast

  • Daily weather forecast with high/low temperatures
  • Weather conditions, humidity, wind information
  • Precipitation chance

• Data Visualization

  • Temperature trend chart (line chart)
  • Precipitation chance chart (bar chart)
  • Wind speed chart (line chart)
  • Interactive tooltips

• Location Features

  • Search by city name
  • Auto-detect location using geolocation API
  • Save favorite locations (localStorage)
  • Recent searches history

• UI/UX Features

  • Responsive design (mobile, tablet, desktop)
  • Dark/Light theme toggle with persistence
  • Loading states and error handling
  • Smooth animations and transitions
  • Accessible design

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• OpenWeatherMap API key (free tier available)

Installation

1. Clone the repository

   git clone <repository-url>
   cd weather-dashboard

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   NEXT_PUBLIC_WEATHER_API_KEY=your_api_key_here

   To get your free API key:

   • Visit OpenWeatherMap API
   • Sign up for a free account
   • Get your API key from the dashboard
   • Free tier: 1,000 calls/day, 60 calls/minute

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

🛠️ Tech Stack

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Chart.js with react-chartjs-2
• Icons: Lucide React
• Date Handling: date-fns
• API: OpenWeatherMap API

📁 Project Structure

weather-dashboard/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Main dashboard page
│   └── globals.css         # Global styles
├── components/
│   ├── CurrentWeather.tsx
│   ├── HourlyForecast.tsx
│   ├── DailyForecast.tsx
│   ├── WeatherCharts.tsx
│   ├── SearchBar.tsx
│   ├── LocationButton.tsx
│   ├── ThemeToggle.tsx
│   ├── LoadingSkeleton.tsx
│   └── ErrorMessage.tsx
├── hooks/
│   ├── useWeather.ts       # Weather data hook
│   ├── useGeolocation.ts   # Geolocation hook
│   ├── useTheme.ts         # Theme management
│   └── useFavorites.ts     # Favorites management
├── lib/
│   ├── api.ts              # API functions
│   └── utils.ts            # Utility functions
└── types/
    └── weather.ts          # TypeScript types

🎨 Features in Detail

Search Functionality

• Search for weather by city name
• Input validation and error handling
• Recent searches with quick access
• Favorite locations management

Current Weather

• Large temperature display with weather icon
• Detailed weather metrics
• Formatted dates and times
• Responsive card layout

Forecasts

• Hourly forecast with horizontal scrolling
• 7-day forecast with daily cards
• Weather icons and conditions
• Temperature ranges and precipitation data

Charts

• Interactive temperature trend chart
• Precipitation probability visualization
• Wind speed chart
• Responsive chart layouts

Theme Support

• Light and dark mode
• Theme persistence in localStorage
• Smooth theme transitions
• System preference detection

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your project in Vercel
3. Add environment variable: NEXT_PUBLIC_WEATHER_API_KEY
4. Deploy automatically

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• Render

Make sure to set the NEXT_PUBLIC_WEATHER_API_KEY environment variable in your deployment platform.

📝 API Usage

This project uses the OpenWeatherMap API:

• Current Weather: /weather endpoint
• 5-Day Forecast: /forecast endpoint
• Geolocation: Uses coordinates with weather endpoints

Free tier limits:

• 1,000 API calls per day
• 60 API calls per minute

🐛 Troubleshooting

API Key Not Working

• Ensure .env.local file exists with NEXT_PUBLIC_WEATHER_API_KEY
• Verify the API key is correct in OpenWeatherMap dashboard
• Check API call limits (free tier: 60 calls/minute)

City Not Found

• Check city name spelling
• Try using city name with country code (e.g., "London, UK")
• Verify the city exists in OpenWeatherMap database

Charts Not Rendering

• Check browser console for errors
• Verify Chart.js is properly installed
• Ensure data is available before rendering charts

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Weather data provided by OpenWeatherMap
• Icons by Lucide
• Charts by Chart.js

📧 Contact

For questions or suggestions, please open an issue on GitHub.

---

Happy Weather Tracking! 🌤️