The web application helps you find general background information about countries: flag, area, population, capital, language, land borders and etc.
- See all countries from the API on the homepage
- Search for a country using an
input
field - Filter countries by region, area and population
- Sort countries by name, area, population
- Change between ASC and DESC sort
- Grid view and list view for countries
- Click on a country to see more detailed information on a separate page
- Click through to the border countries on the detail page
- Toggle the color scheme between light and dark mode
- Solution URL: https://github.com/FightM9/typescript-rest-countries-api
- Live Site URL: https://typescript-rest-countries-api.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Typescript - Syntactical superset of JavaScript
- React – JS library
- React Router v6 – for page routing
- React Select – Select Input control
- React Icons – Icons library
- Redux Toolkit – A predictable state container for JavaScript applications
- CSS Modules – For styles
- Axios – Http Client
- Redux-thunk – middleware for Redux.