Stop 14 · Payments & Third-Party IntegrationsTopics · 4/6

Third-Party APIs

Part of the Full Stack Developer Roadmap

In short

Weather, maps, SMS, currency rates: you'll rarely build these yourself. The skill is calling them from your backend with the key hidden, a timeout set, and a cache to avoid paying twice.

Integrating external services (maps, weather, payments, AI) into your full-stack app — usually calling them from your backend to keep API keys secret.

The blob character talks on a landline phone behind a chemist counter with shelves of medicine boxes.

Think of it like this

The chemist and his distributor

You ask the chemist for a medicine. He calls his distributor on his own account; you never get his account number. If the distributor doesn't pick up, he says 'come back in an hour' instead of keeping you waiting forever. Your API is the chemist, and the third-party service is the distributor.

Watch it happen

Calling a weather API safely

Browser

Your API

Redis cache

Weather API

GET /api/weather/pune

1/6The browser asks your API, not the provider. It never sees the provider's key.

The big ideas

What you need to know

Keys stay on the server

Call paid or secret APIs from your backend. A key in frontend code can be copied and used up by anyone.

Always set a timeout

A slow provider shouldn't freeze your API. Abort after a few seconds and return a friendly error.

Cache the answers

Many providers limit or charge per request. Cache results you can reuse for minutes or hours.

Wrap and validate

Put each provider behind your own small module and check its response shape, so their changes don't silently break you.

See it in code

Walk through the code

1const WEATHER_URL = "https://api.example-weather.com/v1/current";2 3export async function getWeather(city: string) {4  const cached = await redis.get(`weather:${city}`);5  if (cached) return JSON.parse(cached);6 7  const url = `${WEATHER_URL}?city=${encodeURIComponent(city)}&key=${process.env.WEATHER_API_KEY}`;8  const res = await fetch(url, { signal: AbortSignal.timeout(3000) });9  if (!res.ok) throw new Error(`Weather provider returned ${res.status}`);10  const body = await res.json();11  const weather = { city, tempC: Number(body.temp_c), summary: String(body.condition) };12 13  await redis.set(`weather:${city}`, JSON.stringify(weather), { EX: 600 });14  return weather;15}

1/4A cache hit returns instantly and costs nothing.

api.example-weather.com stands in for any real provider. Check its docs for the actual URL, auth style and field names.

Save yourself the pain

Common mistakes

Oops

Calling the provider straight from React with the key in a VITE_ variable.

Do this instead

Route the call through your backend so the key stays secret and you control caching and limits.

Oops

Letting a provider's error crash your whole page.

Do this instead

Catch it, log it, and show a fallback like 'weather unavailable' while the rest of the page works.

Your mission

Wrap a public API

~30 min

Quick check

Why call a paid weather API from your backend instead of from React?

Go deeper

1Integrate one public third-party API into a project, calling it from your backend.
2Handle the third-party API being slow, rate-limited, or temporarily down gracefully.
3Never call a third-party API directly from the frontend if it requires a secret key.