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

Light Home Page

Dark Home Page

Country Details Page

Light Details Page

Dark Details Page

Responsive

Mobile Home Page

Mobile Details Page

Preview

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