A simple responsive website that displays all of the countries and their details

by Vue.js Examples

Countreez

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Live Site URL: https://countreez.vercel.app/

Overview

The challenge

Users should be able to:

  • See all countries from the API on the homepage
  • Search for a country using an input field
  • Filter countries by region
  • Click on a country to see more detailed information on a separate page
  • Click through to the border countries on the detail page
  • Toggle the color scheme between light and dark mode (optional)

Screenshots

Home Page

Country Details Page

Responsive

Preview

Built with

  • Vue – JavaScript Framework
  • Sass – For styles

Project setup

Clone the project

git clone https://github.com/abdullahalshawafi/Countreez.git

Install the needed dependencies

npm install

Start the development server

npm run serve

The website will start running at http://localhost:8080

Build the project for production

npm run build

GitHub

View Github