Country-Click gives you instant access to rich data about every country in the world. Browse an interactive SVG world map, click any country to reveal its details, or use the search bar to look up a nation by its English or official name. All data is fetched live from the REST Countries API v3.1.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.
Introduction
Learn what Country-Click is, how it works, and what data it surfaces for every country.
Quickstart
Set up a local instance of Country-Click in minutes with PHP and Tailwind CSS.
Interactive Map
Discover how the clickable SVG world map works and which countries are supported.
Search Countries
Search by English name or official country name and understand error handling behavior.
What You Get
Country-Click renders a full-screen interactive world map alongside a detail panel. When a user clicks a country or submits a search, the app queries the REST Countries API and displays:- Flag — PNG flag image sourced directly from the REST Countries API
- Common & Official name — e.g., “Germany” and “Federal Republic of Germany”
- Capital city — the primary capital
- Population — current population figure
- Languages — all official languages spoken
- Timezone — the primary timezone (e.g., UTC+01:00)
- Region — continent with a matching region illustration
Install Tailwind CSS
Run
npm install to install Tailwind CSS dev dependencies, then build the CSS output.Serve with PHP
Start PHP’s built-in web server from the
src/ directory and open the app in your browser.Architecture Overview
Understand the PHP MVC structure, controller responsibilities, and data flow.
REST Countries API
Details on the external API integration, endpoint used, and response fields.
Theming & Colors
Customize the brown-tone color palette and Tailwind CSS configuration.
Adding Countries
Extend the SVG world map with new country paths and click regions.