Country application (Integrify React assignment task)

Project preview link (GitHub pages)

Used technologies

• React
• TypeScript
• Vite
• MUI (Material UI)
• REST-full API (data provided by restcountries.com)

Task:

Notion link

Assignment requirements

• Create a home page (component) that displays the country data and it should look similar to Image 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}
• Create a search field that allows users to search country by country name.
• When displaying country data, please add the pagination or lazy loading to only show 5 countries as in Image 1.
• Make use of the following react concepts:
  • Use Functional React Component
  • React hooks: useState, useEfect, useParams
• You can use Bootstrap, Vanilla CSS, or any other framework you wish for styling
• 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:

• TypeScript (use TypeScript instead of JavaScript)
• Custom hook (create a custom hook to fetch country data)

  API class and CacheStorage used instead

• MUI (Material UI - https://mui.com/ )
• File structure (organize files)
• Clean code
• Good styling

  Enforced code style (ESlint and prettier)

• Application optimization: useCallback, useMemo, Debounce (for user input)

  Debounce used in Header

• Redux (use Redux, Redux Toolkit, or Context API for managing state)

  React Context API

• Testing (Front end Testing: Testing-library/react, Cypress, Jest or any other framework/library)

  TODO: vitest (you can see the progress in testing branch)

• Sorting by country name

  Also by Region and Population (configurable)

Also done

• Custom error page
• Layouts and nested routes support
• Enforce code style