Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/MNisarAli/Metrics-Webapp

A single-page web application (SPA) that allows users to check world continents/countries' information, e.g; Population, Flags, Longitude, Latitude, etc.
https://github.com/MNisarAli/Metrics-Webapp

capstone react-js redux

Last synced: 10 days ago
JSON representation

A single-page web application (SPA) that allows users to check world continents/countries' information, e.g; Population, Flags, Longitude, Latitude, etc.

Awesome Lists containing this project

README

        


World Metrics Webapp


# 📗 Table of Contents

- [📗 Table of Contents](#-table-of-contents)
- [📖 World Metrics ](#-world-metrics-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🚀 Live Demo ](#-live-demo-)
- [💻 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Start](#start)
- [Tests](#tests)
- [Build](#build)
- [Deployment](#deployment)
- [Usage](#usage)
- [👥 Authors ](#-authors-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [💖 Show your support ](#-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)

# 📖 World Metrics

"World Metrics" is a single page web application that allows users to:

- To check world continents/countries information, e.g: Population, Flags, Currencies, Languages, Longitude, Latitude, & Air Pollution Data etc.

## 🛠 Built With

### Tech Stack

- HTML5
- CSS3
- JavaScript(ES6)
- React Js
- Redux

### Key Features

The key features of this website include.

- Interaction with "REST Countries" API.
- Interaction with "Air Pollution" API.
- Continents info at Home page.
- Search countries by name at "Continent Detail" page.
- View detailed data about selected country at "Country Detail" page.

(back to top)

## 🚀 Live Demo

- [Live Demo Link](https://worldmetrics.onrender.com/)

(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:

- [ ] A web browser like Google Chrome.
- [ ] A code editor like Visual Studio Code with Git and Node.js installed.

### Setup

Clone this repository to your desired folder:
1. Open terminal in VScode.
2. Navigate to the directory where you want clone the copy of this repository
3. Create new directory [optional]
4. Clone the repo using the below command

```sh
git clone https://github.com/MNisarAli/Metrics-Webapp.git

cd Metrics-Webapp
```

### Install

Install this project with:

```sh
npm install
```

### Start

To start the application, run the following command

```sh
npm start
```

### Tests

To run tests, run the following command:

```sh
npm test
```

### Build

To build the app for production, run the following command:

```sh
npm run build
```

### Deployment

To deploy project, run the following command:

```
npm run deploy
```
Or you can deploy on a static site hosting platform like [Render](https://render.com/).

### Usage

This project can be used to practice React & Redux.

(back to top)

## 👥 Authors

The collaborators of this project.

👤 **M Nisar Ali**

- GitHub: [@MNisarAli](https://github.com/MNisarAli)
- Gmail: [Muhammad Nisar Ali](mailto:[email protected])
- LinkedIn: [Muhammad Nisar Ali](https://linkedin.com/in/muhammad-nisar-ali-45a865251)

(back to top)

## 🔭 Future Features

- [ ] Add air pollution data for each city.

(back to top)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/MNisarAli/Metrics-Webapp/issues).

(back to top)

## 💖 Show your support

Give a ⭐️, if you like this project!

(back to top)

## 🙏 Acknowledgments

I would like to thank:
- [Microverseinc](https://github.com/microverseinc) for [Readme-template](https://github.com/microverseinc/readme-template).
- [Nelson Sakwa at Behance](https://www.behance.net/sakwadesignstudio) for creating this beautiful [App design](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)).
- [Alejandro Matos](https://gitlab.com/amatos) for [REST Countries API](https://restcountries.com/#license).
- [OpenWeather](https://openweathermap.org) for [Air Pollution API](https://openweathermap.org/api/air-pollution)

(back to top)

## 📝 License

This project is [MIT](./LICENSE) licensed.

(back to top)