Frontend Mentor - REST Countries API with color theme switcher solution

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

Live: https://rest-countries-api-eosin-one.vercel.app/#

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

Overview

The challenge

• 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

Screenshot

Links

• Solution URL: Github Repository
• Live Site URL: Rest Countries API

My process

Built with

• Vue 3 - JS library
• Bootstrap - UI library
• Pinia - The Vue Store
• Axios - promise-based HTTP Client
• SCSS - css extention language

What I learned

• Difference between composition api and options api
• Using pinia for state management

Author

• Frontend Mentor - @mihalidis
• Twitter - @miihalidis

Acknowledgments

Thanks to Gizem who is inspired me and motivated me to learn new things

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build