REST Countries API with color theme switcher

The web application helps you find general background information about countries: flag, area, population, capital, language, land borders and etc.

Features

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

Screenshot

Links

Solution URL: https://github.com/FightM9/typescript-rest-countries-api
Live Site URL: https://typescript-rest-countries-api.netlify.app/

Process

Built with

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.

Useful resources