Project Summary: Random Country Fact Generator

As part of the React course I’ve been taking on Udemy, it introduced me to the REST Countries API (and how to access APIs with fetch, etc). Since finding out how easy it is to get data from an API like that, I knew I needed to create a project with it for some unguided learning.

I’ve got a few ideas for apps that will use the API, but I thought I’m best starting with the smallest, most straightforward one first.

Check it out here (and the code here).

What is it and what does it do?

Take a wild guess what the Random Country Fact Generator does?

It’s not a trick question; when you click the “Generate Fact” button, the app will display a new fact about a random country. Examples include the population number, language spoken and UN membership status.

How was it built?

It was built with React using Create React App as a starting point.

There are two main components to the app:

• App.js – This component essentially does everything. It broadly breaks down into two things:
  • On initial page load / component render, it fetches all country data from the REST Countries API and stores it in the countryData state.
  • After that fetch, and every time a user clicks the “Generate Fact” button, we call the generateFact() function. This function selects a random country from countryData and then selects a random fact from an array of ‘templates’, injecting the country-specific data where appropriate using template literals.
• FactCard.js – This component simply renders the fact contents. There’s no logic in here. Nothing.

CSS is handled in a single, separate App.css file.

It took around 4.5 hours to build in its current form (as of May 12, 2022).

What did I learn?

I spent a lot of time on getting the order and structure of things right in relation to the initial API call. I was an experiencing an issue where I was calling generateFact() too quickly after the API call and the data hadn’t yet been set to the state so, when it came to using the country data to build the fact, there was no data there to choose from and it was throwing an error. I took me a while to realise that I could split that up into two steps and make use of the useEffect() hook for both, with the fact generation one relying on countryData being set.

I also caught myself breaking the cardinal rule of Don’t Repeat Yourself (DRY) when creating the different fact template strings. In each string I referenced the country name and repeatedly used countryData[countryNum].name.common. After some finicky copy-pasting across to each new fact I added, I realised I could just store that in a const and from then on just reference countryName. Voilá!

What’s next?

This was intentionally simple, so I’m hesitant to improve / extend it much further, but if I did come back to it I would consider doing the following:

• Make it mobile-friendly.
• Handle the different size flags more gracefully. At the moment a different-sized flag (from the previously-displayed flag) causes a layout shift.
• Add a couple more fact templates.
• Improve the visual styling. Not sure about the green…