This React-based Weather App allows users to search for real-time weather conditions in any city. One of the coolest features is its dynamic display of weather-appropriate GIFs, making the user interface engaging and fun.
-
Search Functionality: Users can search for any city to get the latest weather information.
-
Dynamic Weather GIFs: Depending on the weather conditions (like sunny, rainy, snow, etc.), the app displays a corresponding GIF, adding a fun visual element to the weather data.
-
Responsive Design: Optimized for both desktop and mobile devices, ensuring a seamless experience across all platforms.
- React: Used for building the user interface.
- Semantic UI React: For styling and responsive design elements.
- API: OpenWeatherMap API for fetching real-time weather data.
To run this project locally:
git clone [email protected]:sumedhakoranga/weatherapp.git
cd weatherapp
npm install
npm start
To run this project, you will need to add the following environment variables to your .env file:
REACT_APP_API_URL = 'https://api.openweathermap.org/data/2.5'
REACT_APP_API_KEY = 'ENTER_KEY'
-
Start the App: Run
npm start, and navigate tohttp://localhost:3000. -
Search for a City: Enter the name of the city in the search bar.
-
View Weather and GIF: Get real-time weather data along with a fun GIF representing the current weather.