Carbonara

Inspiration

Besides a passion for protecting the environment, the original idea for Carbonara was inspired by a well-designed water footprint calculator one of our teammates encountered in an environmental science class. One of our major goals was to provide a great experience for our users just like the water footprint calculator. We also wanted to fill a specific niche and provide a unique service. However, as soon as we began to do research on the internet, we found that there were countless other carbon footprint calculators. So we specialized further. Based on the available figures from the EPA’s GHG emissions hub compiled by ClimatIQ such as kg of carbon dioxide equivalent emitted per km a passenger car travels, we determined that travel would be a viable specialization.

Challenges we ran into

Since some team members of our team were not familiar with Chakra UI, a CSS Framework that we used, we had troubles getting around it. Eventually, we overcame this problem by achieving a higher understanding of the CSS framework. Another challenge that we encountered was getting parts of the UI to update. We solved the problem using the useEffect react hook.

What it does

Carbonara calculates the amount of carbon emissions resulting from the activities in a given vacation. The amount of emissions is measured in kilograms of “carbon dioxide equivalent” (a term for all greenhouse gasses in terms of carbon dioxide). Carbonara accomplishes this task by allowing the user to input specific components of their vacation. There are three categories of input: transportation, hotel stays, and recreational activities. Within each category there are different options as well as at least one input allowing the user to enter a number. For example, the transportation category allows the user to input a distance in kilometers. Each category has an “add” button which, upon being clicked, creates an entry in a list below. This way, the user can keep track of all elements of their trip. For example, a user might have taken two car rides during their vacation. They can add them both separately. That way the user is free from the imposition to do the math themself. There is a “calculate total footprint” button below the inputs. When clicked, the app sums up all of the added emissions and informs the user on how many fully-grown trees it would take to absorb the total amount of carbon dioxide in one year.

How we built it

We used the front-end JavaScript framework React.js to build our project. We started by building the homepage. First we structured the page in JSX markup (React’s HTML template engine). Then we styled in CSS. We created a model.js file to store a JavaScript object containing the emissions factors we got from the EPA. We then started to build the calculator page which was the most demanding part of the project. It required the declaration of several object state variables and ample use of React hooks. We coded the dropdown menus so that the options would be programmatically rendered from the data in model.js. That way it would be way easier to add another option to a dropdown menu. This ensures that our application is scalable for the future.

What we learned

During our process of building Carbonara, we learned a lot about React hooks like useState and useEffect. We also learned about how to create deep copies of nested JavaScript objects and about assigning references versus actual values. Additionally, we expanded our knowledge of Chakra UI, a CSS framework.

What’s next for Carbonara

In the future, we hope to add data visualizations for carbon dioxide emissions. We originally wanted to implement this feature but we did not have time due to the time crunch. We would also like to add more emissions factors which will be possible thanks to a scalable design feature discussed “how we built it”.

Built With

• aos
• chakra
• framer-motion
• javascript
• react