Eco Picker

Our app, a Chrome extension and website, informs users about product sustainability, suggests eco-friendly alternatives, and calculates total carbon emissions, fostering mindful consumption.

Comment

Inspiration & Solution

268 million tons of waste are dumped into landfills every year by the United States only. Half of this waste comprises plastics and food waste, which are avoidable. In an effort to raise awareness about the environmental impact of individual shopping behavior, we developed a Chrome extension, Eco-Pick, that displays the product’s sustainability score and the user's potential carbon footprint when they are online shopping, enlightening them about the consequences of their purchasing choices. Furthermore, it suggests alternative items that are more environmentally friendly than the current options. Complementing the Chrome extension, we also created a web version of Eco-Pick. This allows users to explore products from various stores and discover eco-friendly alternatives. Users can track their carbon footprint, calculated from both purchased items and those in their shopping cart.

Learning Curve and Our Project

Throughout the project, we delved into new software and coding techniques, including using Visual Studio Code for front-end development and crafting a Chrome extension. Additionally, some team members acquired proficiency in new programming languages: HTML, CSS, and JavaScript.

To develop both the Chrome extension and the carbon footprint website, we opted for a frontend tech stack based on a React, Vite, and JavaScript boilerplate repository. This choice provided a solid foundation for our project. To enhance functionality, we incorporated web scraping techniques to extract the product brand name, depending on the site the extension was interacting with.

Challenges

Since we had challenges in sourcing APIs for our project's specific needs, we leveraged Mockaroo to generate mock data. This decision allowed us to streamline the development process and concentrate on building the frontend without being hindered by data availability constraints.For the website version of Eco-picker, we utilized JavaScript, HTML, and CSS to craft the design within Visual Studio Code. This approach ensured a visually appealing and user-friendly interface for users exploring products and alternatives.

In the final stage, we integrated all components by utilizing React, bringing together the Chrome extension and website for a cohesive and functional user experience. This comprehensive tech stack and strategic use of tools reflect our commitment to creating a robust and efficient solution for environmental awareness in online shopping behaviors. However, we encountered an issue: certain CSS codes didn't integrate well, disrupting the website's layout. To address this problem, we assigned unique IDs to each element, preventing misidentification during styling and ensuring a seamless integration of the website components.

Another significant challenge we faced was developing a viable product within a tight 24-hour timeframe. We spent a hefty amount of time on choosing the product to build, outlining the project, and securing resources for the project. This left us with a relatively short time window for actual implementation. Not to mention, half of the team consisted of beginners with limited experience in creating a product from scratch. This means that we had to acquire the required skill on-the-spot. Despite these hurdles, our team demonstrated resilience and adaptability in navigating these challenges within the given time constraints, showcasing our commitment to the successful execution of the project.

In the future, we plan to use Firebase to create a login and user authentication system. In addition, we will transfer our database to a NoSQL server to officially connect the frontend with the backend. .

Share this project:

Updates