I challenged myself to complete an “Advanced” level challenge titled “REST Countries API” from Frontend Mentor in just 3 days… and I did it! It was challenging, but I was not feeling super pressured as I feel like I was doing enough work for each day to complete the project within the time limit I set by myself. ChatGPT also helped me in a lot of ways which boosts my productivity. The link to my project is available below:
The app might be broken in the future as the API used for this project is shutting down by the end of May 2023.
Here’s the breakdown of what I did to complete this project:
In the morning, I started my day by posting a blog to mark the start of this project. I already did write some of the content on previous days so all I need to do is just post it.
Right after that, I plan my tasks on the Jira board. I don’t really have to think of the tasks on my own as Frontend Mentor already listed out the main user requirements which I can just copy-paste to my Jira board. I also added 2 tasks on my own which are responsive layout and deployment tasks.
Requirements from Frontend Mentor README file
Tasks extracted to Jira Board
I began downloading the resources for the project from Frontend Mentor and began analyzing the design files. I want to make the app lightweight, so I just use create-react-app instead of using Next.js.
Design reference from Frontend Mentor resource folder
I installed Tailwind on my React project following the instructions from the official documentation. Frontend Mentor also gives you a style-guide file that contains the color and font used for the project. I translated those styling to my tailwind.config.js file.
Content snippet from style-guide.md
Content snippet from tailwind.config.js
I also need to install the font from Google Fonts and paste the link to public/index.html.
Importing font from Google font
I ended day 1 by writing the code for the Header, SearchBar, and FilterByRegion components. These components are visual only for now and do not have any functionality for now.
Header components
I like finish all the design on mobile view first, then modify them for desktop view when I am finish with everything (on the mobile view).
I start working on the first task from the Jira board which is to show all the countries on the homepage. I can see that each country is encapsulated in a rectangle with some information about the country like the population, region, and capital. So I created a component called CountryCard.jsx for each country. This component will have an input of the country that contains the population, region, and capital information.
Homepage from design file
I then create another component called CountryList which loops through each country and passed that information to the CountryCard component. For the data, I just used a local JSON file that I downloaded from https://restcountries.com/ that returns all the countries’ information beforehand. I used a local JSON instead of calling API because I feel like an API call is too big to be called for every request (the JSON file is 1 MB which is about 25k lines of JSON). And here’s the result.
Homepage from my project
Now that I have all the countries listed on the homepage, I can start writing the code to make the search and filter work. I followed a YouTube tutorial for the search bar and used a UI component library called headless UI for the dropdown. I combined both to make it work simultaneously with the help of ChatGPT (you can filter by region, then filter again by search, and vice versa). So that’s 3 tasks completed in less than 3 hours.
🌎 Search Filter in React JS - Filter Through Results - YouTube
🌎 Menu (Dropdown) - Headless UI
Filter by search and Region simultaneously
The next task is to have detailed information for a country when the card is clicked. To achieve this, we need to have a dynamic URL for each country page. This can be done by using a routing library called react-router-dom.
I have worked on routing before on NextJS (which is the website you are currently on) and I realized that the routing method that NextJS use is different from React. NextJS has this special file naming that is [id] that you can use to create dynamic routes which I thought was a feature that comes from React.
For this project, I followed this YouTube tutorial which is very similar to this project as it displays a list of games from API, and each game has its own page.
🌎 How To Create Dynamic Pages in React - YouTube
I managed to make the dynamic URL work after following the tutorial. Each country will have /country/[country-name] in its URL.
On Day 2, I only managed to make the dynamic URL work, but I have not worked on the components UI completely. I quickly worked on the UI. For the data, I used the API from https://restcountries.com/ that uses the country name and returns the information for that country only. This way, I can get the most up-to-date information about that country. Each API call only returns data for 1 country, so I feel like this solution is feasible in contrast to using a local JSON like I did for listing all the countries.
One challenging thing for this task is to extract the information that I want to display. What I meant by that is extracting data from a JSON file can be difficult sometimes especially when it has a lot of nested structures with different keys. For example, a country may have a different native name:
JSON structure for nativeName
All I want is the 'common' native name but the JSON having different keys makes it difficult to extract the common native name. With the help of ChatGPT, I managed to get the information that I want to extract. This problem applies to the currencies as well and the solution is also similar.
Getting native name from JSON
Country page for Brunei
This task is also one of the challenging tasks of this project. Why? Because the data looks like this:
border data from JSON
I want the border to display the full name of the country but in the JSON file, it only has the abbreviated version. With this, I need to create a function that takes in the abbreviated country name, finds the abbreviated country name in the JSON file of all countries, and returns its full name.
Very nice illustration of how I get the full name of a country from the abbreviated version
Here is the result. It is also clickable and will redirect the user similar to clicking the card from the homepage.
List of Border Countries
Working with dark themes in Tailwind is easy. To implement it, add the className='dark:bg-black-500' attribute to your components. Use the useState hook in React to manage the current theme, and the useEffect hook to apply the correct CSS class to the documentElement based on the selected theme.
Code snippet of using dark mode with Tailwind
I followed a YouTube tutorial for this as well.
🌎 Tailwind CSS Dark Mode | React App Theme Switcher - YouTube
Here's the result:
Dark mode and Light mode
When working with Tailwind, I like to create everything on the mobile screen first, then move my way up to the desktop screen. This can easily be achievable by adding the md: breakpoint on className. So only classes that are put in the md: tag are applied to the desktop screen and everything else is applied for both mobile and desktop. This is how it looks on the desktop screen. I used the grid for 4 columns in the desktop version and the grid for 1 column in the mobile version.
Desktop mode has 4 columns
I usually deploy my Frontend Mentor app on GitHub pages. It appears that the routing library that I used is not compatible with GitHub pages, so I decided to try another hosting platform called Netlify. It is surprisingly easy to host your app on Netlify. All you need to do is sign up on Netlify using your GitHub profile and after that, the website will guide you with useful instructions by just pointing and clicking the repository you want to host. You don’t even need to code anything.
App is now deployed on Netlify
I may have summarized my development process too much because I don't want this blog to be too long. Overall, it was a great exercise for me. I get to practice calling API, extracting nested JSON data, and learning to create dark themes for my app.
Right after I finished this project, I realized that https://restcountries.com/ is shutting down their page by the end of May 2023. This means I need to update my code again in the future and just use a local JSON for everything. But I will do it when my app breaks 😂.
Do check out the app and the repository from the link below and thank you for reading!
