CountryPedia
Explore the interactive world map and discover country data from around the globe. With up-to-date information from the Rest Countries API.
Overview
Countrypedia is an interactive platform that allows users to explore information about countries from around the world. It features an interactive world map that is created using React.js and Tailwind CSS. Users can discover country data, including information such as population, area, and capital, by hovering over specific regions on the map.
Features
- Interactive world map: Countrypedia offers an interactive world map that allows users to explore different countries by clicking on specific regions.
- Country data from REST COUNTRIES API: The platform fetches country data from the REST COUNTRIES API, providing users with up-to-date information about each country.
- Redux integration for caching data: Countrypedia integrates Redux to cache country data, minimizing the number of API calls and improving performance.
- Search functionality with react-search-autocomplete: The platform includes a search functionality that enables users to easily locate specific countries using the react-search-autocomplete component.
- Beautiful and responsive UI with Tailwind CSS: Countrypedia's user interface is visually appealing and responsive, ensuring a seamless experience across different devices.
Summary
Countrypedia is an interactive platform that allows users to explore country data from around the world. It features an interactive world map, country data from the REST COUNTRIES API, and search functionality. With its beautiful and responsive user interface, Countrypedia provides an engaging and seamless experience for users to learn about different countries.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- daisyUI
daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading