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.

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

My implementation:

• Users can get country location on google maps.
• User can click on a link that sends to wikipedia page.

• Solution URL: Frontend Mentor
• Live Site URL: Netlify

• React Hooks

• React-Routers

• React-icons

• axios

• TailwindCSS

• RESTCountriesAPI

• vite - npm create vite@latest react template

• React - JS library

• tailwindcss - CSS framework

• react-spinners - Spinners Components

• react-number-format - Component to format number

• react-lazy-load-image-component - Component to lazy load images.

Learned to configurate and use tailwindcss with react. Despite leaving the code with a bunch of inline classes, tailwind makes coding css more easier and faster with tailwind intelisense.

I`m proud of my Dark Mode:

const [darkMode, setDarkMode] = useState(theme === "dark" ? true : false);
	useEffect(() => {
		setTheme(localStorage.getItem("theme"));
		const htmlClass = document.documentElement.classList;
		if (darkMode) {
			htmlClass.add(theme);
			htmlClass.remove("light");
		} else {
			htmlClass.remove(theme);
		}
	}, [darkMode, theme]);

const { darkMode,setDarkMode } = useContext(Context);
	const handleDarkMode = () => {
		if (
			localStorage.getItem("theme") !== "dark" ||
			localStorage.getItem("theme") === null
		) {
			localStorage.setItem("theme","dark")
			setDarkMode(true)
		}else{ 
			localStorage.setItem("theme","light")
			setDarkMode(false)
		 }
};

	<button	onClick={handleDarkMode} className="flex flex-row bg-zinc-50 
	dark:bg-zinc-800 items-center align-middle justify-center rounded-md pr-2
	shadow-md text-sm font-light dark:text-zinc-50">
				{!darkMode ? (
					<FaMoon color="black" size="16px" className="mx-2" />
				) : (
					<FaSun color="white" size="16px" className="mx-2" />
				)}
				{darkMode ? "Light Mode" : "Dark Mode"}
	</button>

I need to get better at building layouts

Learn advanced css techniques

Learn advanced react hooks

Learn typescript

Learn Next.js

• How to lazy load images in react - FreeCodeCamp article

• Website - Raphael Machado
• Frontend Mentor - @rm0909