🌦️ Weather Dashboard

A modern, responsive weather dashboard built with Next.js , TypeScript, and SCSS. This application allows users to search for cities, save them to a personal dashboard, and view detailed weather forecasts including hourly graphs and 8-day outlooks.

Features

• City Management: Search for and add cities to your personal dashboard.
• Persistent Data: Your saved cities are stored locally, so they remain after you refresh.
• Dynamic UI: Weather cards feature dynamic background gradients that change based on current weather conditions (clear, rain, snow, etc.).
• Detailed Forecasts:
  • Current weather conditions (temperature, wind, humidity, UV index, etc.).
  • Interactive Graph: 24-hour temperature and "feels like" trend using Recharts.
  • 8-Day Forecast: Daily summary cards.
• Responsive Design: Fully optimized for desktop and mobile devices.
• Smart Search: Filter your saved cities instantly via the navigation bar.

Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: SCSS
• State Management: Zustand (with LocalStorage persistence)
• Data Fetching: TanStack Query
• Charts: Recharts
• API: OpenWeatherMap API

Design

All UI/UX design was created by me from scratch using Figma.
The project demonstrates both coding and design skills.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• An API Key from OpenWeatherMap

Installation

1. Clone the repository:

   git clone https://github.com/soylltari/weather-app.git
   cd weather-dashboard

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up Environment Variables: Create a .env.local file in the root directory and add your OpenWeatherMap API key:

   NEXT_PUBLIC_OPENWEATHER_API_KEY=your_api_key_here

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 with your browser to see the result.

Screenshots