WorldRanks

Country Explorer is a web application built using React, TypeScript, and Tailwind CSS. The project is inspired by a challenge from devchallenges.io and is fully deployed for public use.

Overview

The application consists of two main pages:

1. Home Page (Country List):

   • Displays a list of countries with essential details.
   • Provides options to sort countries by population, area, or alphabetically.
   • Includes advanced filters:
     • Filter by region (e.g., Asia, Europe, Americas, etc.).
     • Filter by independent status or United Nations membership.
   • Features a search bar that allows users to dynamically filter the list of countries by name, region, or subregion.
   • Includes pagination to navigate through large datasets efficiently.
   • Clicking on a country in the list redirects to its detailed page.

2. Country Page:

   • Displays detailed information about a selected country.
   • Shows key statistics such as population, area, and region.
   • Lists neighboring countries with their flags.
   • Neighboring countries are clickable, updating the page dynamically with the new country's information.

Technologies Used

• React: For building the user interface and managing component state.
• TypeScript: To ensure type safety and improve code reliability.
• Tailwind CSS: For designing a responsive and modern user interface.
• Context API: Used for global state management, ensuring efficient handling of filters, queries, and data across the application.

Features

• Dynamic sorting, filtering, and searching for countries.
• Pagination to enhance performance when handling a large number of countries.
• Navigation between countries with smooth redirection and updates.
• Clean and responsive design optimized for desktop and mobile users.

Inspiration

This project is inspired by a challenge from devchallenges.io, aimed at improving skills in frontend development and UI/UX design.

Deployment

The application is deployed and available for public use.