This project was bootstrapped with Create React App and Redux.
The Air Pollution Report Centre project is a web application that provides detailed metrices of several air pollutants in the atmosphere for a particular country in Africa.
Rocket Section Missions Version
This Single Page App was built with React-Redux. The main page (Continent Page) was built using data gotten from this Covid19 API. The main page renders the following details about African Countries and Islands in the ReactDOM:
- Total Population of people in Africa
- The current date
- Each country's flag and
- Each Country's Population
Each country's card has links to its particular page that displays the country's air pollution data for emmisions of air pollutants into the atmosphere.
The project uses React's useLocation() to link to each country's page and modify the URL Path for each country
The Country's Page was built using data fetched from this Air Pollution API. The API takes the latitude and longitude of each country as a parameter in its URL Path before data from the API can be successfully fetched. The latitude and longitude for each country was passed from the React Router's Link using the state key in the uselocation() object.
The country page displays the data about the emission of the following air pollutants into athmosphere for each country:
- Carbon Monoxide (CO)
- Nitrogen monoxide (NO)
- Nitrogen dioxide (NO2)
- Ozone (O3)
- Sulphur dioxide (SO2)
- Ammonia (NH3)
- and particulates (PM2.5 and PM10).
The following key can be used to understand the metrices displayed on each country's page:
| Qualitative name | Index | Pollutant concentration in μg/m3 |
|---|---|---|
| NO2 PM10 O3 PM25 (optional) | ||
| Good | 1 | 0-50 0-25 0-60 0-15 |
| Fair | 2 | 50-100 25-50 60-120 15-30 |
| Moderate | 3 | 100-200 50-90 120-180 30-55 |
| Poor | 4 | 200-400 90-180 180-240 55-110 |
| Very Poor | 5 | >400 >180 >240 >110 |
You can learn more about calculation of Air Quality index by clicking this Link
-
- Javascript, CSS
-
- ReactJS, Redux, React-Redux, React Bootstrap
-
- Webpack, Babelrc, Linters
To get a local copy up and running follow these simple example steps.
git clone https://github.com/Gambit142/AirPollution-Report-Centre.git
and then run
npm i
npm start
to build a production version to bulid folder run
npm run build
👨🏿 Francis Ugorji
- GitHub: @Gambit142
- LinkedIn: Francis Ugorji
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Hat tip to Microverse for the opprotunity to learn ReactJS and React_Redux using their platform
- The COVID19 API was used to retrieve data that was displayed on the Continent Page (Home Page)
- The AIR POLLUTION API was used to retrieve data that was displayed on the Country Page (Home Page)
- The UI for the page was designed using a this Behance template by Nelson Sakwa
- The background image used on the Country's Page was gotten from Pexel's website captured by Leboutillier