REST Countries API

Front-End Mentor Challenge Solution with React and Redux
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Challenge Brief
   • Built With
2. Getting Started
   • Installation and Setup
   • Getting Started With Create React App
   • Prerequisites
3. Project Status
   • Current
   • Next Steps
4. Project Screenshots
   • Preview
5. Reflection
   • Goals
6. Support Me
7. Usage
8. Roadmap
9. Contributing
10. License
11. Contact
12. Acknowledgements

About The Project

Note: Project is still in development!

REST Countries API with theme switcher is a project that I built as a challenge from the frontendmentor.io website.

Challenge Brief

Your challenge is to integrate with the REST Countries 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.

Your users should be able to:

• See all countries from the API on the homepage
• Search for a country using an input field
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode (optional)

Built With

This section lists any major frameworks that I used to build my project.

• React
• React Router
• Redux
• Redux Toolkit
• SASS
• React Font Awesome
• Rest Countries API
• axios

Getting Started

Installation and Setup

Clone down this repository. You will need node and npm installed globally on your machine.

Installation:

npm install

To Start Server:

npm start

To Visit App:

localhost:3000

Getting Started with Create React App

This project was bootstrapped with Create React App.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Project Status

Current

Adding styles for larger devices and working on the filter by region option.

Next steps:

• Adding styles for larger devices.
• Adding a filter by category functionality.
• Adding a search functionality.
• Adding a theme color switch.
• Adding product screenshots.
• Adding a loading component.
• Add animations.
• Optimizing and refactoring code.

Project Screenshots

Preview:

N/A - Coming soon

See live: Portfolio

Reflection

• This is a side project to test out my skills.
• P.S I love building this!
• Initially I was planning on building this with Context API, however after a while it became so cumbersome that I ended up with some spaghetti code and decided to hard reset to my previous commit. The reason I decided to go with Context API is because I thought Redux would be an overkill for this small app and it gets quite repetitive with creating constants, acitions, reducers, combining reducers etc. Fortunately, I found out about an amazing third-party app, built by the Redux team, called Redux Toolkit which is in my opinion very elegant and helps you write very clean code. In just 20 minutes I got the hang of it and I feel like I just won the lottery today. I love it!
• P.S by hour 8 I was wondering why my custom component is not rendering and after careful debugging, I saw I wasn't returning it from my map function... this is when I knew I needed a break

Goals:

I have spent a total of 22 hours building this project.

• Main Goal: Get to that theme switcher! Whoo

Support me

Usage

The Where in the world: Rest Countries API project is a website that shows you basic information about all of the countries in the world.

On page one, you have the flag, name and some metadata about each country. You also have a search option where you can search for any country and a filter option to filter countries by region.

Upon clicking on a country, you are redirected to a page with more information about the specific country.

The website also has

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Author

Loreta Krasteva

See live: Rest Countries API: Where in the world

Project Link: https://github.com/sudo-ditto/rest-countries-api

Acknowledgements

• Stack Overflow
• Font Awesome
• Rest Countries API