<aside> ✅ Please note you should complete this task within 72-hours

</aside>

Introduction

The purpose of this assignment is to evaluate the candidate's understanding of basic react concepts. The main reason for using React lies in the ability to create components based on functionality set, for example, to divide the whole app into small independent components. In this assignment, you will use a JsonplaceHolder API to get the countries' data and display it in a meaningful way.

Assignment requirements

API to use

More detail about the API:

REST Countries

Assignment requirements

1. When you click on the button, it should navigate to another page showing detailed information about that country as Image 2. The URL for country detail will look like this: [https://restcountries.com/v3.1/name/{name](https://restcountries.com/v3.1/name/{name)}
   1. Create a home page (component) that displays the country data and it should look similar to Image 1.
2. Create a search field that allows users to search country by country name.
3. When displaying country data, please add the pagination or lazy loading to only show 5 countries as in Image 1.
4. Make use of the following react concepts:
   • Use Functional React Component
   • React hooks: useState, useEfect, useParams
5. You can use Bootstrap, Vanilla CSS, or any other framework you wish for styling
6. After finishing the task, push the code to a public repository on GitHub and deploy it to Netlify, Vercel, or any other static website hosting alternatives. When submitting the assignment, provide us with both links i.e. the link to the GitHub repository and the link to the deployed application.

Extra points

You'll gain extra bonus points and appreciation by having the following:

1. TypeScript (use TypeScript instead of JavaScript)
2. Custom hook (create a custom hook to fetch country data)
3. MUI (Material UI - https://mui.com/ )