Weather app template

React
Vite

Current weather for any city: temperature, conditions, feels-like, wind, humidity and more.

A React app that shows the weather right now in any city. Type a city and get the place it matched, the temperature in Fahrenheit and Celsius, the conditions, feels-like temperature, wind, humidity, visibility, pressure and gusts. Use it as a weather widget, or lift the function to add conditions to a travel or events site.

What it does

Any city: Search by name and see which city, region and country it matched, so there’s no guessing which Paris.
Both units: Shows Fahrenheit and Celsius together, with the conditions in words.
The details: Feels-like, wind speed and direction, humidity, visibility, pressure and gusts in one card.
Keeps your key private: The page calls a Vercel function in api/, which holds the key, checks the input and limits each visitor to 10 lookups a minute.
Runs locally in one command: npm run dev serves the page and runs the api/ functions together, the same way Vercel does, with no CLI to install.

How it works

The Vercel function: it checks the city and calls Weather.

api/weather.js

import { guard, callApi, respond, fail, str } from '../lib/apiverve.js';

/** GET /api/weather?city=Montreal: current conditions for a city. */
export async function GET(request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  const city = str(new URL(request.url).searchParams.get('city'), 100);
  if (!city) return fail('Enter a city name');

  return respond(() => callApi('weatherforecast', { query: { city } }));
}

See the whole file on GitHub →

Deploy it

Get a free API key
The free plan includes 200 credits a month, no card needed. Create your key.
Deploy it
Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.
Open your app
Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the Weather API — the call this template makes

Request

GETapi.apiverve.com/v1/weatherforecast?city=San%20Francisco

Query parameters

citystring

Verification

Format

No key required to try it. Get a key to use it in your app.

Example

{
  "status": "ok",
  "error": null,
  "data": {
    "tempC": 13.3,
    "tempF": 55.9,
    "windMph": 4.7,
    "windKph": 7.6,
    "windDegree": 273,
    "windDir": "W",
    "pressureMb": 1022,
    "pressureIn": 30.17,
    "precipMm": 0,
    "precipIn": 0,
    "feelslikeC": 13,
    "feelslikeF": 55.3,
    "visKm": 16,
    "visMiles": 9,
    "gustMph": 7.2,
    "gustKph": 11.6
  }
}