This is an app that I rebuilt with TypeScript. You can see the JS version.

An app contains search and dropdown features where users can use a search box to search the desired country and use the dropdown to filter countries by regions (Africa, Americas, Asia, Europe, and Oceania). The users also can click a country to view more detailed information.

The user should be able to:

• See all countries from the API on the homepage with pagination
• Search for a country using an input field
• Filter countries by region
• 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

View the site live here

TypeScript

• Learned about 4 ways to assign types in TypeScript: interface, type, enum, and as.
• Discovered that as is not a common way to assign types in TypeScript.
• Encountered a tricky aspect of type checking for the API because the API may have several levels of nested objects.
• Learned how to use mapped types to assign types to nested objects.
• Created several TypeScript interfaces to define the structure of data used in the project.
• Used a TypeScript context to provide and consume data across the project.

useReducer

• Learned how to use useReducer hook to bundle all state updates into one function with one hook.
• Recognized that useReducer can be beneficial for larger state updates with multiple actions.

useMemo

• Learned how to use the useMemo hook to cache the result of a calculation between re-renders.
• Discovered that useMemo can be used to optimize the performance of an app.

Additionally, I wrote blogs on useReducer and useMemo hooks to improve my understanding of both:

• React Hooks - useReducer
• React Hooks - useMemo

I am looking to add React Testing Library for this project to solidify my knowledge of Test-Driven Development.

• useMemo hook
• useCallback hook
• React TypeScript cheatsheet