frontend mentor's REST Countries API

This is a frontendmentor.io project to build an application to design specifications that will look great on any device. This application pulls data from the REST Countries API and displays the countries using React and styled-components. The code and live application are hosted on github!

My Experience

Coding this application in React from scratch was a great learning experience. I am particularly proud of how the state is managed and how that translates into the user's experience. The app essentially makes one call to the API, when the program is loaded, and uses the array filter method to display the desired countries. This happens when the search field is used, when a region is selected, or a country is selected. And equates into a very responsive app that changes the data effortlessly.

I initially struggled with coding the switching the color theme, which I thought would be fairly easy. The mistake I made was trying to implement the theme the same way as the country data, but simply became too cumbersome to implement on the individual element level. Fortunately, using styled-components' ThemeProvider solved this problem elegantly.

Conclusion

Overall, I am very happy with how the application turned out. I am sure it can be improved, but it was a great learning experience that I intend to build upon.