REST Countries API with color theme switcher

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. The challenge was to integrate with the REST Countries API to pull country data and display it like in the designs. This project was built to practice Vue.js and GitHub flow.

Live Site URL: https://vue3-rest-countries-api.vercel.app/

Features include:

• Loading animiation before API request completes
• Colour theme switchter (Dark Mode)
• Search bar that automatically filters results
• Dropdown filter to filter results by continent
• Border country links to other countries
• A back button which is based on user history
• Repositories pattern for api
• Dockerize App

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project Setup

pnpm install

yarn

npm i

Compile and Hot-Reload for Development

pnpm dev

yarn dev

npm run dev

Type-Check, Compile and Minify for Production

pnpm build-check

yarn build-check

npm run build-check

Compile, Build a docker image, and run

Install docker first if not installed - one time

brew install docker

Run Docker if not running (macos)

open --background -a Docker

docker build -t my-app .

docker run -d -p 3000:3000 --env-file config/.env my-app

Open browser to: http://localhost:3000