Weather API - React Project Tutorial

Part 1

🌦 Create Weather API Account

🌤

We will use: WeatherAPI.com
Website: https://www.weatherapi.com/

🔹 Step 1 — Create Account

Open https://www.weatherapi.com
Click Sign Up
Register using Gmail
Verify your email
Go to Dashboard

🔹 Step 2 — Copy API Key

Inside the dashboard you will see:

👉 Your API Key

Copy it.

Example (not real):

API Key Example

1234567890abcdef

⚠ Keep it secret. Never share your API key publicly.

Part 2

🔐 What is API Key?

API Key = Secret Code

It tells WeatherAPI:

👤

Who is requesting data

Identifies you as the user making the API call.

📊

How many requests used

Tracks your usage against the free tier limit.

✅

Whether access is allowed

Validates your permission to access the API.

🚫 Without API key → API will not work.

Part 3

🌍 Test API in Browser

Use this format in your browser address bar:

Browser URL

https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Chennai

🔄

Replace YOUR_API_KEY with your actual API key, then press Enter.

You will see a JSON response like this:

JSON Response

{
  "location": {
    "name": "Chennai"
  },
  "current": {
    "temp_c": 32,
    "humidity": 60
  }
}

✅ If you see the JSON response, that means your API works correctly!

Part 4

⚛ Create React Project (Using Vite)

Open your terminal and run:

Terminal

npm create vite@latest weather-project

📝

When prompted, select:
▸ Framework: React
▸ Variant: JavaScript

Then run the following commands:

Terminal

cd weather-project
npm install
npm run dev

🚀 Project runs at: http://localhost:5173

Part 5

📦 Install Required Packages

Inside the project folder, run:

Terminal

npm install axios

📡

Axios is a popular HTTP client library used to make API calls from your React application.

Part 6

📁 Create .env File (Important)

Inside the project root directory, create a new file named:

.env

Add the following content:

.env

VITE_WEATHER_API_KEY=your_api_key_here

⚠ Replace your_api_key_here with your actual API key from WeatherAPI.com. Save the file.

💡

The VITE_ prefix is required for Vite to expose environment variables to your app. Without it, the variable will not be accessible.

Part 7

🔌 Connect API in React

Open the file:

src/App.jsx

Replace its entire content with:

src/App.jsx

import { useState } from "react";
import axios from "axios";

function App() {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState(null);

  const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

  const getWeather = async () => {
    const response = await axios.get(
      `https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`
    );
    setWeather(response.data);
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Weather App</h1>

      <input
        type="text"
        placeholder="Enter city"
        onChange={(e) => setCity(e.target.value)}
      />
      <button onClick={getWeather}>Search</button>

      {weather && (
        <div>
          <h2>{weather.location.name}</h2>
          <p>Temperature: {weather.current.temp_c}°C</p>
          <p>Humidity: {weather.current.humidity}%</p>
          <p>Wind Speed: {weather.current.wind_kph} km/h</p>
        </div>
      )}
    </div>
  );
}

export default App;

🧠 What does this code do?

Code	Explanation
`useState("")`	Stores the city name the user types
`useState(null)`	Stores the weather data from API
`import.meta.env`	Reads the API key from `.env` file
`axios.get(...)`	Sends a GET request to WeatherAPI
`setWeather(response.data)`	Stores the response in state
`{weather && (...)}`	Shows weather info only when data exists

Save the file and restart your dev server:

Terminal

npm run dev

🎉 Now search any city → Weather data will display!

Part 8

🎨 Improve UI (Optional)

To enhance the look and feel, install these optional packages:

Terminal

npm install framer-motion recharts react-icons

✨

framer-motion

Adds smooth animations and transitions to your components.

📈

recharts

Create beautiful, responsive charts to visualize weather data.

🎯

react-icons

Thousands of icons to make your UI more expressive.

Part 9

🐙 Push to GitHub

📌

Prerequisite: Create a new GitHub repository first at github.com/new

Then run these commands in your terminal:

Terminal

git init
git add .
git commit -m "Initial weather project"
git branch -M main
git remote add origin https://github.com/yourusername/weather-project.git
git push -u origin main

⚠ Replace yourusername with your actual GitHub username.

💡

Make sure your .env file is listed in .gitignore so your API key is never pushed to GitHub!

Part 10

🌐 Deploy on Netlify

🚀

Go to: https://netlify.com

🔹 Deployment Steps

Login with your GitHub account
Click "Add new site"
Select "Import from GitHub"
Select your weather-project repository

🔹 Build Settings

Build command:	`npm run build`
Publish directory:	`dist`

🔹 Add Environment Variable

Key:	`VITE_WEATHER_API_KEY`
Value:	Your actual API key

Click Deploy.

🎉

Your weather project is LIVE!
You will get a URL like: https://random-name.netlify.app

🏁 Quick Summary

Part 1 — Created WeatherAPI account & got API key

Part 2 — Understood what an API Key is

Part 3 — Tested the API directly in browser

Part 4 — Created React project using Vite

Part 5 — Installed Axios for API calls

Part 6 — Created .env file to store API key

Part 7 — Connected API in React App

Part 8 — Installed optional UI packages

Part 9 — Pushed code to GitHub

Part 10 — Deployed live on Netlify 🚀