🌤 SkyCast

SkyCast is a modern, single-page weather dashboard built with React that provides real-time weather insights, air quality data, and sun–moon position tracking using the Visual Crossing Weather API.

The application focuses on clean UI, accurate data visualization, and real-world usability, making it suitable for portfolios and placement projects.

---

🚀 Features

• 🌍 City-based weather search
• 🌡 Current temperature and “feels like” temperature
• 🔺 Daily maximum & minimum temperature
• 🌬 Wind speed (m/s)
• 💧 Humidity levels
• 🫁 Air Quality Index (AQI) with color-coded health scale
• 🌅 Sunrise & 🌇 Sunset times
• ☀️🌙 Dynamic sun–moon path indicator (day/night aware)
• 🌦 Weather condition icons
• 🌙 Modern dark-theme UI
• 📱 Fully responsive (mobile & desktop)

---

🛠 Tech Stack

• Frontend: React (Next.js – Client Components)
• Styling: CSS Modules
• API: Visual Crossing Weather API
• Architecture: Single-page application (SPA)

---

🌐 API Used

https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/{city}

---

Why Visual Crossing?

• Reliable free tier
• Single endpoint for weather, AQI, and astronomy data
• City-based queries (no latitude/longitude complexity)
• Frontend-friendly (no CORS issues)

---

⚙️ How It Works

1. User enters a city name
2. App fetches weather data from Visual Crossing API
3. Data is processed and mapped to UI cards
4. Sun or moon position is calculated based on current time
5. Weather details are displayed in a clean dashboard layout

---

📸 Preview

---

🧠 Learning Outcomes

• API integration using fetch and async/await
• Real-time data handling and visualization
• Conditional rendering in React
• Responsive UI design
• Practical use of environmental data (AQI, astronomy)

---

📄 License

This project is open-source and available for learning and demonstration purposes.