Country Explorer Panel

API WorkflowsIntermediate

Model an API-backed search panel that builds a request URL, normalizes records, and prepares card data for rendering.

This Challenge

Challenge brief

A dashboard needs a country search panel that shows normalized cards and a clean request URL before the real backend is connected.

Target outcome

Build one async function that returns the request URL, normalized records, and card-ready data for the UI.

Deliverables

Build a search URL with the encoded query string.

Map the raw API-like records into consistent card objects.

Return summary data the view can render directly.

Handle empty results without special casing in the UI.

Acceptance checklist

The search URL is encoded correctly.

Each country card exposes a stable id, title, region, and population label.

The function returns empty arrays instead of nulls for missing results.

The result object is safe for a UI renderer to consume immediately.

Project Workspace

Build the challenge in one focused editor

Use the starter code, run the checks, and compare your structure with the solution notes only after you have attempted the project yourself.

API Workflows45 minIntermediate

Project editor

Build the challenge in JavaScript or TypeScript, then run the current workspace checks against the compiled output.

28 lines

JavaScript mode runs directly in the current project runner.

Workspace checks

Search for 'ind'

Check

Search should return India and Indonesia with normalized labels.

Input: ["ind"]

Expected: {"requestUrl":"/api/countries?search=ind","totalResults":2,"cards":[{"id":"india","title":"India","region":"Asia","populationLabel":"1,428,000,000 people"},{"id":"indonesia","title":"Indonesia","region":"Asia","populationLabel":"277,500,000 people"}]}

Search for 'fin'

Check

Narrow search should keep only Finland.

Input: ["fin"]

Expected: {"requestUrl":"/api/countries?search=fin","totalResults":1,"cards":[{"id":"finland","title":"Finland","region":"Europe","populationLabel":"5,600,000 people"}]}

Run output

Run the project to inspect automatic checks and console output.

Project review

Inspect the project solution like a senior reviewer would, with correctness, structure, and maintainability feedback.

Run the review after or before the code runner. If test results are available, the review will factor them into the feedback as well.