Skip to content

React, TypeScript, and Jest fuel an app using a REST API. Displaying country info on cards, users can search, click for details, and redirect to dedicated country pages.

License

Notifications You must be signed in to change notification settings

victoriacheng15/rest-countries-api-next

Repository files navigation

REST Countries API - Nextjs version

This is 3rd version of the rest countries API with Nextjs, you could see the previous 2 versions:

The previous 2 versions were built using TypeScript and JavaScript respectively, with React, and Tailwind CSS being used in both cases. The state management in the TypeScript version was handled through the use of React Hooks such as useContext, useReducer and useMemo.

The current version, on the other hand, is built using Nextjs and Redux Toolkit Query. Additionally, the current version included a couple of new features and improvements that were not present in the previous versions.

In terms of functionality, all three versions share the same core features: a search box for users to search for specific countries and a dropdown menu that enables them to filter countries based on regions. Users can also click on a country to view more detailed information about it.

New features/improvement

  • Users now can search countries based on the text and region
  • Implement skeleton layout to minimize layout shifts while fetching the API
  • A clear search button to reset the search box, region and cards per page limit (to 9)
  • A small window to display country cards, allows users to click the load more button to view more countries if available without or minimize the need to scroll up

The user should be able to:

  • Display a list of all countries fetched from the API on the homepage, along with a Load More button to load more countries if available
  • Provide a dropdown menu to filter countries by region, and a search box to search countries by text
  • Include a Clear Search button to clear the search results and display all countries again
  • Allow users to click on a country card to view more detailed information about the country on a separate page
  • Enable users to navigate to the bordering countries of a selected country on the detail page
  • Provide a toggle switch to switch between light and dark color schemes for the user interface

View the site live here

Tech stack:

TypeScript Nextjs Redux Tailwind CSS Testing Library Jest

Screenshots/GIFs

Overall and theme toggle demo
search-text-region.mp4

Search countries by search box and/or region
overall-theme-toggle.mp4

Load More and Clear Search button
load-more-and-clear-button.mp4

Installation

git clone [email protected]:victoriacheng15/rest-countries-api-next.git
cd rest-countries-api-next
npm install
# or your preference of package manager
npm run dev

What I learned

Nextjs - app directory

The app directory in Nextjs is a directory that contains all the files that are necessary to configure and run your app. I think one of the advantages of using the app directory is that it allows you to organize your routes and nested routes more intuitively.

Redux Toolkit Query

RTK Query is a tool that is similar to RTK, but with the added benefit of completely managing the data fetching process, eliminating the need to write useEffect hooks. One feature that I find particularly useful is that RTKQ allows you to provide a base URL and define multiple endpoints to fetch specific information required by the application.

In my project, I gave the base URL to RTKQ and added two different endpoints. The first endpoint was used to fetch all countries, while the second endpoint was used to fetch a single country based on its code. This simplified the code and eliminated the need to write async/await functions within the useEffect block.

Continued development

The app directory in Next.js is currently in an experimental phase, meaning that it is not yet considered a stable feature. As a result, there may still be changes made to this feature before it becomes stable. Therefore, I am keeping an eye out for any potential changes that could affect my application's functionality. Once the feature is stable, it should be safe to use without any major concerns about breakages.

Author

LinkedIn Twitter

About

React, TypeScript, and Jest fuel an app using a REST API. Displaying country info on cards, users can search, click for details, and redirect to dedicated country pages.

Topics

Resources

License

Stars

Watchers

Forks