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.
- 🌍 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)
- Frontend: React (Next.js – Client Components)
- Styling: CSS Modules
- API: Visual Crossing Weather API
- Architecture: Single-page application (SPA)
https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/{city}
- Reliable free tier
- Single endpoint for weather, AQI, and astronomy data
- City-based queries (no latitude/longitude complexity)
- Frontend-friendly (no CORS issues)
- User enters a city name
- App fetches weather data from Visual Crossing API
- Data is processed and mapped to UI cards
- Sun or moon position is calculated based on current time
- Weather details are displayed in a clean dashboard layout
- API integration using
fetchand async/await - Real-time data handling and visualization
- Conditional rendering in React
- Responsive UI design
- Practical use of environmental data (AQI, astronomy)
This project is open-source and available for learning and demonstration purposes.