Planty

Planty is an easy to navigate and interactive chrome extension that helps you reduce your carbon footprint.

Comment

Inspiration

Our team is extremely passionate about the personal choices people make that can help address climate change. Often, we feel extremely helpless when faced with the issue of environmental sustainability but since agriculture is attributed to 24% of greenhouse gas emissions, the food choices we make can have a big impact on the environment. For example, switching from beef to chicken to salmon to veggies to lentils in a meal can drastically reduce the carbon footprint of your diet. Sustainable food alternatives is a key action that can be taken to positively impact the planet and Planty was made in order to help individuals make better food decisions when looking at recipes online.

What it does

Planty is a chrome extension that is easy to access and intuitive to use while still giving enough functionality to the user for its purpose to be achieved. Users can open the chrome extension while browsing different recipes. Planty will then identify and display all the food items which produce high carbon emissions, suggest alternatives and calculate the total carbon impact of the recipe with any alternative foods that are selected. This helps users become more environmentally conscious of their carbon footprint and provides resources to help them lower it.

How we built it

We began by prototyping our extension design and the user interaction with Figma and then converted the designs into HTML and CSS. We then integrated the interface with a chrome extension we built. After, we set up a firebase database with food and their respective carbon footprints as well as alternatives with their respective carbon footprints. We connected the database to the front end web pages by using Javascript. Additionally we also used a recipe web scraper and used browserify to connect it to our database. We were able to retrieve the food with the highest carbon footprints from our database along with their alternatives and display them for users to see on our chrome extension using javascript.

Challenges we ran into

We ran into numerous challenges while creating this project. Our team decided to center this hackathon experience on learning and improving our existing skills, therefore, we decided to challenge ourselves with designing our very first Chrome extension. We had to overcome numerous obstacles as our team had limited HTML, CSS, and Javascript experience. This meant we had to do extensive learning while creating this project, essentially building this whole project without previous experience with many of the components. Additionally, we ran into problems with Firebase and node.js. We needed node.js components which could not run with our firebase code. This required extensive research and many google searches until we finally found browserify which helped us connect the two. This was just one example of the many unexpected issues that arose. Finally, as this was an online project and we were all working remotely we encountered some hurdles that came along with the nontraditional workflow of communicating online versus in-person hackathons that our team had to acclimate to during the whole project duration.

Accomplishments that we're proud of

Our team was very proud of our work, not only for what it stands for : protecting our environment and tackling issues of sustainability, but also for its high functionality. In these 48 hours, every member of our team learned new tools and soundly grasped concepts such as web scraping, database structures, and UI design. The moment that we were able to go from being unable to even understand documentation to seeing the finished product was a magical moment to us as we saw the fruits of our effort materialize before our eyes.

What we learned

The growth during this project was phenomenal. From brainstorming and the initial design process on Figma, to creating a dynamic Google Chrome extension, each member was stretched in numerous ways. Each member was able to further their skills in HTML and CSS as we learned how to create more dynamic web pages. Additionally, our team expanded our skills with the firebase realtime database. We also learned a plethora of new skills including implementing web scrapers, utilizing browserify and other web services to bundle modules, and developing event listeners for our Chrome extension. Moving away from technical skills, we also gained many soft skills. We were able to increase our teamwork abilities and also our time management skills as our team utilized effective and clear communication to work together to ultimately reach our goal of creating our first-ever Chrome extension. Overall, we all gained numerous new skills to add to our toolkit.

What's next for Planty

All our team members have a deep interest in the problem of food sustainability and personal action that can contribute to tackling climate change. We are interested in developing Planty to be posted on the chrome store to help more people reassess the impact of their diet choices on environmental sustainability.

Built With

Share this project:

Updates