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.

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

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

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

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

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>
    )
};

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

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

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