This is a web application that allows users to explore information about countries around the world. Users can view a list of all countries from the API on the homepage, filter countries by region, click on a specific country to access detailed information on a separate page, and search for a country using a search input field. The interface is also designed to be responsive, providing an optimal user experience on different screen sizes.
-
React: The project is built using the React JavaScript library, which facilitates the development of dynamic user interfaces.
-
React Router: React Router is used to manage the application's routing, enabling navigation between different pages.
-
CSS Modules: CSS Modules are employed for styling to ensure a modular and maintainable design.
The main purpose of this project is to demonstrate proficiency in working with React Router for handling application routing and efficiently making requests to various API endpoints using the Fetch API. This project serves as a practical exercise in building a responsive web application and showcases the following key features:
- View a comprehensive list of all countries from the API on the homepage.
- Filter countries by region to easily find countries within a specific geographic area.
- Click on a country to see more detailed information on a separate page
- Search for a country using the search input field for quick access to specific country information.
- Optimal user interface design that adjusts seamlessly based on the user's device screen size.
To see the project in action, you can check out the online demo here.