Around the World

Problem

Public country-data APIs return rich, deeply nested records but most frontends that consume them feel like dumped JSON tables. I wanted to build the explorer I'd actually want to use — fast filter by region and currency, clean per-country detail pages, and a layout that doesn't fight against the natural shape of the data.

Approach

Single-page React app routed with React Router: a list view with region/currency filters drives a detail view via dynamic params. Country data is fetched once and held in component state, then filtered client-side — fast enough at this dataset size that paginating or virtualising would be premature. React Select handles the currency/region pickers because the default browser <select> doesn't search-as-you-type and the list of currencies is long.

Stack & rationale

• React Router
  Standard client-side routing for the list → detail flow. Keeps URLs shareable (linking directly to a country's page works on refresh).
• React Select
  Searchable, multi-select-capable dropdowns. Native <select> doesn't filter as you type and handles long currency lists poorly.
• Tailwind CSS
  Country cards have consistent spacing and a hover state that's one utility class away — no need for a dedicated card stylesheet.
• Fetch + React state
  Dataset is small enough that filtering in memory beats a query layer; React Query would have been over-engineering for a single endpoint.

Highlights

• ▸Filter countries by region and currency simultaneously; filters compose without page reloads
• ▸Dynamic country detail routes (`/country/:code`) — refresh-safe and bookmarkable
• ▸Region + currency picker uses searchable dropdowns instead of native selects
• ▸Responsive card grid that adapts from 4 columns down to 1 cleanly