This project represents an air quality monitoring system that tracks various pollutants in different countries. The main interface provides a list of pollutants, detailed information about a selected pollutant, a list of top countries, and a world map.
MainView.js is the main file that brings all the components together. It fetches and displays data about various pollutants from different countries. You can also search for a specific city's pollutant data in the search bar.
DetailedView.js is the second file that brings all the components together for detailed pollutant data. It fetches and displays data about various pollutants from a searched location using the getLocationData function.The data, once fetched, is displayed in a NewDetailedChart.js. A Pollutant List and Pollutant Details are displayed alongside a detailed chart of pollutant levels in the selected location.
HistoricalView.js is similar to DetailedView.js, but instead focuses on displaying historical data of pollutant levels from a selected location. It uses a HistoricalForm for users to input the desired data range. The data, once fetched, is displayed in a NewHistoricalChart.js.
PollutantList.js displays a list of pollutants. Clicking on a pollutant updates the selectedPollutant state in all views.
PollutantDetails.js displays detailed information about the selected pollutant.
TopCountries.js displays the countries with the best pollutant values.
WorldMap.js displays a world map indicating the amount of pollutants in each country.
NewDetailedChart.js and NewHistoricalChart.js both components visualize the fetched pollutant data in a chart format.
HistoricalForm.js creates a form used in the historical view to input the desired data range.
This file contains the styles for all views, including the navbar, search box, map container, and pollutant list.
This file contains the styles for the list of pollutants.
This file contains the styles for the detailed information about the selected pollutant.
This file contains the styles for the countries with the best pollutant values.
This file contains the styles for the form used in the historical view to input the desired data range.
The application uses the OpenAQ API to fetch air quality data across the globe. The main API endpoints used are:
- 1: ...
- 2: ...
- 3: ...
The application interacts with the OpenAQ API via multiple functions, each one serving a distinct purpose:
- getCountries(): Fetches the latest available air quality data for all countries.
- getCityData(city): Fetches the air quality data for a specified city.
- getCountryData(country): Fetches the air quality data for a specified country.
- getCurrentData(): Fetches the current air quality data.
- getAllCities(): Fetches data for all the cities in the database.
- getAllPollutants(): Fetches all pollutants data.
- getCountryCode(country): Fetches the air quality data for a specific parameter and geographical location between two dates.
The application uses the useState and useEffect hooks for state management and side-effects respectively.
This project utilizes the following outside libraries:
- React Router: Used for setting up navigation between different components in the application.
- React Router Dom: It is used to handle routing and navigation in the application.
- Axios: Used for handling HTTP requests to the API.
- React Google Charts: Used for rendering the map and charts based on pollutant data.
The following resources were consulted during the development of this application:
- React documentation: For understanding the fundamentals of React and its hook system.
- React Router Documentation: For implementing routing in the application.
- Using Axios with React: For fetching data from APIs.
- React Google Charts Documentation: For rendering the map and charts.
- Clone this repository.
- Run npm install to install all the dependencies.
- Run npm start to start the application.