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

• React Docs
• Redux Toolkit Docs
• Redux Docs
• React Select
• Typescript Handbook