With the unfortunate circumstances of Covid-19, we have seen how drastic the impacts have been. Travelling has been very restricted and less people have been going out to take protective measures. However, this has also weakened humans' impact on the environment, due to less carbon emissions from vehicles. As Covid-19 slows down, travelling is bound to become much more prominent, and it is necessary to ensure that this freedom to travel does not hamper the environment. Additionally, it has been proven multiple times that transportation is the largest contributor to individual carbon emissions, even by statistics Canada. As we recognized the significance of travel in our daily lives, we combined this with our love for technology and thirst to create a practical and innovative product to provide the carbon emission data necessary with calculated suggestions and solutions without the need for a third-party app or browser extension. Navi-Green lets you find out where you need to go while calculating your carbon emissions and documenting your footprint all in one program!

What it does

Navi-Green is a mapping platform that allows users to determine optimal travelling routes, whether it be individuals or businesses, and also get directions and distances when travelling from one place to another. Most mapping and navigation tools such as Google Maps do not provide carbon emissions data directly, leaving people estimating or ignoring the impact they have on the environment. This application ensures people are aware of their carbon emissions and provided the resources necessary to take action, through multiple functions including a carbon footprint based off travel distance (which calculates trees needed to offset as well), a plastic logger, and an optimization route page.

How I built it

HTML, CSS, and JavaScript make up our application, combined with multiple APIs, libraries, and frameworks. Much of the responsive and interactive interface was curated thanks to built in frameworks and libraries including bootstrap and jQuery. The calculators and plastic logger were hard coded in javascript, and much of the styling was through CSS. We curated appealing animations through open source libraries such as particles.js and data-aos. The maps were curated using APIs provided by mapbox, as well as turf.js application.

Challenges I ran into

Working with advanced frameworks and libraries made much of the styling quite difficult, especially when creating the Plastic Logger and Carbon Footprint Calculator. Additionally, we would have liked to automatically retrieve the distance element from the map to automatically generate carbon emissions data, but unfortunately we were unable to identify the element within the Mapbox API, and thus worked around it by creating an input field that would require the user to type in the distance before generating calculations.

Accomplishments that I'm proud of

We are proud of curating such as well-designed project in a time frame of 24 hours, especially considering for most of us this is our very first hackathon.

What I learned

I learned a lot about working with libraries and APIs, as well as getting the opportunity to delve into more advanced javascript.

What's next for Navi-Green

It would be great if Navi-Green could be converted into a mobile application that could be downloadable on the google play or App store. Additionally, being able to utilize GPS data to create a real-time carbon-emission tracker would make a really cool side project that could add on to what we have already created. We could definitely widen the scope of this project greatly, as it provides many practical applications.

Share this project: