REST Countries API with colour themes switcher using React
Design comparison
Solution retrospective
I'm proud of the fact that I was able to complete the project without creating a complicated solution and also commenting a lot in the code which helped in reinforcing my learning. What I will do differently next time is to use react context API to handle the theme switch toggle ( because it's an app wide state ) instead of lifting state up and down through various components.
What challenges did you encounter, and how did you overcome them?A. Problem - In the problem statement, the pictures in the desktop and mobile versions showed the border countries being represented by their names but in the API the border countries where represented by their Alpha3Code. This was troublesome for me because I was using the country name to navigate to the border countries details page.
Solution - After carefully reading the API, I decided on using the Alpha3Code key for the navigation since it matches the border country's name.
B. Problem - The current rest countries API is in version 3.1 as opposed to that of the data.json which is version 2 ( I found this after several trials and errors ). This was problematic because there are differences between the v3.1 and v2 and I first of all used the data in the data.json() file ( which matches v2 ) to build the application.
Solution - I reverted manually to version 2 for the API to build the application.
C. Problem - Some key value pairs are not complete ( values not included ) and this generated errors for me in the details page.
Solution - I rendered the values conditionally. If the values are present they're rendered but if not I replace them with a 'not included' text.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord