codinci / rest-countries

Solution to frontend mentor rest-countries challenge using Vue.js

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
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Desktop
• Mobile

Links

• Solution URL: Github
• Live Site URL: Vercel

My process

Built with

• Vue JS - JS Framework
• Font Awesome - Used for icons
• Axios - Http requests
• Rest countries- Countries API
• Vuetify - Style component framework
• Vue-router - Used for routing in vue3
• TypeScript - JS with syntax for types

What I learned

I learnt on Vue3 and its composition API and integrating typescript into the build process.

• Changing the vuetify default font family

@use 'vuetify' with (
  $utilities: yes,
  $color-pack: false,
  $body-font-family: 'Nunito Sans'
);

• Setting the different themes and theme colors

const vuetify = createVuetify({
  locale: {
    locale: 'en',
    fallback: 'fr',
    messages,
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        dark: false,
        colors: {
          surface: 'hsl(0, 0%, 98%)',
          background: 'hsl(0, 0%, 100%)',
          primary: 'hsl(200, 15%, 8%)',
          secondary: 'hsl(0, 0%, 52%)',
        },
      },
      dark: {
        dark: true,
        colors: {
          background: 'hsl(207, 26%, 17%)',
          surface: 'hsl(209, 23%, 22%)',
          primary: 'hsl(0, 0%, 100%)',
        },
      }
    }
  }
});

• Using vuetify's internationalization for a user to toggle between different languages and toggle theme

<script setup lang="ts">
import { ref,watch } from 'vue'
import { useTheme, useLocale } from 'vuetify'

const darkMode = ref(false)
const theme = useTheme()
const { t, current } = useLocale()


// Watch for changes in darkMode and update the theme accordingly
watch(darkMode, (newVal) => {
  theme.global.name.value = newVal ? 'dark' : 'light';
});

function changeLocale(locale: string) {
  current.value = locale;
}

const languages = {
  en: 'English',
  fr: 'French',
};

• Use of Suspense

<v-container class="pt-8 mb-8 pt-md-12 mx-md-14 mx-lg-24">
	<v-row class="d-flex justify-start pt-12">
		<v-btn class="px-8 ml-4" prepend-icon="fa-solid fa-arrow-left" @click="goBack">
			{{t('$vuetify.back')}}
		</v-btn>
	</v-row>
</v-container>

<Suspense>
	<CountryDetail/>
	<template #fallback>
		<div class="d-flex mx-2 mx-md-12 pt-8">
			<v-skeleton-loader
				class="d-flex-column d-flex-md-row justify-space-between"
				width="1600" type="card"
			></v-skeleton-loader>
		</div>
	</template>
</Suspense>

Continued development

• I would love to make more styling enhancements especially on loading states.
• A user to also be able to navigate to the details of the border countries under the country details page.

Useful resources

• Stack Overflow - This stackoverflow page helped me learn how to configure the font family in vuetify.
• Vuemastery - This is an amazing article which helped me finally understand suspense in Vue3 and how to navigate through async functions in my components.

Author

• Frontend Mentor - codinci
• Github - codinci