A modern and responsive weather application built using React and Vite, styled with Bootstrap, and powered by the OpenWeatherMap API. It allows users to search for current weather conditions in any location with real-time feedback and animated weather icons using SVGs.
- π Search by Location β Get live weather updates by entering a city or place name.
β οΈ Invalid Location Handling β If a user searches for a non-existent place, a popup alert notifies them.- π Animated SVG Weather Icons β Interactive and visually appealing weather display using SVG animations.
- π± Responsive Design β Looks great on all devices, from mobile phones to desktop screens.
- π Real-time Weather Data β Fetched directly from the OpenWeatherMap.org API.
- React
- Vite
- React Bootstrap
- OpenWeatherMap API
- Animated SVG icons
- Node.js and npm installed
- An API key from OpenWeatherMap
-
Clone the repository:
git clone https://github.com/hunjanhar/react-weather-app.git cd react-weather-app -
Install dependencies:
npm install -
Set up environment variables:
- Create a .env file in the root directory:
VITE_URL=https://api.openweathermap.org/data/2.5/ VITE_KEY=your_api_key_here
-
Start the development server:
npm run dev

