React assignment

This assignment is to practice TypeScript

How to run project

Step 1: yarn
Step 2: yarn start

Requirements

Fetch data from this API: https://restcountries.com/v3.1/all
The user can search country by name
Get country detail by this API: https://restcountries.com/v3.1/name/{name}
When the user click to country name or a button it should show country detail
The country detail should have name, region, population, flag and list of languages
The user can add country to Favorite page
When the user add a country to Favorite the favorite icon should change the color.
Have a Loading page while fetching data

Code style Requirements

Naming convention
Clear file structure
Divided the project to small components
Clean code: no console.log, no dead code,
Format code (Prettier - Code formatter)
Separate import from your own file and the import from the package

Extra requirements

ONLY DO THIS PART WHEN YOU HAVE COMPLETED THE REQUIREMENTS PART

When the user add country to favorite list, the website should show a message: A country is added to the favorite list
Sorting by country name
Deploy the project

Useful sources

API information: https://restcountries.com/
Alert: https://mui.com/material-ui/react-snackbar/#main-content
Table: https://mui.com/material-ui/react-table/#basic-table
Data grid: https://mui.com/x/react-data-grid/components/#main-content
Font: https://fonts.google.com/specimen/Nunito
Deploy: https://vercel.com/, https://www.netlify.com/
Prettier - Code formatter - Extension in VSCode

Screenshots

Deply Link

https://coruscating-concha-7b67a8.netlify.app/