World Rank Project

World Ranks is a web application that displays a list of countries along with their rankings, population, area, and other details. This project is a solution to the "World Rank" challenge on DevChallenges. It features the ability to filter and sort countries, providing users with an interactive and intuitive way to explore global statistics. Built with HTML, CSS, and JavaScript, World Ranks showcases clean design and responsive functionality.

Challenge Link: https://devchallenges.io/challenge/country-page

Live site: https://zeynabmvs.github.io/world-ranks/

Github Repo: https://github.com/zeynabmvs/world-ranks

Screenshots

The main page with the list of all countries and filters.

The country detail page.

Built with

• Vite: Vite is a build tool that provides lightning-fast development server and build times for modern web projects. Vite
• React: React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of their applications efficiently. React
• React Router DOM v6: React Router DOM is a library for routing in React applications. It enables developers to create dynamic and navigable user interfaces with URL navigation. React Router DOM
• React Query v5.3: React Query is a data fetching library for React applications. It simplifies data fetching and caching, making it easy to manage server state in React components. React Query
• React Loading Skeleton: React Loading Skeleton is a library for creating loading placeholder components in React applications. It provides a convenient way to display loading animations while data is being fetched. React Loading Skeleton
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework that provides pre-designed building blocks for creating modern web layouts. It allows developers to rapidly build custom user interfaces without writing custom CSS. Tailwind CSS
• React Loader Spinner: React Loader Spinner is a library for creating loading spinner components in React applications. It provides various customizable spinner animations to indicate that data is being fetched or processed. React Loader Spinner
• Semantic HTML Markup, Flex, Grid, mobile first workflow

Features

• View a list of countries.
• Filter countries by search keyword, region, and other criteria.
• Sort countries based on different parameters such as name, population, etc.
• Pagination support for browsing through multiple pages of countries.

API

The app uses rest countries API

Getting Started

1. Clone the repository:

git clone https://zeynabmvs.github.io/world-ranks.git

2. Navigate to the project directory:

cd world-ranks

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

License

This project is licensed under the MIT License.

Feedback

Feedbacks are welcome, feel free to provide feedback on my solution here

Credits

• This project was created as part of the DevChallenges challenge. Special thanks to Devchallenges.io for providing the inspiration and resources for this project.

• Aishwarya Parab's Article on medium helped me deploy the project on Github pages easily

• FreeCoeCamp's youtube tutorial by Jack Herrington helped me to leanrn react's concepts deeper

• Console Ninja extention for VSCode made debugging very easy.