Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

This React capstone project is about building a mobile web application to check a list of metrics (numeric values) that make by use of React and Redux.
https://github.com/shahadat3669/metrics-webapp

javascript metrics react redux redux-thunk redux-toolkit restcountries-api swiper

Last synced: 12 days ago
JSON representation

This React capstone project is about building a mobile web application to check a list of metrics (numeric values) that make by use of React and Redux.

Host: GitHub
URL: https://github.com/shahadat3669/metrics-webapp
Owner: shahadat3669
License: mit
Created: 2023-02-06T17:18:27.000Z (almost 2 years ago)
Default Branch: dev
Last Pushed: 2023-05-29T15:34:42.000Z (over 1 year ago)
Last Synced: 2024-10-03T12:29:14.043Z (4 months ago)
Topics: javascript, metrics, react, redux, redux-thunk, redux-toolkit, restcountries-api, swiper
Language: JavaScript
Homepage: https://matrics.onrender.com/
Size: 26.4 MB
Stars: 5
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        



  

  Metrics Webapp





  



# 📗 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

> This React capstone project is about building a mobile web application to check a list of metrics (numeric values) that make by use of React and Redux.

## 🛠 Built With 

### Tech Stack 

  Technology

  


    React

    SCSS

    Redux

    Redux Toolkit

    React Router Dom

  


  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 regions and countries of that region that could be filter**

- **Detail page for the country details; in the example, the detail page for Czech Republic cities with number of views.**

(back to top)


## 🚀 Live Demo 

https://user-images.githubusercontent.com/55840999/218153654-be83251f-4a86-4c5e-89a4-ccde3aa9fc02.mp4

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

- [Presentation slide](presentation_slide.pdf)

- [Presentation Link](presentation_video.mp4)

(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]:shahadat3669/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

```

Launches the test runner in the interactive watch mode.\

See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

```bash

  npm run build

```

Builds the app for production to the `build` folder.\

It correctly bundles React in production mode and optimizes the build for the best performance.

Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

## 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 

### First Author:

**Shahadat Hossain**

[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://github.com/shahadat3669) [![linkedin](https://img.shields.io/badge/shahadat_cseng-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/shahadat-cseng) [![twitter](https://img.shields.io/badge/@shahadat3669-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/shahadat3669)

(back to top)


## 🔭 Future Features 

- [ ] **We will implement city details page**

(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/).

- [Rest Countries API](https://restcountries.com/)

- [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)