SkyCast — Smart Weather Insights in Real-Time :

SkyCast is a modern, responsive weather dashboard built with React and Vite. It provides real-time weather insights for cities worldwide, featuring a clean UI, fast API-driven data, and smooth user interactions.

Features

• City search with instant weather data
• Current weather: temperature, condition, icon
• Additional details: humidity, wind speed, feels like
• 3–5 day forecast
• Hourly forecast (next 24 hours)
• Weather map (clouds layer) with Leaflet and OpenWeatherMap overlays (no unwanted text)
• Loading spinner and error handling
• Responsive, mobile-first design
• Glassmorphism cards, gradient backgrounds, soft shadows
• Dark/Light mode toggle
• Auto-detect location
• Save last search (localStorage)
• Bookmark favorite cities (add/remove with subtle ✕ icon)
• See local time for searched city
• Smooth UI animations

Tech Stack

• React (Vite)
• Tailwind CSS
• Axios
• OpenWeatherMap API

Project Structure

src/
 ├── components/
 │    ├── SearchBar.jsx
 │    ├── WeatherCard.jsx
 │    ├── Forecast.jsx
 │    ├── HourlyForecast.jsx
 │    ├── WeatherMap.jsx
 │    ├── WeatherFavorites.jsx
 │    ├── Loader.jsx
 ├── services/
 │    ├── weatherApi.js
 ├── App.jsx
 ├── main.jsx
 ├── index.css

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

Screenshots

Mobile view: Forecast:

Weather map (Leaflet): Favorites:

Live Demo

(https://sky-cast-roan.vercel.app/)

© 2026 SkyCast