Airate

Better air quality awATEs!

Comment

Inspiration

Due to the recent unanticipated spread of wildfires, especially across Canada, the air quality has worsened in the most affected regions, causing breathing difficulties in the most affected areas, such as Montréal, Ottawa, Toronto, and Yellowknife. Thus, we were inspired to create an application that allows users to determine the air quality in the various regions of their city to make informed decisions regarding safety precaution measures against poor air quality.

What it does

Airate is an application that provides users with the air quality rating reported by the government and allows them to provide their own rating of the air in their region each day, building up an air quality map displaying the spread of user-inputted air quality data of numbers based on the Air Quality Health Index (a number from 1 to 10+, displaying the best to worst air quality). The app also includes a social aspect that allows users to connect with others in their region, displaying a leaderboard of the most active users and their points collected from logging in their daily air quality rating.

How we built it

We split into two pairs, where two of us worked on the front-end development, creating the user interface using Figma before converting it to HTML and CSS code. The other two of us worked on the back end, some aspects of it including the creation of databases using PHP and the implementation of APIs such as Google Cloud. Finally, we combined the front and the back end by allowing for interactions between the two to create our final, usable, application.

Challenges we ran into

One challenge for the front end was accurately converting the complex Figma models into HTML and CSS as beginner HTML and CSS users, especially given that some of our graphics were originally reformatted in Figma and did not all carry over the same modifications. Regarding the backend, some challenges involved the decision between various possible APIs and languages given the different pricing points and features provided by each available framework.

Accomplishments that we're proud of

One accomplishment that we are really proud of is successfully completing the interactions between the backend and the front-end programming, given that both the front-end and the backend components of the project were already relatively complex on their own. Additionally, the creation of the UI/UX design is an aspect of our project that we put a lot of effort into and believe that it paid off, given the sleek and modern design of the application.

What we learned

For this project, all of the members decided to step out of their comfort zones, where if we were more well-versed with the front end, we decided to work on the backend development instead, and vice versa, in order to provide ourselves with the opportunity to develop our well-roundedness and full-stack development potential. Thus, each of us developed further the skillset associated with the role that we took on, such as working with databases and API in developing the backend or developing the flow of front-end design from idea visualization on Figma to the actual creation of the designs using HTML and CSS.

What's next for Airate

Next for Airate, we plan to implement AI image recognition to analyze pictures of the air and determine the air quality rating to further improve the accuracy of the ratings provided by the users. To also increase the information with which we provide users, we also will incorporate open-source data from weather APIs and Environment Canada air quality statistics. Overall, from AI image recognition to data analytics, we plan to bring many more features to the application to help users increase their health awareness and improve their air quality safety precaution measures.

Built With

Share this project:

Updates