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. A simple app that fetches countries data from an api and displays with extended features to filter by region,search countires by name and theme switcher between dark and light.

Table of contents

• Overview
  • Features
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

Features

Users are 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

Screenshot

Links

• Solution URL: Github
• Live Site URL: Live Site

My process

Built with

• Vite
• Mobile-first workflow
• React - JS library
• TailwindCSS - For styles
• Vite - Build Tool

What I learned

From This Challenge I have practiced using react API, theme toggleing in react and using tailwind css,Fetching adn Rendering data from API

const ThemeProvider = ({children}) => {
    const[isDarkTheme, setIsDarkTheme] = useState (false)

    const toggleTheme = () => {
        setIsDarkTheme((prevTheme) => !prevTheme)

    }
    const theme = isDarkTheme ? 'dark' : 'light';

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    )
};

Useful resources

• React Context API - This helped me to easily use React context with useContext hook. I'd recommend it to anyone still learning this concept.

Author

• Website - Feven Seyfu
• Frontend Mentor - @FevenSeyfu
• Twitter - @FevenSeyfu
• Linkedin - Feven Seyfu

Acknowledgments

I would like to thank FrontedMentor for providing the Design as a well assets for this challenge.