Frontend Mentor "REST Countries API" challenge: a working API after the v3.1 shutdown

If you are building the Frontend Mentor REST Countries API with color theme switcher challenge, or any tutorial that fetches restcountries.com/v3.1, your list probably stays empty or spins forever. The old endpoints now answer with a deprecation message, not country data. This page shows what you will see, and how to get the same data back in a minute without changing your components.

What you will see

We checked on 18 October 2026. A request to https://restcountries.com/v3.1/all is redirected to a file that says "This API version has been deprecated", and that file is served with HTTP 200. So response.ok is true, await res.json() succeeds, and then data.map(...) throws because data is an object, not an array. Open the Network tab: if the JSON starts with {"success": false, this is the cause, not your code.

The three ways out

Keep your code, change the hostname

Countrydrop serves the retired v2 and v3.1 paths from the original open-source data (MPL-2.0), with the same JSON shape. It needs no key or sign-up for up to 1,000 requests a day per IP address, and sends CORS headers so it works from localhost and from a deployed Netlify, Vercel or GitHub Pages site. In the home page, detail page and search of the challenge, the only edit is the base URL:

const BASE = "https://pw-d20261017a29.plainwork-apps.workers.dev/v3.1";

// home page: only ask for what the cards show
const res = await fetch(`${BASE}/all?fields=name,population,region,capital,flags`);
const countries = await res.json();

// filter by region (the dropdown)
await fetch(`${BASE}/region/europe?fields=name,population,region,capital,flags`);

// search box
await fetch(`${BASE}/name/germany?fields=name,capital,subregion,tld,currencies,languages,borders`);

Use ?fields= on the list page. Without it the full list is about 860 KB; with the five card fields it is a fraction of that, and your page loads faster.

The detail page: border countries

The detail view needs the names of the border countries, but the API returns three-letter codes. For Germany, /v3.1/alpha/DEU?fields=borders returns {"borders":["AUT","BEL","CZE","DNK","FRA","LUX","NLD","POL","CHE"]} (read 18 October 2026). Turn them into names with one extra request, not nine:

const codes = country.borders.join(",");
const res = await fetch(`${BASE}/alpha?codes=${codes}&fields=name,cca3`);
const neighbours = await res.json();        // [{ name: { common: "Austria", ... }, cca3: "AUT" }, ...]

Islands such as Iceland have no borders key in some responses and an empty array in others, depending on whether you used fields. Write (country.borders ?? []) and the page works either way.

Two things to check before you submit

• Handle errors properly. Check res.ok and show a message when it is false. Searching for a name that does not exist returns 404 with a JSON body, which should show "no results", not a crash.
• Know the data is frozen. The population numbers are from the last v3.1 release, so they are good for a UI exercise, not for a report. If you need current figures, use a maintained source.

Already have a repository full of old URLs?

Paste your code into the free URL fixer. It rewrites every restcountries.com/v2 and /v3.1 URL in your browser (nothing is uploaded), and the API reference lists every endpoint with a try-it box. The free tier is meant for learning and small projects; a server that calls the API on behalf of many users should use the $4/month key. Countrydrop is independent and is not affiliated with REST Countries or Frontend Mentor.