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.

By the end of this guide you will have a fully functional local instance of Country-Click running in your browser, with the interactive SVG world map responding to clicks and the search bar returning live country data. All you need is PHP, Node.js, and an internet connection — there is no database to configure, no environment variables to set, and no build step required unless you plan to modify styles.
1

Clone the repository

Clone the Country-Click repository from GitHub and move into the project directory:
git clone https://github.com/AndresLopezCorrales/Countries-WebPage.git
cd Countries-WebPage
2

Install dependencies

The only development dependency is Tailwind CSS v3. Install it with npm:
npm install
The compiled stylesheet (src/output.css) is already committed to the repository, so this step is only necessary if you plan to modify styles. If you are just running the app as-is, you can skip straight to starting the PHP server.
3

Build CSS (optional)

If you have modified any PHP templates, HTML, or JavaScript files and want Tailwind to pick up new utility classes, run the build watcher. It monitors all files matching src/**/*.{html,js,php} — the same content paths defined in tailwind.config.js — and writes the compiled output to src/output.css:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Remove --watch for a one-time build instead of a continuous watcher. Leave this terminal session open while developing so your style changes are picked up automatically.
4

Start the PHP built-in server

Move into the src/ directory — this is the document root — and start PHP’s built-in web server:
cd src && php -S localhost:8000
Open http://localhost:8000 in your browser. You should see the Country-Click navbar and the interactive SVG world map.
PHP 7.4 or higher is required. The app calls the REST Countries API using PHP’s built-in file_get_contents() function, which requires the allow_url_fopen directive to be enabled in your php.ini. Verify it is on by running:
php -r "echo ini_get('allow_url_fopen');"
The output should be 1. If it prints 0, see the Installation guide for instructions on enabling it.

​
Try It

Once the server is running, explore the app with these two interaction modes: Click the map — click any country on the SVG world map. Try France, Brazil, or Japan. The JavaScript listener captures the xlink:title of the SVG path, submits a hidden POST form, and the PHP backend fetches and renders that country’s data panel instantly. Use the search bar — type a country name in English into the search field in the top navigation bar and press the Buscar button. For example, type Spain and press Buscar to see Spain’s flag, capital Madrid, population, official languages, timezone, and region.
Country-Click requires an active internet connection at all times. Country data is fetched live on every request from https://restcountries.com/v3.1/ — nothing is stored locally or cached between sessions.

Build docs developers (and LLMs) love

Get started for freeTalk to us