This is a Country Information app built with React and React Router. The application allows users to search for countries, filter them by region, and view detailed information about each country. The app features a responsive design with a theme toggle option and smooth navigation.
- Search for countries by name
- Filter countries by region
- View detailed information about each country
- Responsive design with theme toggle (light/dark mode)
- Dynamic routing to country detail pages
To run this project locally, follow these steps:
-
Clone the repository
git clone https://github.com/AdrianPodraza/CountryApi cd CountryApi -
Instal Packages
npm i
-
Run locally
npm run dev
- Home Page: Visit the home page by navigating to the root URL (
/). Here you can search for countries, filter them by region, and view the country cards. - Country Details: Click on a country card or navigate directly to a country details page by using the URL pattern
/country/:countryName, where:countryNameis the name of the country you want to view.
- Search: Use the search bar on the home page to filter countries by name.
- Filter: Select a region from the filter dropdown to view countries from that region.
- Country Details: On the country details page, you can see detailed information about the selected country, including its flag, population, region, subregion, capital, top-level domain, currencies, languages, and neighboring countries.
- Back Button: Use the back button to return to the home page from the country details page.
- Theme Toggle: The theme (light or dark) can be toggled using the
Navbarcomponent. The selected theme is saved inlocalStorageand applied throughout the app.
Feel free to explore the app and use the provided navigation and filters to find detailed information about countries.
https://countryapiadek.netlify.app/
MIT