abdullahalshawafi / countreez

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

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/

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Preview
• Built with
• Project setup

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