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. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

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)

Screenshot

Links

• Solution URL: Github
• Live Site URL: Vercel
• Frontend Mentor Profile: tenderking

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Nuxt 3 - Vue framework
• Sass - CSS preprocessor

What I learned

During this project, I learned how to effectively use Nuxt 3 for server-side rendering and static site generation. I also improved my skills in using Sass for styling, which allowed for more organized and maintainable CSS. Additionally, implementing the color theme switcher deepened my understanding of state management in Vue.

import type { Country } from '~/types/Countries'
/* Reactive Variables */
const regionSelected = ref<string>('')
const searchQuery = ref<string>('')
const BASE_URL = 'https://restcountries.com/v3.1'
const nuxtApp = useNuxtApp()

const url = computed(() => {
  if (regionSelected.value) {
    return `${BASE_URL}/region/${regionSelected.value}`
  }
  else if (searchQuery.value) {
    return `${BASE_URL}/name/${searchQuery.value}`
  }
  else {
    return `${BASE_URL}/all`
  }
})

/* Fetch Data */
const { pending, data } = await useFetch<Country[]>(url, {
  headers: {
    Accept: 'application/json',
  },
  getCachedData(key) {
    return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  },
})

/* Watchers */
watch(regionSelected, () => searchQuery.value = '')
watch(searchQuery, () => regionSelected.value = '')
onMounted(() => {
  document.documentElement.scrollTop = 0
})

Here the data will get fetch only if the url changes. otherwise it will keep the data in cache. The watchers check if the select button or text input have been chaned.

Useful resources

• Nuxt Documentation - This was an invaluable resource for understanding the framework and getting started with the project.

Author

• Frontend Mentor - @tenderking