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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Getting started
  • Requirement
  • Npm start
  • Npm build
• Author
• Acknowledgments

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

• Demo: Preview here

• Semantic HTML5 markup
• CSS custom properties for dark/light mode
• Flexbox
• CSS Grid
• Mobile-first workflow with Tailwindcss
• React - JS library

I learned so many things in this challenge :

• create components and composable with ReactJs
• structure this challenge through Github Project kanban
• use svg as component
• lazy load card component on countries list
• manage env variable
• dark mode toggle

To improve this project, it will be nice to use Typescript and try unit testing for react component.

• VueJs developers guide to react - This helped me for multiple situations. I'm currently learning ReactJs and it was more easy to compare some behavior with VueJs.
• Object-fit - The documentation of TailwindCss is just amazing. I was faced with this problem very quickly for displaying flags.
• Heroicons - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

You need to create .env file with the following content :

REACT_APP_COUNTRIES_API_URL=https://restcountries.com/v3.1

This application is based on the latest REST COUNTRIES version, but you can change to v2.

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

• Github - Geminii
• Dev.to - Geminii
• Frontend Mentor - @Geminii

Thanks Frontendmentor for this really cool challenge ❤️