What you'll build

A weather application with React that consumes the OpenWeatherMap API. You'll be able to search any city and see current temperature, humidity, weather condition and weather icons in real-time. You'll learn to work with external APIs, handle API keys securely, and display dynamic data in a responsive interface.

Recommended API

OpenWeatherMap - Free up to 1000 calls/day

Step 1: Get API Key

Create account at openweathermap.org
Go to API Keys
Copy your key

Step 2: Ask an AI for the app

I need a weather app in React that:
- Searches city by name
- Shows temperature, humidity, condition
- Uses OpenWeatherMap API
- Has weather icons
- Is responsive
- Uses Tailwind CSS

The API key comes from VITE_WEATHER_API_KEY.

Give me the complete code.

Step 3: Configure the key

Create .env:

VITE_WEATHER_API_KEY=your-api-key

Typical code

const API_KEY = import.meta.env.VITE_WEATHER_API_KEY

async function getWeather(city: string) {
  const res = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
  )
  return res.json()
}

If something failed

Error	Cause	Solution
`401`	Invalid API key	Check the key
`404`	City not found	Check the name
CORS	Direct call	Use proxy or backend

Next step

→ Web Calculator — UI logic

Weather App

📋 Suggested prerequisites