Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/Countries-WebPage/llms.txt

Use this file to discover all available pages before exploring further.

Country-Click is a PHP-based web application styled with Tailwind CSS that lets anyone explore information about every country on earth. The app offers two complementary interaction modes: you can click directly on an interactive SVG world map to select a country, or you can type a country name into the search bar at the top of the page and press Buscar. Either action fetches live data from the REST Countries API v3.1 and renders a rich information panel — no database, no authentication required.

Quickstart

Clone the repo and have Country-Click running locally in under five minutes.

Interactive Map

Learn how the clickable SVG map sends country names to the PHP backend.

Search

Explore the search bar flow from user input to rendered country data.

Architecture

Understand the MVC-style controller structure powering the app.

​
Data Displayed

When a country is selected — whether by clicking the map or using the search bar — the application displays the following fields sourced directly from the REST Countries API v3.1 response:
  • Common name — the everyday English name (e.g., “Germany”)
  • Official name — the full formal name (e.g., “Federal Republic of Germany”)
  • Flag — the country’s flag rendered as a PNG image
  • Capital — the primary capital city
  • Population — the current population figure
  • Languages — all official languages, listed as a comma-separated string
  • Timezone — the first timezone in the country’s timezone list
  • Region illustration — a decorative image corresponding to the country’s region (Africa, Americas, Asia, Europe, or Oceania)
Country names must be entered in English or using the country’s official name. For example, searching “Deutschland” will not return a result — use “Germany” or “Federal Republic of Germany” instead. The same rule applies to map clicks, which automatically pass the English xlink title of each SVG path.

​
Key Features

Country-Click ships a focused, dependency-light feature set grounded entirely in the source code:
  • Interactive clickable SVG world map — each country path has a .country CSS class and an xlink:title attribute; a JavaScript listener on click events dynamically creates and submits a hidden POST form with the country name
  • Text search by English name or official name — the navbar search field posts to index.php, where ApiConsumer::searchBar() reads the value and passes it to the API layer
  • Live data from REST Countries API v3.1 — all country information is fetched at request time via file_get_contents() to https://restcountries.com/v3.1/name/{name}; nothing is cached or stored locally
  • Flag image, capital, population, languages, timezone, and region — extracted from the JSON response by GetAttributesController, which provides dedicated getter methods for each field
  • PHP MVC-style controller architecture — ApiConsumer orchestrates the request flow, GetAttributesController handles data extraction, and GetNameController reads the map-click POST payload
  • Tailwind CSS with a custom brown-tone color palette — four custom color tokens (brown-super-hard, brown-hard, brown-medium, brown-low) extend Tailwind’s default theme via tailwind.config.js
  • Responsive layout for desktop and mobile — Tailwind utility classes (including md: breakpoint variants) adapt the navigation and map/info panel layout across screen sizes

Build docs developers (and LLMs) love

Get started for freeTalk to us