This is a React application that displays information about various countries, including their flags, populations, regions, capitals, and more. Users can click on a country card to view detailed information about that country.
- Display a list of countries with their flags and basic information.
- Click on a country card to view detailed information.
- Show native name, population, region, subregion, capital, top-level domain, currencies, and languages.
- Display neighboring countries as links to their respective details.
- Responsive design with support for light and dark themes.
- React
- React Router
- CSS
- Fetch API
You can check out a live demo of the application on Netlify(stable).
You can check out a live demo of the application on Netlify.
Make sure you have Node.js and npm installed on your machine.
-
Clone the repository:
git clone https://github.com/Krishnapal-rajput/country-details-app.git
-
Navigate to the project directory:
cd country-details-app -
Install the dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and go to
http://localhost:3000to view the app.
The homepage displays a grid of country cards. Click on any country card to see more details about that country. Use the back button to return to the list of countries.
CountryCard: Displays basic information about a country. CountryDetail: Shows detailed information for a selected country. CountryCardShimmer: A loading placeholder while fetching country data.
The application includes basic styling for light and dark themes. You can toggle themes using the UseTheme hook.
Data is fetched from the REST Countries API to retrieve country information.
Contributions are welcome! Feel free to submit a pull request or open an issue for any enhancements or bugs.
This project is licensed under the MIT License - see the LICENSE file for details.