CarbonCompass

CarbonCompass tracks your carbon footprint based on your travel using Google Maps data. Wonder how much taking an Uber instead of a bus when you had a flight cost the environment? Let's find out!

Comment 1

Inspiration

We are an international team that has experienced the benefits of public transportation across the globe. Especially in places like Hong Kong, India, and Bangladesh where public transport like trans and subways play such an essential part of daily life, it didn’t take long for us to realize that Houston has one too many cars on the road, and also bad drivers. Houston’s car-centricity has made us question, just how much of a carbon footprint do we make when having to ride 30 minutes to China town one way? Just how much less of a footprint could we make with alternative means within our daily lives? Our team decided to dedicate this project to helping others like us cut down on how much they drive, lowering our carbon footprint. We wanted to provide an overview of our daily actions, such as trips to China town, that increasing our carbon footprint, to further gain insight into what daily routines we can do differently to lower footprints

What it does

With our goal of helping others gain further insight into their daily routines to lower their carbon footprints, we were thus off to building Carbon Compass. Carbon Compass is a full-stack web app that takes in your Google Takeout and Maps data and outputs the carbon footprint of your most common routes, alongside how much carbon you would save using alternative means of transport. We also have a heat map implemented to help users visualize where they visit the most and the main route used for the trip. None of the back end data except an optional username and carbon saved score is stored for a leaderboard, where sharing your data to the leaderboard is completely voluntary, primarily serving as an opportunity to share results or compete with friends.

Allow users, especially those living in car-centric communities, to get an estimate of how much carbon emissions they waste by looking at users’ recorded data from Google Takeout and Google Maps, letting users upload their own location data while not having the backend store any of that data besides an option to share their results with friends.

How we built it

We built Carbon Compass with React as our front end framework, Vite for our local development server due to its speed, Tailwind and Headless UI for styling and UI components, React Router for our routing, Firebase for our backend, and Firestore for our database.

On the backend, we used Firebase because of its ease in fetching data about other users and their carbon footprint scores, alongside the flexibility in users joining leaderboard groups easily thanks to Firestore’s JSON-like structure as opposed to regular relational databases

We also worked with the Google Maps API to display the routes taken between 2 places, and also worked to create the heatmap display to show frequent travel paths to the user.

Vite was a key build tool that allowed us to quickly save and then automatically rebuild our changes, displaying it near immediately in the browser and making the development process much faster.

React router, a package for routing pages in React, abstracted away many intricacies and behaviors of routing and navigating to different pages, making going to the leaderboard and uploading files seamless.

React allowed for very stateful and straightforward data flow between views and models, pivotal for us when we loaded data from the zip file and had to process it first, which we can then display different kinds of components depending on the data.

Challenges we ran into

Some of the main challenges we ran into include integration with the Google Maps API, especially with embedding maps as there was not an officially supported react library. Another challenge we faced includes heatmap point densities not appearing due to skewed averages. We also had to use useContext, useState, and useEffect in tandem to create a persistent map that was otherwise impossible via google's standard API. We also faced a problem with how newly selected routes didn’t overwrite previously selected routes. Outside of those major issues, other smaller ones included Firebase issues with setting up the database and fixing permission issues, alongside DNS record issues and setting its value since it was our first time setting up domains.

Accomplishments that we're proud of

One of the accomplishments we’re proud of include having gotten up to speed with tailwind (which was new to us at the time). We’re also proud of how we have gotten much more accustomed to Typescript and keeping our programs type safe, as many of our previous web development projects have been purely JavaScript. Another thing we are proud of is simply getting the APIs and heatmap to work even with all the constraints and bugs with html embeds. Finally, we are also proud of gaining experience with DNS records for setting up domain names, as we had deployed on Vercel and set up our .tech domain name.

What we learned

Some of the things we learned was how to work with Google’s pre-existing APIs and setting up API keys. Knowing how to work with and manage API keys, along with performing API requests is an extremely valuable skill within modern day software development, so we are happy to have really solidified our understanding of it. Further, we learned much more about how to use Vite and its extremely fast local development server. We also learned how to use Zip.js to read zip files, implement parallax, and efficiently parse a large scale using JavaScript. One main learning was how to use useContext in a complex user experience, especially with a project of this scale. This will help us with future projects especially when dealing with state management.

What's next for Carbon Compass

Our team is thinking of implementing ML models to find frequent routes that users take, and suggesting actual alternative routes on the breakdown page. Further, we are hoping to add accessibility friendly features, such as supporting screen readers, and integrating our platform with other forms of location capture outside of Google Maps, such as Android’s activity tracker or Life360, which has extremely comprehensive data on location patterns.

Built With

Share this project:

Updates

Submission history