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

Overview

The challenge

Users should be able to:

• See all countries from the REST COUNTRIES 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

• Live Site URL:

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vite - Front-end build tool
• React - JS library
• React Router - Client side routing
• TanStack Query (FKA React Query) - JS library for data management
• Tailwind - CSS Framework

What I learned

During the development of this project, I gained valuable experience in both UI design and implementing advanced functionalities:

• Light/dark theme with Tailwind: Learned to implement a responsive light/dark mode using Tailwind's dark variant. I also created a custom hook to toggle themes and persist the user's preference in local storage.
• Routing & Loader Functions: Explored React Router, following their official tutorial and documentation to implement client-side routing and utilized loader functions to fetch and prepare data for the details country page;
• URL Params: learned how to work with URL parameters to save the page data state, like the region filter;
• Combobox pattern: Implemented combobox pattern for an accessible search bar, where the user can navigate it using the keyboard keys and have proper audio description.
• React ref and React Key events: These concepts were used to implement the keyboard interactions for the search bar.
• Debounce: utilized the debounce technique to optimize the search input since it reduces the amount of fetch requests;
• Infinite scroll: Implemented it on the main page to reduce the amount of components, especially image elements, improving performance.
• React Query: Gained experience using React Query for efficient data fetching and caching, improving the application's performance and state management.

These learnings enriched my skills in creating modern, user-friendly web applications while learning more about performance, accessibility, and state management.

Continued development

This project still has room for improvement, especially in performance. I intend to learn how to preload images in React to reduce the First Contentful Paint and dive deeper into the Combobox pattern to improve accessibility and fix some issues present in the one implemented in this project.

For the following projects, I'll focus on learning more about performance, core vitals, testing, and NextJs.

Useful resources

• Building a theme switch component
• Why You Need React Query
• Consumo de APIs RESTful no React da maneira certa - Decode #009
• Easy and more consistent layouts using subgrid
• You can't do this without subgrid
• React Query meets React Router -Data Library Integration - React Router
• Como gerenciar estados de paginação usando o useQuery
• Você não deveria usar estados do React pra TUDO! (URL State)
• Accessible site search with combobox suggestions
• How to Create Infinite Scrolling in React Using the Intersection Observer API
• useLocation - React Router Dom
• How to write the correct type for useLoaderData()? (Typescript)
• Accessible Loading Indicators—with No Extra Elements!
• Learn Debounce And Throttle In 16 Minutes
• Combobox Pattern - ARIA
• React Custom Hooks: useDebounce
• React-router app works in dev but not after Vercel deployment

Author

• Frontend Mentor - AnaCarolina