Day 3 — Building a Weather App in React
12 Days of React Projects Series
Learning React becomes much easier when you build real projects instead of just reading concepts. That’s why I started my “12 Days — 12 React Projects” series, where every day I build one practical React app from scratch.
On Day 3, I built a Weather App using React that fetches real-time weather data from an API and displays it in a clean, mobile-responsive UI.
This project helped me understand how React components communicate, how APIs work in real-world applications, and how to structure a small yet complete React project.
In this blog, I’ll walk you through: what this Weather App does, how the file structure works, and a step-by-step breakdown of the main code files (with screenshots).
Live Project & Source Code
Live Demo (Netlify):
https://syeda-sd.netlify.app/
GitHub Repository:
https://github.com/syeda-sd/weather-app/
I highly recommend opening the live link in a new tab and testing the app while reading this blog.
Project Overview
This React Weather App is designed with simplicity and usability in mind. The application fetches real-time weather data using the OpenWeather API, allowing users to get accurate and up-to-date information for any city they search. To keep the experience smooth and enjoyable, the user interface is kept clean, minimal, and distraction-free, making it easy for beginners as well as non-technical users to understand and use the app.
Special attention has been given to error handling, so when a user enters an invalid or unknown city name, the app responds gracefully with a clear message instead of breaking or showing confusing errors. The layout is also fully mobile responsive, ensuring the app looks and works well on smartphones, tablets, and desktops alike. From a learning perspective, the project follows a beginner-friendly React structure, with clearly separated components and readable code that makes it easy to understand how data flows inside a React application.
To build this project, React JS was used as the core library along with modern JavaScript (ES6) features such as arrow functions, destructuring, and async/await for cleaner and more efficient code. The weather data is powered by the OpenWeather API, which provides reliable and real-time information. For styling, simple CSS is used to keep the design lightweight and responsive without relying on heavy UI frameworks. The project is deployed on Netlify, making it easily accessible online, while GitHub is used for version control and source code management, allowing the project to be shared, tracked, and improved over time.
Project Structure (Important Files)
src/
├─ components/
│ ├─ SearchBar.jsx
│ ├─ WeatherCard.jsx
├─ App.jsx
├─ App.cssEach file has a clear responsibility, which is a best practice in React.
SearchBar.jsx — Handling User Input
The SearchBar component is responsible for taking the city name from the user and triggering the weather API call.
This component plays an important role in the Weather App because it introduces some of the most essential React concepts in a very practical way. It teaches how to work with controlled inputs, where the input field value is fully managed by React state instead of the browser. Through this approach, beginners learn how React keeps the UI and data in sync at all times. The component also demonstrates the proper use of the useState hook for handling user input. Every time the user types a city name, the state updates in real time, helping learners understand how state changes affect the UI. In addition, it shows how form submission works in React, including preventing page reload and handling user actions smoothly.
Another key learning point is passing data to the parent component using props. Instead of fetching data directly inside the input component, the user input is sent to the parent through a function prop. This clearly explains how components communicate with each other in React and why separating UI from logic is considered a best practice. Overall, this component provides a strong foundation for understanding React forms, state management, and component interaction.
WeatherCard.jsx — Displaying Weather Data
Once data is fetched, it needs to be shown in a user-friendly way.
This is where WeatherCard.jsx comes in. This component is responsible for presenting the weather data in a clear and user-friendly way once the information is successfully fetched from the API. It displays the city name so users can easily confirm their search, along with the current temperature in Celsius, making the data instantly understandable. To enhance the visual experience, it also shows a weather description and a dynamic icon that represents the current weather condition, such as clear sky, clouds, or rain.
One of the most important responsibilities of this component is handling errors gracefully. If a user enters an invalid or unknown city name, the application does not crash or behave unexpectedly. Instead, it politely displays a simple message, “City not found ❌,” which keeps the user experience smooth and professional.
Get Sidra Gillani’s stories in your inbox
Join Medium for free to get updates from this writer.
From a learning perspective, this component introduces several important React concepts. It uses props to receive data from the parent component, demonstrating how information flows inside a React app. Conditional rendering is applied to decide whether to show weather details or an error message based on the API response. Additionally, JavaScript destructuring is used to extract specific values from the API response, keeping the code clean, readable, and easy to maintain. Overall, this component turns raw API data into a well-structured weather card UI, making it a great example of how real-world React applications handle data display, errors, and user experience at the same time.
App.jsx — The Brain of the Application
App.jsx is the main component where everything comes together.
Responsibilities of App.jsx:
App.jsx works as the main controller of the Weather App. It stores the weather data in state, handles the API request to fetch real-time weather information, and passes both data and functions to child components. This setup keeps the app organized and clearly shows how data flows from parent to child in React.
State Management
const [weather, setWeather] = useState(null);This state holds the API response and updates the UI automatically when data changes.
Fetching Data from OpenWeather API
const fetchWeather = async (city) => {
const key = process.env.REACT_APP_WEATHER_API_KEY;
const res = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${key}`
);
const data = await res.json();
setWeather(data);
};Why This Approach Is Important?
Using this approach keeps the app secure, clean, and efficient. By storing the API key in a .env file, it ensures sensitive information is never exposed in the code. The async/await syntax makes the API calls clean and easy to read, while updating the UI dynamically through React state ensures that users see the latest weather data instantly.
💡 Security Tip:
Never hard-code API keys directly into your components, as this can expose them publicly and compromise your app’s security.
Conditional Rendering
{weather && <WeatherCard data={weather} />}This ensures: UI renders only when data is available, no runtime errors, or Smooth user experience.
UI & Styling (App.css)
The app uses simple CSS to: center the weather card, keep the design clean, and maintain responsiveness. This proves that you don’t need complex UI libraries to build functional projects.
Deployment with Netlify
After finishing the Weather App, I deployed it using Netlify to make it easily accessible online. The process was simple: first, I built the React project, then connected the GitHub repository to Netlify, added the necessary environment variables, and finally deployed the app. This way, the project can be shared with recruiters, clients, and fellow learners, making it a professional and portfolio-ready project.
What I Learned from This Project?
This Day 3 Weather App project was a great learning experience. It helped me understand real-world API integration, how to structure React components efficiently, and how state and props flow between parent and child components. I also gained hands-on experience with error handling to make the app user-friendly and learned the deployment process to share the project online. Most importantly, completing this project boosted my confidence as a React learner and motivated me to build more projects in the series.
Final Thoughts
If you’re learning React, one of the most effective ways to improve is by building small projects every day. These hands-on projects help you understand how concepts like state, props, and component structure work in real scenarios, rather than just reading theory. Don’t worry about perfection — the key is consistency and practice. Each project, no matter how simple, contributes to your confidence and skill as a React developer.
The Weather App, as part of my 12 Days — 12 React Projects series, is a perfect example of how a small, focused project can teach multiple React concepts, from API integration to conditional rendering and error handling. By building projects like this, you not only strengthen your coding skills but also create portfolio-ready work that you can showcase to recruiters, clients, or fellow learners.
I’m excited to continue this series with more projects, each introducing new concepts and challenges. Stay tuned for Day 4, where we’ll dive into another practical React project that will expand your skills even further. Keep learning, keep building, and enjoy the journey of becoming a confident React developer! 🦋
