Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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.
- Host: GitHub
- URL: https://github.com/mnisarali/metrics-webapp
- Owner: MNisarAli
- License: mit
- Created: 2023-02-12T15:14:37.000Z (almost 2 years ago)
- Default Branch: development
- Last Pushed: 2023-03-05T05:10:12.000Z (almost 2 years ago)
- Last Synced: 2024-11-12T16:02:35.335Z (about 1 month ago)
- Topics: capstone, react-js, redux
- Language: JavaScript
- Homepage: https://worldmetrics.onrender.com
- Size: 457 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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" 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.
- HTML5
- CSS3
- JavaScript(ES6)
- React Js
- Redux
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.
- [Live Demo Link](https://worldmetrics.onrender.com/)
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.
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)
- [ ] Add air pollution data for each city.
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/MNisarAli/Metrics-Webapp/issues).
Give a ⭐️, if you like this project!
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)
This project is [MIT](./LICENSE) licensed.