A modern, responsive, and installable weather forecast application built with React and Vite. This project provides real-time current and hourly weather data based on the user's geolocation. View Live Demo
This project is a complete, modern web application that provides a clean and intuitive interface for checking local weather. It started as a simple HTML, CSS, and JS project and was migrated to a powerful tech stack to create a feature-rich, high-performance Progressive Web App (PWA).
The app automatically detects the user's location and delivers up-to-date weather information, including an interactive hourly forecast chart. It is fully optimized and can be installed on any device like a native app.
- Geolocation: Automatically fetches weather data for the user's current location.
- Real-time Data: Displays current conditions like temperature, humidity, wind speed, and "feels like" temperature.
- Interactive Hourly Forecast: A draggable, snap-scrolling hourly forecast complete with an animated temperature trend chart.
- Dynamic Loading Screen: An engaging loading screen with animated, randomized weather facts and tips.
- Progressive Web App (PWA): Fully installable on mobile and desktop devices for an app-like experience.
- Modern Animations: Smooth, professional animations powered by GSAP.
- SEO Optimized: Dynamic meta tags, structured data (JSON-LD), and a sitemap for high visibility on search engines.
This project was built using the following technologies:
- Frontend: React.js (v19)
- Build Tool: Vite
- Styling: Tailwind CSS
- Animations: GSAP (GreenSock Animation Platform)
- Charting: Recharts
- PWA: Vite PWA Plugin
- Deployment: GitHub Pages
To get a local copy up and running, follow these simple steps.
- Node.js (v20 or higher)
- npm
- Clone the repo:
git clone https://github.com/Axwaizee/Weather.git
- Navigate to the project directory:
cd Weather - Install NPM packages:
npm install
- Run the development server:
npm run dev
The app will be available at http://localhost:5173.
Important
Secure Context Required for Geolocation
Modern browsers require a secure context (HTTPS) to use the Geolocation API. The location feature will work on localhost during development, but your deployed site must be served over https for it to function. Fortunately, GitHub Pages automatically provides a free SSL certificate.
This project relies on free and open-source APIs. A huge thank you to:
- Open-Meteo for providing the comprehensive weather forecast data.
- Nominatim (OpenStreetMap) for the fast and reliable reverse geocoding service.
This project is licensed under the MIT License. See the LICENSE file for details.