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.
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 } }));
}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
GETapi.apiverve.com/v1/weatherforecast?city=San%20Francisco
Query parametersVerificationFormat
No key required to try it. Get a key to use it in your app.
{
"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,
"forecast": [
{
"date": "2026-09-21",
"condition": "Sunny",
"maxtempC": 22.5,
"maxtempF": 72.5,
"mintempC": 13.3,
"mintempF": 56,
"avgtempC": 17.7,
"avgtempF": 63.9,
"maxwindMph": 4.7,
"maxwindKph": 7.6,
"avghumidity": 48,
"uv": 4,
"willItRain": 0,
"chanceOfRain": 4,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 0,
"totalprecipIn": 0,
"totalsnowCm": 0,
"avgvisKm": 10,
"avgvisMiles": 6
},
{
"date": "2026-09-22",
"condition": "Sunny",
"maxtempC": 22.8,
"maxtempF": 73,
"mintempC": 16.5,
"mintempF": 61.7,
"avgtempC": 19.7,
"avgtempF": 67.5,
"maxwindMph": 4.7,
"maxwindKph": 7.6,
"avghumidity": 63,
"uv": 3.9,
"willItRain": 0,
"chanceOfRain": 8,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 0.02,
"totalprecipIn": 0,
"totalsnowCm": 0,
"avgvisKm": 10,
"avgvisMiles": 6
},
{
"date": "2026-09-23",
"condition": "Overcast",
"maxtempC": 22.8,
"maxtempF": 73.1,
"mintempC": 14.1,
"mintempF": 57.4,
"avgtempC": 18.4,
"avgtempF": 65.2,
"maxwindMph": 15.7,
"maxwindKph": 25.2,
"avghumidity": 70,
"uv": 3.1,
"willItRain": 1,
"chanceOfRain": 76,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 5.97,
"totalprecipIn": 0.23,
"totalsnowCm": 0,
"avgvisKm": 9.9,
"avgvisMiles": 6
},
{
"date": "2026-09-24",
"condition": "Partly Cloudy",
"maxtempC": 18,
"maxtempF": 64.5,
"mintempC": 10.5,
"mintempF": 50.8,
"avgtempC": 14.3,
"avgtempF": 57.7,
"maxwindMph": 11,
"maxwindKph": 17.6,
"avghumidity": 64,
"uv": 3.5,
"willItRain": 0,
"chanceOfRain": 11,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 0.03,
"totalprecipIn": 0,
"totalsnowCm": 0,
"avgvisKm": 10,
"avgvisMiles": 6
},
{
"date": "2026-09-25",
"condition": "Sunny",
"maxtempC": 21.3,
"maxtempF": 70.3,
"mintempC": 12,
"mintempF": 53.6,
"avgtempC": 16,
"avgtempF": 60.8,
"maxwindMph": 6.5,
"maxwindKph": 10.4,
"avghumidity": 56,
"uv": 6,
"willItRain": 0,
"chanceOfRain": 4,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 0,
"totalprecipIn": 0,
"totalsnowCm": 0,
"avgvisKm": 10,
"avgvisMiles": 6
},
{
"date": "2026-09-26",
"condition": "Sunny",
"maxtempC": 22,
"maxtempF": 71.5,
"mintempC": 13,
"mintempF": 55.3,
"avgtempC": 17.1,
"avgtempF": 62.8,
"maxwindMph": 8.9,
"maxwindKph": 14.4,
"avghumidity": 62,
"uv": 6,
"willItRain": 0,
"chanceOfRain": 8,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 0,
"totalprecipIn": 0,
"totalsnowCm": 0,
"avgvisKm": 10,
"avgvisMiles": 6
},
{
"date": "2026-09-27",
"condition": "Overcast",
"maxtempC": 19.3,
"maxtempF": 66.8,
"mintempC": 12.8,
"mintempF": 55.1,
"avgtempC": 16.3,
"avgtempF": 61.3,
"maxwindMph": 6.9,
"maxwindKph": 11.2,
"avghumidity": 67,
"uv": 4,
"willItRain": 0,
"chanceOfRain": 36,
"willItSnow": 0,
"chanceOfSnow": 0,
"totalprecipMm": 0.32,
"totalprecipIn": 0.01,
"totalsnowCm": 0,
"avgvisKm": 10,
"avgvisMiles": 6
}
],
"forecastSummary": {
"rainExpectedOn": "2026-09-23",
"daysWithRain": 1,
"tempTrend": "cooling",
"tempTrendC": -2.1,
"maxChanceOfRain": 76
}
}
}