Build a Weather App in React: Complete Project Guide
Learn how to build a Weather App in React using a real weather API. Understand API integration, React Hooks, async/await, loading states, error handling, and environment variables.
Build a Weather App in React: Complete Beginner Project Guide
A Weather App is one of the most popular beginner-friendly React projects.
Unlike a Todo App, a Weather App introduces you to working with real-world APIs , asynchronous JavaScript, loading states, and error handling.
By building this project, you'll learn how React applications communicate with external services and display live data.
In this guide, you'll build a fully functional Weather App that fetches real-time weather information based on a city entered by the user.
Prerequisites
Before starting this project, make sure you understand:
These concepts are essential for building API-driven applications.
What Will We Build?
Our Weather App will support:
✅ Search Weather by City
✅ Display Current Temperature
✅ Show Weather Condition
✅ Display Humidity
✅ Show Wind Speed
✅ Loading Indicator
✅ Error Handling
Example:
📍 Ahmedabad
🌤️ Clear Sky
🌡️ 34°C
💧 Humidity: 42%
🌬️ Wind: 14 km/h
Why Build a Weather App?
A Weather App teaches several real-world development concepts.
You'll learn:
- API integration
- asynchronous programming
- React state management
- conditional rendering
- loading states
- error handling
- reusable components
These are skills used in almost every production React application.
Project Structure
src
├── components
│ ├── SearchBar.jsx
│ ├── WeatherCard.jsx
│ ├── Loader.jsx
│ └── ErrorMessage.jsx
├── services
│ └── weatherApi.js
├── App.jsx
└── main.jsx
This structure keeps API logic separate from UI components.
Step 1: Choose a Weather API
A Weather App requires live weather data.
Popular APIs include:
- OpenWeatherMap
- WeatherAPI
- Open-Meteo
- Visual Crossing
Most provide free plans for learning and small projects.
Step 2: Create State
Inside App.jsx:
import { useState } from "react";
function App() {
const [city, setCity] =
useState("");
const [weather, setWeather] =
useState(null);
const [loading, setLoading] =
useState(false);
const [error, setError] =
useState("");
}
Each piece of state manages a different part of the application.
Step 3: Create Search Input
<input
type="text"
placeholder="Enter city"
value={city}
onChange={(e) =>
setCity(e.target.value)
}
/>
Users can now enter a city name.
Step 4: Fetch Weather Data
Example:
const fetchWeather =
async () => {
setLoading(true);
try {
const response =
await fetch(API_URL);
const data =
await response.json();
setWeather(data);
} catch {
setError(
"Unable to fetch weather."
);
}
setLoading(false);
};
This function requests weather information from the API.
Understanding the API Flow
User Searches City
↓
API Request
↓
Server Response
↓
Update State
↓
Render Weather
This is how most API-based React applications work.
Step 5: Display Weather Information
Example:
{weather && (
<div>
<h2>
{weather.name}
</h2>
<p>
{weather.main.temp}°C
</p>
</div>
)}
Conditional rendering ensures the UI only appears after data is available.
Step 6: Add a Loading Indicator
Example:
{
loading &&
<p>
Loading...
</p>
}
Loading feedback improves user experience.
Step 7: Handle Errors
Example:
{
error &&
<p>
{error}
</p>
}
Always inform users when something goes wrong.
Step 8: Create Weather Card Component
function WeatherCard({
weather
}) {
return (
<div>
<h2>
{weather.name}
</h2>
<p>
{weather.main.temp}°C
</p>
</div>
);
}
export default WeatherCard;
Splitting the UI into components improves maintainability.
Display Additional Weather Details
Most APIs provide extra information.
Example:
Temperature
Humidity
Wind Speed
Feels Like
Pressure
Visibility
Adding these details creates a richer user experience.
Styling with Tailwind CSS
Example:
<div
className="
max-w-md
mx-auto
rounded-xl
shadow-lg
p-6
bg-white
"
>
Weather Card
</div>
Tailwind makes it easy to create a clean, modern interface.
Complete Application Flow
Enter City
↓
Click Search
↓
Fetch Weather
↓
Loading...
↓
Display Weather
↓
Search Again
This is a common pattern in API-driven applications.
Real Project Improvements
After completing the basic version, add:
- weather icons
- 5-day forecast
- hourly forecast
- current location support
- dark mode
- search history
- favorite cities
- animated backgrounds
These features make the application feel production-ready.
Common Beginner Mistakes
Exposing API Keys
Never hardcode API keys directly inside components.
Use environment variables instead.
Example:
VITE_WEATHER_API_KEY=YOUR_API_KEY
Forgetting Error Handling
Network requests can fail.
Always handle failed requests gracefully.
Ignoring Loading State
Without a loading indicator, users may think the application has frozen.
Fetching Data Repeatedly
Avoid unnecessary API requests by triggering fetches only when needed.
What Concepts Does This Project Teach?
This single project covers:
- React Components
- State Management
- Hooks
- API Integration
- Async Await
- Fetch API
- Conditional Rendering
- Error Handling
- Loading States
- Environment Variables
These concepts are essential for modern frontend development.
Watch Full Weather App Tutorial
If you prefer building projects by following a video, watch the complete React Weather App tutorial below.
👉 Watch the Full React Weather App Tutorial
The tutorial demonstrates API integration, component design, loading states, and responsive UI development.
Build Something More Advanced
After this Weather App, challenge yourself with:
- News App
- Movie Search App
- Currency Converter
- GitHub User Finder
- Recipe Finder
These projects build on the same API integration concepts.
Production Tip
Professional React developers usually:
- organize API calls inside a services folder
- store API keys in environment variables
- display loading and error states
- create reusable UI components
- optimize API requests
These practices improve scalability and maintainability.
Why Weather Apps Matter
A Weather App is more than a beginner project.
It introduces you to one of the most important aspects of frontend development—working with external APIs and displaying live data.
The same concepts are used in dashboards, e-commerce platforms, finance apps, and countless real-world products.
Conclusion
Building a Weather App is an excellent way to strengthen your React skills while learning how to work with external APIs.
By combining React components, hooks, asynchronous JavaScript, and API integration, you'll gain practical experience that directly applies to professional frontend development.
Once you've completed this project, you'll be ready to build more advanced, data-driven React applications.