Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/hossainaraf/metrics-webapp


https://github.com/hossainaraf/metrics-webapp

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README

        


logo

Metrics Webapp


![image](https://github.com/HossainAraf/metrics-webapp/blob/deploy/src/assets/screen.png)

# πŸ“— Table of Contents

- [πŸ“– About the Project](#about-project)
- [πŸ›  Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [πŸš€ Live Demo](#live-demo)
- [πŸ’» Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [πŸ‘₯ Authors](#authors)
- [πŸ”­ Future Features](#future-features)
- [🀝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [πŸ”­ Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [πŸ“ License](#license)

# 🎯 Metrics Webapp

> Explore the population metrics of Asian countries with this React capstone project. The mobile web application utilizes React and Redux to fetch and display population data from a selected API.

## πŸ›  Built With

### Tech Stack

Technology


  • React

  • Redux

  • Redux Toolkit

  • React Router Dom

  • React-Bootstrap

  • CSS-flex

Tools


  • VS Code

  • GIT

  • GITHUB

### Key Features

This project is a simple metrics app. The main features are:

- **Mainly consists of two page:**
- **Home page with a list of countries and population of Asia region**
- **Detail page for the country details**

(back to top)

## πŸš€ Live Demo

- [Live Demo Link](https://populaton-metricapp2023.onrender.com/)
- [Video description](https://www.loom.com/share/8246eb5a79d149069ebf3cb75ff3e4e1?sid=eda8c419-7687-40d0-ac30-e1bb56439f6e)

(back to top)

## πŸ’» Getting Started

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

### Prerequisites

you have to those tools in your local machine.

- [ ] NPM
- [ ] GIT & GITHUB
- [ ] Any Code Editor (VS Code, Brackets, etc)

### Setup

Clone the project.

```bash
git clone [email protected]:HossainAraf/metrics-webapp.git
```

Go to the project directory.

```bash
cd metrics-webapp
```

In the project directory, you can run:

```bash
npm start
```

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.You may also see any lint errors in the console.

```bash
npm test
```

```bash
npm run build
```

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

(back to top)

## πŸ‘₯ Authors

πŸ‘€ **Md Arafat Hossain**

- GitHub: HossainAraf
- LinkedIn: Md. Arafat Hossain

(back to top)

## πŸ”­ Future Features

- [ ] **We will implement city details page**
- [ ] **We will implement API data for all continents**
- [ ] **We will implement google map**
- [ ] **We will implement voice search**
- [ ] **We will add functionality to the setting icon of Navbar**
- [ ] **We will make this app responsible for all screen sizes**

(back to top)

## 🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)

## πŸ‘‹ Show your support

Give a ⭐️ if you like this project!

(back to top)

## πŸ”­Acknowledgments

- My Family.
- [Microverse Team](https://www.microverse.org/).
- [Original design]() idea by [Nelson Sakwa](https://www.behance.net/sakwadesignstudio) on Behance.

(back to top)

## ❓ FAQ

- **Are you using database?**

- No, I am not using any database.

- **Can I use this project for personal use?**

- Yes, you can use it.

(back to top)

## πŸ“ License

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

(back to top)