Countries Finder (Theme switcher & lazy load).

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

Table of contents

• Overview
  • The challenge
  • Links
  • Videos
• My process
  • Built with
  • What I practiced
• 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

Links

• Live Site URL: countries-finder-ivanrice.vercel.app

Videos

Browser.mp4

Mobile.mp4

My process

Built with

• Lazy load with Intersection Observer.
• Mobile-first workflow
• Semantic HTML5 markup
• Flexbox for components.

What I practiced

• Made use of localStorage with redux in order to preload and store a theme

const getTheme = getLSThemeMode()
const INITIAL_STATE = {
  app: {
    themeMode: getTheme || 'darkMode',
    ...
  },
}

• Made use of custom hooks in order to handle the data

  const [loading, error, countries, getCountries] = useCountriesState()

• Redux: changed "switch" for a literal object in order to handle "reducers"

export const app = (state = INITIAL_STATE, action) => {
  return (
    {
      '@app/themeMode': { ...state, themeMode: action.payload },
      ...
    }[action.type] || state
  )
}

Author

• Website - ivanrice_
• Frontend Mentor - @Ivanricee
• Twitter - @ivanrice_