REST Countries API with color theme switcher

About The Project

If you're wanting to test your JavaScript skills this is the challenge for you. Use whichever JS framework you prefer and pull data from the REST Countries API. The challenge is to integrate with the REST Countries V2 API to pull country data and display it like in the designs. You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.

Users should be able to:
1. See all countries from the API on the homepage.
2. Search for a country using an input field.
3. Filter countries by region.
4. Click on a country to see more detailed information on a separate page.
5. Click through to the border countries on the detail page.
6. Toggle the color scheme between light and dark mode (optional).

I do not have access to the Figma sketch so the design is not pixel perfect.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex
• Desktop-first workflow
• React
• Rest Countries API

What I learned

Another fun project to practice React along with API. I have worked with other API however mostly with static urls. This one was a bit harder because I had to change request depending on the input as well. I am currently working on filterting by region. I did make it work however I had to change some tags to make options field editable, another new thing I found out recently. Instead of changing it via JS I tried to change to list tags but instead the functionality stopped working. Another hard thing I did not manage yet, is changing country borders. The URL I am getting request from is giving me country code names instead of full name and I am unsure how to change it back to full name. I also finally started to understand how to use states depending whether it's a class or function component!

Useful resources

1. Figma - Paste your design image to check the size of containers, width, etc.
2. Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.
3. Rest Countries API - information about countries via a RESTful API
4. Framer Motion - React library for animations

Acknowledgments

A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!