Where in the world

Where in the world is a frontendmentor challenge: https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca

My Solution

https://sage-cat-7298ba.netlify.app/

The challenge

User 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

What I learned

• Styled components (custom components / ThemeProvider / GlobalStyle)
• Dark Mode and light mode toggle
• Transfering the whole app with plain CSS to styled Components
• Basics of React Router
• Saving state to localStorage
• Custom hooks
• React Lazy and suspense to load important components first.

Continued development

I would like to create these types of projects with more basic git workflow in mind. The problem I had with this project was that I made huge changes at once. So there is no commit history with clear understanding of what was added and why.

Also I added Styled Components too late so it took time to transfer the whole page from CSS.

Built With

• React
• Styled Components
• React Router
• React Lazy, Suspense
• Axios
• https://restcountries.com/ REST Api

Author

• LinkedIn https://www.linkedin.com/in/joa-leitola-478515212/