Skip to content

๐ŸŒŽ REST Countries: A project that interacts with API to provide an in-depth look at different countries. With a color theme switcher feature and the ability to filter and search, you can easily navigate and discover new information.

License

Notifications You must be signed in to change notification settings

catherineisonline/rest-countries

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

59 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Rest Countries

REST Countries API with color theme switcher

Solution for a challenge from frontendmentor.io.



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
  • TypeScript
  • Rest Countries API

What I learned

Another fun project to practice React along with API. I have worked with other APIs however mostly with static URLs. This one was a bit harder because I had to change the request depending on the input as well. I am currently working on filtering by region. I did make it work however I had to change some tags to make the options field editable, another new thing I found out recently. Instead of changing it via JS, I tried to change it 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 requests from is giving me country code names instead of full names and I am unsure how to change it back to full names. I also finally started to understand how to use states depending on whether it's a class or function component!

Contribution

This project serves as a project to show off my personal skills. I do not accept any contributions like pull requests to this project however if you have any suggestions or ideas feel free to message me or submit an idea in the discussions. Otherwise, you are free to fork this project and change it for your own purposes.

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!

About

๐ŸŒŽ REST Countries: A project that interacts with API to provide an in-depth look at different countries. With a color theme switcher feature and the ability to filter and search, you can easily navigate and discover new information.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published