Real-time weather intelligence wrapped in a strikingly beautiful interface — built for those who expect more than just a forecast.
🔍 Explore Features • 🚀 Quick Start • 🗺️ Project Structure • 🔑 API Setup • 📱 Screenshots
SkyCast is a premium, full-featured weather application engineered with Vue.js 3 Composition API and powered by OpenWeatherMap. It goes beyond simple weather lookups — offering a complete forecast experience with interactive maps, dynamic ambient themes, and a glass-morphism UI that adapts to every sky condition in real time.
Whether you're planning a mountain hike or a backyard barbecue, SkyCast delivers the data you need, presented in the most beautiful way possible.
|
|
|
|
|
|
The entire app atmosphere shifts based on live conditions:
| Condition | Theme | Color Palette |
|---|---|---|
| ☀️ Clear Day | Bright Sky | Azure → Sky Blue |
| 🌙 Clear Night | Midnight | Deep Violet → Indigo |
| ⛅ Partly Cloudy | Soft Drift | Pearl → Steel Blue |
| ☁️ Overcast | Ash Cloud | Slate → Cool Gray |
| 🌧️ Rain | Storm Front | Navy → Steel |
| ⛈️ Thunderstorm | Electric Night | Charcoal → Dark Violet |
| ❄️ Snow | Frost | Ice White → Pale Blue |
| 🌫️ Fog / Mist | Phantom | Muted Gray → Smoke |
| Light Mode | Dark Mode |
|---|---|
| Clear sky, crisp interface | Night mode, deep contrast |
💡 Add your own screenshots by dropping images into a
/screenshotsfolder and referencing them here.
- Node.js
>= 16.x - npm
>= 7.x - An OpenWeatherMap API key (free tier works)
# 1. Clone the repository
git clone https://github.com/Misrilal-Sah/SkyCast.git
cd SkyCast
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env
# Edit .env and add your API key:
# VITE_WEATHER_API_KEY=your_openweathermap_key_here
# 4. Start development server
npm run devOpen http://localhost:3000 in your browser — you're live! 🎉
| Command | Description |
|---|---|
npm run dev |
Start local development server with HMR |
npm run build |
Build optimized production bundle → dist/ |
npm run preview |
Preview production build locally |
npm run deploy |
Build and deploy to GitHub Pages |
SkyCast uses two external APIs:
🌤️ OpenWeatherMap API (required)
- Create a free account at openweathermap.org
- Generate an API key from your dashboard
- Add it to your
.envfile:VITE_WEATHER_API_KEY=your_key_here
Endpoints used: /weather, /forecast, /geo/1.0/direct, /geo/1.0/reverse
📮 India Post API (built-in, no key needed)
Used for pincode → coordinates resolution. Queries api.postalpincode.in and then geocodes the resulting city name. No setup required.
skycast/
├── 📄 index.html
├── ⚙️ vite.config.js
├── 📦 package.json
└── src/
├── 🧩 App.vue # Root component & state management
├── 🚀 main.js # App entry point
│
├── components/
│ ├── 🔍 SearchBar.vue # City / pincode search with suggestions
│ ├── 🌡️ CurrentWeather.vue # Main temperature & condition display
│ ├── 📊 WeatherDetails.vue # Humidity, wind, pressure, visibility
│ ├── 🕐 HourlyForecast.vue # Next 24-hour timeline
│ ├── 📅 DailyForecast.vue # 7-day forecast cards
│ ├── 🌅 AdditionalInfo.vue # Sunrise, sunset & UV info
│ └── 🗺️ MapSelector.vue # Leaflet interactive map modal
│
├── services/
│ └── 🌐 weatherApi.js # All API calls (weather, geocoding)
│
├── styles/
│ └── 🎨 main.css # Global styles, themes & animations
│
└── utils/
└── 🛠️ helpers.js # Temp, wind, pressure formatters
| Action | How To |
|---|---|
| 🔍 Search a city | Type any city name → select from live suggestions |
| 📮 Search by pincode | Enter any 6-digit Indian pincode |
| 🗺️ Pick on map | Click the map icon → drop a pin anywhere on earth |
| 📍 Use my location | Click the GPS icon for instant local weather |
| 🌙 Toggle dark mode | Click moon/sun icon in the header |
| 🌡️ Switch units | Click °C / °F button to toggle |
| 🕓 Recent searches | Tap any saved city for instant reload |
| Layer | Technology | Role |
|---|---|---|
| Frontend | Vue.js 3 + Composition API | Reactive UI & component logic |
| Build Tool | Vite 4 | Blazing-fast dev & optimized builds |
| Maps | Leaflet 1.9 | Interactive location picker |
| Weather Data | OpenWeatherMap API | Current weather + 5-day forecast |
| Geocoding | OWM Geo API + India Post API | City & pincode resolution |
| Deployment | GitHub Pages + gh-pages | Static site hosting |
| Styling | Vanilla CSS + CSS Variables | Theming, glass-morphism, animations |
Contributions are warmly welcomed! Here's how:
# Fork & clone
git clone https://github.com/Misrilal-Sah/SkyCast.git
# Create a feature branch
git checkout -b feature/amazing-feature
# Commit your changes
git commit -m "feat: add amazing feature"
# Push and open a PR
git push origin feature/amazing-featureDistributed under the MIT License — free to use, modify, and distribute.
If SkyCast brought weather to life for you, drop a ⭐ — it means the world!