Loading
MindXchange
MindXchange
MindXchange

Quipoin Menu

Learn • Practice • Grow

Tutorial Exercises MCQs Interview Q & A Tests
react / Weather App Project
tutorial
ExercisesInterview QsMCQVideosDiscussion

Weather App Project

In this project, we'll build a weather app that fetches real-time weather data from an API. This will teach you how to work with external APIs, handle asynchronous operations, manage loading and error states, and display dynamic data.

What We're Building

A weather application where users can:
  • Enter a city name.
  • See current weather conditions (temperature, description, humidity, wind speed).
  • See a loading indicator while fetching.
  • See error messages if the city is not found or API fails.

Working with APIs is a core skill for any React developer. This project gives you hands-on experience with fetch, async/await, and error handling.

Step 1: Get an API Key

We'll use the OpenWeatherMap API. Sign up at https://openweathermap.org/api and get your API key.

Step 2: Setup React App
npx create-react-app weather-app
cd weather-app
npm start

Step 3: Create Weather Component
import React, { useState } from 'react';
import WeatherDisplay from './WeatherDisplay';

function WeatherApp() {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const API_KEY = 'YOUR_API_KEY'; <!-- Replace with your key -->

  const fetchWeather = async () => {
    if (!city) return;
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
      );
      if (!response.ok) {
        throw new Error('City not found');
      }
      const data = await response.json();
      setWeather(data);
    } catch (err) {
      setError(err.message);
      setWeather(null);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>Weather App</h1>
      <div>
        <input
          type="text"
          value={city}
          onChange={(e) => setCity(e.target.value)}
          placeholder="Enter city name"
        />
        <button onClick={fetchWeather} disabled={loading}>Get Weather</button>
      </div>
      {loading && <p>Loading...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {weather && <WeatherDisplay weather={weather} />}
    </div>
  );
}

export default WeatherApp;

Step 4: WeatherDisplay Component
import React from 'react';

function WeatherDisplay({ weather }) {
  return (
    <div>
      <h2>{weather.name}, {weather.sys.country}</h2>
      <p>Temperature: {weather.main.temp}°C</p>
      <p>Weather: {weather.weather[0].description}</p>
      <p>Humidity: {weather.main.humidity}%</p>
      <p>Wind Speed: {weather.wind.speed} m/s</p>
    </div>
  );
}

export default WeatherDisplay;

Step 5: Handling Loading and Error States

Our app already shows loading and error messages. This is crucial for a good user experience.

Two Minute Drill

  • Weather app teaches API integration, async/await, and state management for loading/error.
  • Use `useState` to track input, weather data, loading, and error.
  • Fetch data inside an async function called on button click.
  • Always handle errors (network issues, invalid city).
  • Display loading indicators and error messages to users.
Practice ExercisesInterview QuestionsTake Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com