React Weather App Using OpenWeather API
🎯Project Description:
In this project, we will build a React Weather App that fetches real-time weather data using the OpenWeather API. The app allows users to search for any city and displays the temperature, weather conditions, wind speed, and humidity.
📌 Learning Outcomes
By the end of this project, students will:
✅ Understand React Hooks (useState , useEffect)
✅ Make API calls using Axios
✅ Fetch & display real-time weather data
✅ Style a React app with CSS
📋 Prerequisites
Before starting, students should have:
✔️ Basic knowledge of JavaScript & React.js
✔️ Node.js installed (for running React apps)
✔️ An OpenWeather API key (get it from OpenWeather)
🛠 Steps to Build the Project
1️⃣ Create a new React app
npx create-react-app weather-app
cd weather-app
npm install axios
2️⃣ Get an OpenWeather API key from
• Go to OpenWeather API
• Sign up and generate an API key.
• Keep this key safe—we’ll use it in the app.
3️⃣ Create the WeatherApp component (WeatherApp.css).
4️⃣ Fetch weather data using Axios and display it.
5️⃣ Style the app using WeatherApp.css.
6️⃣ Run the app using npm start.
📽 Video Tutorial
Watch the full step-by-step tutorial on how to build this app.
