anita00001/country-statistic

Statistics of Countries

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
    • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Statistics 0f Countries

This is a React app that fetches the country's data from an external API and displays the country name when the app loads. When a user clicks on the country card, it displays the statistics of the selected country. It also allows searching for a country by its name and sorting countries by their continent. Click here for more details.

🛠 Built With

React
Redux
CSS

🛠 Tech Stack

React

• React Quick Start

Redux

• Redux Quick Start

JavaScript

• DOM in JavaScript

NodeJS

• Node.js

CSS

• style.css

Key Features

• Display current time on the main page
• Displays country name on card
• Display country's national flag on card
• Display country's area on card
• Search a country by its name
• Filter countries by their continent
• Display country's detailed informations on another page
• Recommend five countries that are on the same continent on a country's detailed information page
• Implement React icon to return to the main page

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

• Git bash
• Visual Code Studio

Setup

Clone this repository to your desired folder:
cd your-folder

git clone https://github.com/anita00001/country-statistic.git

Install

Installation dependency for linters check Find the guide here.

Usage

Run the project on Visual Studio Code Live Server

  npm install

  npm start

(back to top)

Run tests

To run tests, run the following command:

To check for css errors run:

  npx stylelint "**/*.{css,scss}"

To check for js errors run:

  npx eslint "**/*.{js,jsx}"

To run test:

  npm test

👥 Author

👤 Anita Sharma

• GitHub: @anita00001
• LinkedIn: anitaa-sharmaa
• Twitter: @anitaa_sharmaa

(back to top)

🔭 Future Features

• Add action for the microphone icon
• Add action for setting icon

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project give it a rating.

(back to top)

🙏 Acknowledgments

• I express my sincere gratitude to Microverse (microverse.org) for providing the necessary resources and knowledge.
• I am thankful to my Mentors and Code Reviewers who encourage me to optimize and make this project functional.
• I am honoured to the original designer Nelson Sakwa, who made the design available for free.

(back to top)

📝 License

• This project is MIT licensed.

(back to top)