/air-quality-data

Created an Air Pollution App using React, Redux, JavaScript, and CSS. The app retrieves real-time air pollution data from the OpenWeather API and maps gas percentages for countries worldwide. Utilized interactive maps and a user-friendly interface for easy data visualization

Primary LanguageJavaScript

React capstone project - Metrics webapp

In this React capstone project, I built a mobile web application to check a list of metrics (numeric values) that I created making use of React and Redux.

I selected an API that provides numeric data about Air Pollution across the globe and then built the web app around it. screenshoot screenshoot2

Built With

  • React (A free and open-source front-end JavaScript library for building user interfaces based on UI components)
  • Stylelint (A mighty, modern linter that helps you avoid errors and enforce conventions in your styles).
  • ESlint (A mighty, modern linter that helps you avoid errors and enforce conventions in JavaScript codes)
  • Redux
  • GitFlow.
  • NPM.

Live Demo

This is the link to the deployed web application.

Video

Video Presentation

Prerequisites

The basic requirements for building the executable are:

  • A working browser application (Google Chrome, Mozilla Firefox, Microsoft Edge...)
  • VSCode or any other equivalent code editor
  • Node Package Manager (For installing packages like Lighthouse, webhint & stylelint used for checking for debugging bad codes before deployment)

Getting Started

Follow these simple example steps.

Prerequisites

You need node js and npm installed on your machine. If so, continue with the next steps.

Setup

Install dependencies by running:

npm install

Usage

Run the live server by the following command:

npm start

Run tests

npm test

Deployment

To deploy this project run the following command:

npm build

and copy the content of the build directory to the root folder of your production environment.

Authors

👤 Nicholas Mutale

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Linters configurations are made by Microverse
  • Design is inspired by a design made by Nelson Sakwa

LICENSE

This project is MIT licensed.