alkaison/country-dex

Country Dex allows you to explore information about all countries on Earth, providing a rich and interactive experience.

Country Dex - Explore Countries of the Earth 🌍

Welcome to the Country Dex web app project! This application allows you to explore information about all countries on Earth, providing a rich and interactive experience. Whether you're looking for general country information, detailed statistics, or just want to admire the flags of different nations, Country Dex has got you covered. Try now: click here

Table of Contents

• Features
• Technologies Used
• Getting Started
• Usage
• Theme Toggle
• Screenshots
• Contributing
• License

Features

Country Information

• Access detailed information about all countries, including their flags, names, and stats overviews.
• Search for a specific country by its name using the search input field.
• Filter countries by regions using the region filter.
• Combine region filtering and search to refine your results.

Detailed Country View

• Click on a country to view more comprehensive details about it, including its population, region, capital, languages, currencies, and neighboring countries.
• Explore bordering countries by clicking on their names.

Responsive Design

• Enjoy an optimal user interface layout on various screen sizes, making it accessible on both desktop and mobile devices.

Interactive Elements

• Experience hover and focus states for all interactive elements on the page for a more engaging user experience.

Dark/Light Theme Toggle

• Customize your browsing experience by toggling between dark and light themes.
• Your preference is stored in local storage for a seamless experience on your next visit.

Technologies/Library Used

• React.js
• Vanilla CSS
• React Icons
• React Router DOM
• React Loader Spinner
• GH-Pages
• Animate on Scroll
• REST Countries API (v3.1)

Getting Started

To get started with the Country Dex project on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/Alkaison/Country-Dex.git

2. Change directory to the project folder:

   cd country-dex

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your web browser and access the app at http://localhost:3000/Country-Dex.

Usage

• Visit the home page to see a list of all countries along with their flags and basic information.
• Use the search input field to find a specific country by name.
• Filter countries by region using the region filter dropdown.
• Click on a country card to view more detailed information on a separate page.
• On the detailed country page, click on bordering countries names to explore more.

Theme Toggle

• Toggle between dark and light themes using the theme switcher located in the header.
• Your theme preference will be saved in local storage for your next visit.

Screenshots

Home Page

Country Details

Contributing

Contributions to this project are welcome! Feel free to open issues or submit pull requests to improve the application.

License

This project is licensed under the MIT License.

Thank you for exploring the world with us! 🌎🌏🌍