Country-o-pedia

Country-o-pedia is a visually engaging Node.js/Express web app that lets users discover and learn about countries from around the world. With a dynamic UI, animated borders, and interactive buttons, it makes exploring country data fun and intuitive.

---

Table of Contents

• Features
• Demo
• Installation
• Project Structure

---

Features

• Homepage:
  Welcome message and a glowing, circular button prompt: "Click the glowing button to discover a new country!"
• Get Country: After clicking the button, the app fetches a random country by sending a GET request to the "https://restcountries.com/v3.1/all?fields=name,flags" API:

Example GET Response Snippet :

[
  {
    "flags": {
      "png": "https://flagcdn.com/w320/is.png",
      "svg": "https://flagcdn.com/is.svg",
      "alt": "The flag of Iceland..."
    },
   "name": {
      "common": "Iceland",
      "official": "Iceland",
      "nativeName": {
        "isl": {
          "official": "Ísland",
          "common": "Ísland"
        }
      }
    }
},
  ...
]

and displays its flag, names, and a table of native names.

• Discover More:
  Below the details of the country, there is a "Wanna know more countries? Click away 👉" prompt and button embedded to fetch another country.

---

Demo

In the project structure, navigate to "Country-API-Capstone2-demoVideo.mp4". The working and the code is explained here. (If the video is large to display, then download it raw)

Installation

Prerequisites

• Node.js (v14 or higher)
• npm

Steps

1. Clone the repository:

   git clone https://github.com/mansurahgithub/Country-API-CapstoneProject2.git
   cd Country-API-CapstoneProject2
   

2. Install dependencies:

   npm install
   

3. Start the server:

   node index.js
   

   or, for development with auto-reload:

   nodemon index.js
   

4. Open in your browser:

   http://localhost:3000
   

---

Project Structure

• public/: Contains static assets such as images and CSS.
  • images/: Stores image files (e.g., button graphics).
  • style.css: All custom styles for layout, animation, and responsiveness.
• views/: Holds EJS templates for server-side rendering.
  • index.ejs: The main template for displaying the homepage and country details.
• index.js: The entry point for your Node.js/Express server. Handles routes, API calls, and rendering.
• package.json: Lists project dependencies, scripts, and metadata.
• README.md: Documentation and usage instructions for the project.

- Made by Mansurah M