Skip to content

🌀️ WeatherApp is a modern, responsive weather app built with React, Vite, and Bootstrap, using the 🌐 OpenWeatherMap API. Search any location to get 🌑️ real-time weather updates with animated 🌈 SVG icons and a clean, mobile-friendly UI πŸ“±.

License

Notifications You must be signed in to change notification settings

hunjanhar/react-weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

1 Commit
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌀️ WeatherApp

πŸ–ΌοΈ Screenshots

🌀️ Main View

Main View

πŸ” Invalid Location

Search Result

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.


πŸš€ Features

  • πŸ” 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.

πŸ› οΈ Built With


πŸ”§ Getting Started

πŸ“¦ Prerequisites

πŸ“₯ Installation

  1. Clone the repository:

    git clone https://github.com/hunjanhar/react-weather-app.git
    cd react-weather-app
  2. Install dependencies:

    npm install
    
  3. 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
    
  1. Start the development server:

    npm run dev
    

About

🌀️ WeatherApp is a modern, responsive weather app built with React, Vite, and Bootstrap, using the 🌐 OpenWeatherMap API. Search any location to get 🌑️ real-time weather updates with animated 🌈 SVG icons and a clean, mobile-friendly UI πŸ“±.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published