It is honestly suprising how many countries we have on our planet. This project highlights all the countries, their flags, population and other important information about the countries.
Link to project: View here
Tech used:
This project uses NextJS, headlessUI, MaterialUI to highlight countries in the worls and facts about them. It uses the REST API provided by restcountries. This project helped me to get a working understanding of how to use NEXTJS. The home page displays the flag, name, region and population of a country. Users can click on each country to go to a detail page about the country. The detail page contains more information about the country but also always you to click through to get details about countries that share borders with the particualar country that the user is viewing.
When I improve this project, I will optimize the load time of the images. I used the new Images tags in NextJS to prevent the site from being jaggy while waiting for images to load. I found that using Next Images instead of the normal img tag creates a place holder for the images and just fills it in when the image is loaded. This allows for a smoother transition while waiting for images to fully
After building my previous project in React, I wanted to learn more about the NextJS framework with this project. I learnt about SSG and SSR in Next. I also learnt how to use Tailwind CSS while building this project. I learnt how to use HeaslessUI as well. While building this project, I had to learn how to perform filtering, searching and pagination on data.
Here are a couple more projects I have worked on
| To-do List App | Planet Facts Site | Tip Calculator |
To-do List
|
Planet Facts Site
|
Tip Calculator
|