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

Overview

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

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
You might also like...
All of my personal website indices.

Vue 3 + TypeScript + Vite This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 script setu

Simple-website - A website made with NuxtJS & TailwindCSS
Simple-website - A website made with NuxtJS & TailwindCSS

Demo You can see live at here Run Locally Clone the project git clone https://

Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays translucent boxes on your screen to guide your eyes while reading.
Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays translucent boxes on your screen to guide your eyes while reading.

Reading Ruler (beta version) Read better using a digital ruler. Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays tra

A simple scholar management app that helps owners manage their scholars.
A simple scholar management app that helps owners manage their scholars.

axiefy An open-source software that aims to help primarily on NFT Game Managers of Axie Infinity in order for them to conveniently manage and track th

Reads Hub is a simple platform (built with Django, Vuejs) for users who love to share their favorite books.

Reads Hub is a simple platform (built with Django, Vuejs) for users who love to share their favorite books.

Input alphabetic characters into a text box and add the letters together based on their place in the alphabet (a = 1, b = 2, etc.) and display if sum is prime
Input alphabetic characters into a text box and add the letters together based on their place in the alphabet (a = 1, b = 2, etc.) and display if sum is prime

Input alphabetic characters into a text box and add the letters together based on their place in the alphabet (a = 1, b = 2, etc.) and display if sum is prime. This project was completed as the technical challenge for a job interview.

Personal-website - My personal portfolio website, made using VueJS and the Pexels API

personal-website Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Pumba-dev-website - Pumba Dev Website Built with Vue and Rails
Pumba-dev-website - Pumba Dev Website Built with Vue and Rails

☕ Em Desenvolvimento 🚀 Pumba Dev Website Esta é minha primeira web page pessoal

Create a toxic-free and negativity-free platform for users to share their latest creation or idea
Owner
Abdullah Adel
Junior Computer Engineering Student at Cairo University
Abdullah Adel
A Vue web app that allows you to compare all countries of the world.

A Vue web app that allows you to compare all countries of the world.

null 6 Sep 3, 2022
Alphitter: A platform for user to share their life with their friends

Alphitter Alphitter is a platform for user to share their life with their friends 專案名稱 Alphitter Alphitter 是一個模擬Twitter的社交媒體平台,使用者可以於平台中,和自己的朋友分享生活。 L

Wei Kai 0 Dec 19, 2021
Create a pokedex web page containing pokemon listing, details and favorite pokemon page

pokedex-vue-assessment Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run

Saiful Afiq 0 Jan 6, 2022
EasySNCF - This project deals primarily with train stations in France, giving details and insights about each one of them

HMI - Data Visualization Use the app · Demo on Google Drive To install the app D

null 0 Jan 19, 2022
This app allows you to consult relevant information from Github users through their username, it is fully responsive and has light and dark themes that adapt according to your preferences.

This app allows you to consult relevant information from Github users through their username, it is fully responsive and has light and dark themes that adapt according to your preferences.

Javier Salcedo 4 Nov 18, 2022
A repo containing all code for all online courses. To be used mostly as a reference and/or workbench

Online Courses Workbench A repo containing all code for online courses. Mostly to be used as a reference and/or workbench (as I keep switching workspa

Lexx YungCarter 0 May 24, 2022
VUE Countries With Bootstrap

VUE Countries With Bootstrap CANLI UYGULAMA (http://manolya.online/countries/) Ülkeleri listeler, şehirlere göre spesifik arama gerçekleştirebilir. Ar

Alper Çöğürcü 0 Dec 8, 2021
Studying project - A Spring Boot API to store countries data in a MySQL DB, accompanied by its Vue.js app.

Screenshots See the screenshots here. Dependencies Java 11 Node.js <= 14 You can build locally and use the app without it, but it is meant to be used

Mao De Matos 0 Jan 17, 2022
Open Source website aiming to gather contact informations about french people wanting to help ukrainians seeking shelter outside their country

This is an Open Source website aiming to gather contact informations about french people wanting to help ukrainians seeking shelter outside their country.

null 15 Oct 19, 2022
A website for all the live youtube channels.

YT Live A list of live youtube tv channels. Why did I make this? A friend had a list of live youtube channels saved as a Google sheet and mentioned th

Fayaz Ahmed 13 Sep 20, 2021