AirFlow+

• 

  Home Page

• 

  Air Quality Station Search

Inspiration

With recent wildfires occurring throughout Northeastern Ontario and Quebec, we noticed a changed in air quality throughout the city of Toronto. There had been a constant odour as well as visible smoke during a period of time. Discovering that these pollutants can reach hazardous levels, we wondered on how we could avoid this issue.

What it does

Our web application, AirFlow+, aims to raise awareness about the potential health risks when exposed to poor air quality. AirFlow+ brings in methods to alert people on how to tackle poor air quality safely. Our application also informs the user the current air quality level and type of pollutant by fetching real-time data from global quality stations.

How we built it

AirFlow+ was initially designed in Figma in order to establish our application's layout and functionality. We utilized IQAir API to fetch real-time data on cities that have an air quality station. Our web application was created using React.js and deployed using Heroku.

Challenges we ran into

A challenge the team ran into was dealing with the conditional rendering and displaying the air quality data from the IQAir API.

Accomplishments that we're proud of

We are proud that we are able to submit a working web application that fetches data from an API. It is especially rewarding to us as we are new to React and were given a timeframe for this project.

What we learned

We learned and improved on our basic React.js knowledge as well as being able to utilize an API without the help of any external sources meant for that specific API. We were able to learn and understand how data in JSON files worked.

What's next for AirFlow+

We aim to add these next features onto AirFlow+ as we did not find enough time to incorporate these cases: *Add a chart to the Air Quality searched up by the user, incorporating Chartjs *Adding an API that gives real-time data on current news articles about air quality *Adding more design such as our own logos

Built With

• figma
• iqairapi
• react