https://github.com/newhoteng/metrics

Metrics is a single-page-application built with react and redux. It fetches air quality data for selected cities from an API and displays the cities with their corresponding air quality index (aqi) on the homepage. Clicking on a city on the homepage directs users to a details page which lists the concentration of the various pollutants.
https://github.com/newhoteng/metrics

css-modules react react-router react-testing-library redux-toolkit snapshot-testing spa unit-testing webpack

Last synced: 14 days ago
JSON representation

Metrics is a single-page-application built with react and redux. It fetches air quality data for selected cities from an API and displays the cities with their corresponding air quality index (aqi) on the homepage. Clicking on a city on the homepage directs users to a details page which lists the concentration of the various pollutants.

• Host: GitHub
• URL: https://github.com/newhoteng/metrics
• Owner: newhoteng
• License: mit
• Created: 2023-05-21T07:43:08.000Z (over 1 year ago)
• Default Branch: dev
• Last Pushed: 2023-09-17T12:31:34.000Z (about 1 year ago)
• Last Synced: 2023-09-17T14:44:23.721Z (about 1 year ago)
• Topics: css-modules, react, react-router, react-testing-library, redux-toolkit, snapshot-testing, spa, unit-testing, webpack
• Language: JavaScript
• Homepage: https://metrics-59av.onrender.com/
• Size: 782 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


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

  - [Prerequisites](#prerequisites)

  - [Setup](#setup)

  - [Install](#install)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)

#  :open_book: Metrics 

Metrics is a single-page-application built with react and redux. It fetches air quality data for selected cities from an API and displays the cities with their corresponding air quality index (aqi) on the homepage.

Clicking on a city on the homepage directs users to a details page which lists the concentration of the various pollutants.

[Project Presentation](https://www.loom.com/share/07ed6516058e4ce99520650861cc6ae5)

## :hammer_and_wrench: Built With 

### Tech Stack

Client



  
React



Backend



  
Air pollution API



### Key Features

  - Home page that displays cities with corresponding air quality index (aqi)

  - Details page that displays concentration of pollutants

  - Single Page Application

  - Styled using CSS modules

(back to top)


## :rocket: Live Demo 

- [Metrics](https://metrics-59av.onrender.com/)

(back to top)


## :computer: Getting Started 

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


### Prerequisites

In order to run this project you need:

- [Node.js](https://nodejs.org/en) installed on your machine

- Text editor

### Setup

Clone this repository to your desired folder:


```

git clone https://github.com/newhoteng/Metrics.git

```

### Install

Install this project with:


```

npm install

```

(back to top)


## :busts_in_silhouette: Authors 

:bust_in_silhouette: **Harriet Oteng**

- GitHub: [@githubhandle](https://github.com/newhoteng)

- Twitter: [@twitterhandle](https://twitter.com/HarrietOteng1)

- LinkedIn: [LinkedIn](https://www.linkedin.com/in/harriet-oteng-75554666/)

(back to top)


## :telescope: Future Features 

  - Add svg maps

  - Explore other monochromatic color schemes

(back to top)


## :handshake: Contributing 

Contributions, issues, and feature requests are welcome!

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

(back to top)


## :star: Show your support 

If you like this project follow me on GitHub.

(back to top)


## :pray: Acknowledgements 

- Original design idea by Nelson Sakwa on Behance.

- Thanks to Microverse for encouraging me to do this project.

(back to top)

  

## :memo: License 

[License](https://github.com/newhoteng/Metrics/blob/main/LICENSE)


(back to top)