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

• Frontend Mentor - REST Countries API with color theme switcher solution
  • Table of contents
  • Overview
    • The challenge
    • Video preview
    • Links
  • My process
    • Built with
    • What I learned
    • 👷 Autor

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

Video preview

Preview_Project_REST_Countries_API.mp4

Links

• Live Site URL: Website Country Insights

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Axios - JS library
• React Router Dom - React library

What I learned

During the development of this project, I gained knowledge in several fundamental areas of front-end development with React:

• Consuming APIs with Axios: I learned how to make HTTP requests to external APIs using the Axios library, enabling dynamic interaction with external data.

   const getDatas = async () => {
   	try {
   		const response = await axios.get("https://restcountries.com/v3.1/all");
   		setData(response.data);
   	} catch (error) {
   		console.log(error);
   	}
   };
  
  useEffect(() => {
   getDatas();
  }, []);

• Working with routes using React Router DOM: I understood how to configure and manage routes in React, facilitating navigation between different components and pages of the application.

    const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<App />}>
      <Route path="/" element={<Home />} />
      <Route path="countrie/:id" element={<Countrie />} />
      <Route path="/*" element={<NotFound />} />
    </Route>
  )
  
    <button onClick={() => navigate(-1)}>Back</button>

• Utilizing specific React hooks: I explored the use of hooks such as useCallback and useEffect to optimize performance and control side effects, improving the organization and functionality of the code.

   const handleSearchChange = useCallback((e) => {
   setSearch(e.target.value);
  }, []);
  
  const handleRegionChange = useCallback((e) => {
   setRegion(e.target.value);
  }, []);

👷 Autor

Development

_{Thalles Augusto}

Make with ❤️ by Thalles Augusto 👋🏽 Contact me!