Countries of the World
An offline world map you can explore, colour, label and quiz yourself on.
Tap any country for its capital, population, currency and area, then test what you know in three quiz modes.
It runs on Android and as an installable PWA, in English and Russian.
English · Русский
https://github.com/user-attachments/assets/e5ef44ce-b29d-476e-8a84-5b25da123f4c
Contents
Highlights
| |
|---|
| 🗺️ 240 countries and territories | Natural Earth 1:50m outlines, so you can tap microstates like Liechtenstein, Monaco and the Vatican. |
| 🎨 Four fill modes | Flat, population, density, or your own quiz mastery. |
| 🏷️ Five label fields | Names, flags, capitals, currencies or population, decluttered by fit and collision. |
| 🔎 Forgiving search | Matches names, aliases ("Holland"), capitals ("Lima") and currencies ("kwacha"), with fuzzy fallback. |
| 🧠 Three quiz modes | Name the facts, find it on the map, or name it from the flag. Type your answer or pick one of four. |
| 📈 Mastery tracking | Remembers how you do on each country, colours the map by it, and builds practice rounds from your weak spots. |
| 🌐 English and Russian | The UI, every country name, capital and currency, and the grading rules. |
| 📴 Fully offline | No tile server and no API calls. Everything ships in the APK or the precached web bundle. |
Explore the map
Tap a country to highlight it and open its card: flag, official name, capital, population, currency and area. Tap the flag to see it full size. Tap the ocean to close the card.
Colour the world
Choose a fill mode from the pill in the top-left. Population and density use a log scale, one colour step per factor of ten, because a linear ramp would leave everything except China and India white. The legend always matches the map.
Mastery colours each country by how well you have answered it in quizzes. Grey means it hasn't been asked yet.
These screenshots use sample quiz history.
Label every country
Labels are real text drawn by MapLibre with a bundled font, so no glyph server is involved. Each label sits on a point inside the country (via polylabel), and a label only appears once its country is wide enough on screen to hold it.
Search
The search button opens a list of all 237 countries. Type a name, an alias, a capital or a currency, and picking a result flies the map to that country and frames it clear of the info card.
Quiz
Pick a mode, the facts you want to be asked, how you answer, and which regions to include. The setup is saved between sessions.
Three modes
Grading is forgiving about spelling but not about getting the wrong country. It accepts aliases ("Holland", "UK", "DRC"), typos (Damerau edit distance, so a swapped pair of letters counts as one mistake), and population within ±20% (68m, 1.4bn, 68 million). It rejects a near-miss that is actually another country's name: "Gambia" is not accepted for Zambia, and in Russian "Австрия" is not accepted for Австралия. A correct answer still shows the canonical spelling, so you learn it.
Type it, or pick from four
In multiple-choice mode each field gets four buttons: the answer, one wrong option from the same subregion, one from the same continent, and one from somewhere far away. No button is ever another correct answer for that country, so South Africa's three capitals can't appear as both right and wrong.
Retry what you got wrong starts a new round with only the countries you missed, and only the fields you missed for each one. If you missed France's currency and Germany's capital, the retry asks France its currency and Germany its capital, and nothing else.
Practice mode picks ten countries weighted toward your weak spots. Countries you have never been asked count as weakest, so on a fresh install practice also works as a tour of the world.
Two languages
English and Russian cover everything: the UI, all 250 country names, capitals, currencies and regions, plus Russian-aware grading. That means stemming for currency inflections (рублей → рубль), parsing 1,4 млрд, and a separate list of Russian country names so confusable near-misses are still rejected. On the web each language is its own static build with its own service worker: / and /ru.
It works with no network
This is the project's one hard constraint, and it drives almost every other decision.
- No tile server. Country outlines (1.6 MB GeoJSON) and facts are bundled into the JS.
- No glyph server. On Android, map labels render from a bundled Noto Sans TTF referenced as
asset:// through MapLibre's font-faces. On the web, maplibre-gl rasterises glyphs locally.
- No sprite URL. Flags are registered as map images at runtime:
<Images> on native, map.addImage on the web.
- No API calls. Population and facts were fetched once at build time and committed.
- On the web, a Workbox service worker precaches the whole app, all three flag tiers included, so the installed PWA keeps working with the origin unreachable.
Tech stack
The .web.tsx siblings handle the web/native split, so there are no Platform.OS checks in src/. Everything above the renderer is shared: the GeoJSON joins, colour ramps, label expressions, camera maths and hit-testing.
Getting started
npm install
# Web
npm run web # dev server (no service worker)
npm run build:web # production build: English -> dist/, Russian -> dist/ru/
npm run serve:web # serve dist/ on :4173
# Android (a development build, not Expo Go, because MapLibre is native)
npx expo run:android
npx expo run:android --variant release
# Checks
npm test # Jest
npm run typecheck
npm run test:e2e # Maestro, needs a running device
Data scripts. Their output is committed, so you only need these to change the data:
npm run enrich:data # offline: re-derive facts from world-countries
npm run labels:data # offline: label anchor points
npm run flags:data # offline: flag thumbnails and map icons from the committed masters
npm run build:data # needs network: full rebuild from Natural Earth + World Bank
The architecture notes, including the traps that cost real time and why each decision went the way it did, are in CLAUDE.md.
Data and credits
The same credits are in the app, on the About screen (the ⓘ button at the bottom-left of the map).
