Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wahaj-ali/metrics-webapp
The Metrics web app, 'Population Index', is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With an intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.
https://github.com/wahaj-ali/metrics-webapp
css3 javascript jsx react-redux reacttestinglibrary testing unit-test
Last synced: 15 days ago
JSON representation
The Metrics web app, 'Population Index', is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With an intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.
- Host: GitHub
- URL: https://github.com/wahaj-ali/metrics-webapp
- Owner: Wahaj-Ali
- License: mit
- Created: 2023-02-06T11:57:23.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-06-06T16:16:54.000Z (over 1 year ago)
- Last Synced: 2024-10-10T01:27:37.247Z (27 days ago)
- Topics: css3, javascript, jsx, react-redux, reacttestinglibrary, testing, unit-test
- Language: JavaScript
- Homepage: https://populaton-index-by-wahaj.netlify.app/
- Size: 460 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Population Index-Metrics webapp
> The Metrics web app, 'Population Index', is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With our intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [📖 Population Index-Metrics webapp ](#-population-index-metrics-webapp-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🚀 Live Demo ](#-live-demo-)
- [🚀 Video Project Presentation ](#-video-project-presentation-)
- [💻 Getting Started ](#-getting-started-)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Testing](#testing)
- [Deployment](#deployment)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [❓ FAQ ](#-faq-)
- [📝 License ](#-license-)
# 📖 Population Index-Metrics webapp
>The Metrics web app is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With our intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.
>At the heart of our web app is a sophisticated [API](https://restcountries.com/v3.1/all) that enables us to fetch real-time data about each country, including detailed population counts and other key metrics. And with the power of Redux, we're able to store this data securely and efficiently, ensuring that it's always available when you need it.
### Tech Stack
- HTML
- CSS
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [React]((https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/lessons/webpack_v1_1.md))
Languages
- HTML
- CSS
- Javascript
- React
Bundler
- Webpack
Server
- Github
- **Webapp(SPA)**
- **Use REST [API](https://restcountries.com/v3.1/all)**
- **Responsive**
## 🚀 Video Project Presentation
- -Video Project Presentation Link
To get a local copy up and running, follow these steps.
### Setup
Clone this repository to your desired folder:
```sh
git clone https://github.com/Wahaj-Ali/metrics-webapp.git
cd metrics-webapp
```
### Install
Before installing the app, make sure to install node.js in your machine. In order to check if node is installed run the following command:
```sh
node -v
```
Install this project with:
```sh
npm install
```
### Usage
To run the project in a development server, execute the following command:
```sh
npm start
```
### Testing
To run the tests in a development server, execute the following command:
```sh
npm test
```
To to build for the production, execute the following command:
```sh
npm run build
```
### Deployment
- I use [netlify](https://www.netlify.com/) to deploy my webapp.
👤 **Wahaj Ali**
- GitHub: [@Wahaj-Ali](https://github.com/Wahaj-Ali)
- Twitter: [@Ali96Wahaj](https://twitter.com/Ali96Wahaj)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/wahaj-ali-82b9b1164)
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Wahaj-Ali/metrics-webapp/issues).
A satr to this repo would be appreciated.
- Thanks to everyone that helped me to get all the tasks completed.
- Design of the Webapp is inspired by [Nelson Sakwa's](https://www.behance.net/sakwadesignstudio) [Ballhead App](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)).
> Add at least 2 questions new developers would ask when they decide to use your project.
- **What is this project?**
- It's a project of micoverse curriculum.
- **Is there any SQL database for this site**
- No, there isn't.
This project is [MIT](https://github.com/Wahaj-Ali/metrics-webapp/blob/dev/LICENSE) licensed.