Skip to content

gonferreyra/country-page-worldranks-nextjs

Repository files navigation

Country Page - WorldRanks App

This is a solution to the Country Page - WorldRanks.

Table of contents

Overview

The challenge

Quite often, as a developer, you will have to work with a larger amount of data. In this challenge, you will work with a more complicated set of data of countries and display it in a table.

User Stories:

  • Create a country ranking page that matches the given design.
  • By default, users can see a list of all countries sorted by population.
  • Users can choose to sort by name alphabetical order or population or area (km²).
  • Users can choose to filter by multiple regions, the regions can be Americas, Antarctic, Africa, Asia, Europe, or Oceania.
  • Users can choose to filter countries that are members of the United Nations.
  • Users can choose to filter countries that are independent.
  • Users can filter/search for countries by their names, regions or subregions.
  • Users can see the total number of countries.
  • Users can select a country and see more details on a country page.
  • On the country page, users can see info like population, area, capital,....
  • On the country page, users can see the neighboring countries.
  • On the country page, when users select a neighboring country, it should redirect to the according country page.

Deploy the solution and submit Repository URL and Demo URL.

Screenshots

Mobile 375px

mobile

Mobile 430px

mobile

Nest Hub Max 1280

desktop

MacBook Pro 1440

desktop

My process

Built with

Front-End:

  • NextJs - React framework
  • Tailwind
  • Typescript
  • Mobile-first workflow
  • Tanstack Query
  • ContextAPI

State

Global state on client-side is managed with ContextAPI.-

Author

Releases

No releases published

Packages

No packages published