SkyCast is a state-of-the-art weather web application designed with a premium, hyper-glassmorphic aesthetic. It utilizes React Three Fiber to render immersive, dynamic 3D weather environments that react to live meteorological data in real-time.
SkyCast was built to push the boundaries of what a weather dashboard can look like. By combining real-time API data with a 3D WebGL rendering engine, it delivers not just numbers, but a breathtaking visual representation of the sky right on your screen. Whether you are tracking a 3D thunderstorm, monitoring detailed air quality metrics, or checking the custom lifestyle indices, SkyCast makes meteorological data beautiful and highly interactive.
- Dynamic 3D Weather Engine: Powered by
three.jsand@react-three/fiber. Watch 3D rain fall, volumetric clouds drift, and dynamic lighting shift based on actual weather conditions. - Smart Auto-Geolocation & Google Maps: Instantly detects and prompts for your exact GPS coordinates. The location badge serves as a direct, clickable link to your exact coordinates on Google Maps.
- Hyper-Glassmorphic UI: Premium dashboard aesthetics using dynamic gradients, frosted glass translucency, and modern typography.
- Advanced AQI Gauge: Features a custom-built SVG semi-circle gauge to visualize the Air Quality Index alongside granular pollutant breakdowns (PM2.5, PM10, CO, SO2).
- Custom Lifestyle Indices: A smart algorithm calculates your local suitability for Outdoor Activities, Stargazing, Fishing, Sailing, and more based on live temperature, wind, and humidity.
- Precision Solar Arc: Real-time visualization of the sun and moon trajectory based on precise local sunrise and sunset times.
- Interactive Forecasts: Seamlessly merged hourly temperature line charts and a clean vertical 7-day forecast.
- Framework: React 18 + Vite
- 3D Engine: Three.js + React Three Fiber
- Styling: Tailwind CSS
- Icons: Lucide React
- Data Source: OpenWeatherMap API
-
Clone the repository
git clone https://github.com/abhranilsingharoy-cloud/SkyCast.git cd SkyCast -
Install dependencies
npm install
-
Start the development server
npm run dev
Open your browser and navigate to
http://localhost:5173.
SkyCast runs in Demo Mode by default, generating highly realistic mock data so you can experience the 3D features immediately. To connect real-time data:
- Obtain a free API key from OpenWeatherMap.
- Click the Settings (Gear Icon) in the dashboard.
- Switch the "API Source" to Live API.
- Paste your API key and click "Save Changes". The key is stored securely in your browser's local storage.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.