-
-
New Leaf
-
Product Recommendations for Leggings
-
Product Recommendations for Bottle
Inspiration
Justin: I was inspired by watching Hasan Minhaj’s show on fast fashion; he highlights how wasteful new consumer products are in their production and consumption. Having to buy a new pair of running shoes, I realized that on Amazon there was no real way to see how wasteful a product was or find more environmentally conscious products.
What it does
New Leaf is a plugin for chromium (works on Chrome and Edge beta) that launches whenever you visit an Amazon product page website. It will suggest a few products that are environmentally friendly, show a picture, a general price range, and link to the product.
How we built it
- Python web scrapers to get product name, price, description and links
- Node/ Express server that accepts request from the chrome frontend, queries the dataset for products, and scrapes a website if it misses the dataset and returns to the plugin
- React Chrome Plugin that queries the DOM for a product name and hits the backend for products and displays the results in a modal
Challenges we ran into
There are no good repositories of products made from recycled materials online that generalize to an american audience. For example, California has a database of california-only products. We had to build web scrapers to pull together data from a multitude of sources to build our dataset. Furthermore, if a product category misses our dataset, we search generalized green websites for products. Mapping a product name from amazon to a group of products in the dataset was difficult. We use a few NLP procedures such as stemming and key-word matching to get better fits Figuring out how to write a chrome extension as a react app was pretty challenging - there were certain steps such as “ejecting” the react application so that we could inject content scripts that were difficult to realize. There are a lot of firsts on the team Justin: first time building the back end (Node/ Express) Jahaan: first time coding in javascript, first time building a scraper Krishna: first time coding in javascript Anand: first time writing a chrome extension, first time using flexbox
Accomplishments that we're proud of
Jahaan: As a mechanical engineering major, I haven’t really used any coding languages for any significant projects. The most I’ve done is make a calculator using MATLAB. Being thrown into a timed project really made me learn on the fly, and take a much more hands-on and improvised approach to learning than I’m used to. Even though I still depended on my teammates for the vast majority of my code, it felt great to have my very own web scraper (eventually) work. At the beginning of the project, my teammates were essentially speaking another language, but they took the time to explain concepts to me in a way that I could understand. By the end, I actually grasped some of what they meant, a huge improvement from the beginning. This was my first hackathon, and this whole experience really showed me the appeal.
Justin: Building the backend. I usually only do front end.
Krishna: It has been a long time since I last worked on a software project at any level; the accomplishment I am most proud of is simply picking the tools again (visual studio, git, python, etc.), playing around with them, and being able to produce something functional (in this case, a web-scraping application). Moreover, being able to read up on and better familiarize myself with the current accessibility of recyclable products has been quite eye-opening as well.
Anand: This was the first time I’ve written a chrome extension, and generally done anything on the front-end in a while. Refreshing my skills in react and javascript felt good. I was proud of being able to inject my content script into an amazon web page and use background scripts to do an action when the icon was clicked. I’m also proud of the way it turned out looking!
What we learned
There is a surprising dearth in repositories and applications that quickly and easily connect users to environmentally-friendly products. The few services we did find were only after performing dedicated searches for specific items or retailers.
Justin: How Node and Express work. I was happy because I got to read a ton of documentation I otherwise wouldn't have been motivated to read.
Krishna: When developing a website or other server-esque application, there are multiple ways to allow others to connect to your server and/or communicate with it. In order to make our plugin usable by users outside of our local networks, we need to establish some way to direct users to our server. One way of doing this is port forwarding; however, this method is not entirely secure, and can redirect an unwanted amount of traffic to our server. Therefore, for our testing purposes, we instead used ngrok, which provides us with a more secure and streamlined way to interact with and test our application.
Anand: Learned more about the DOM and how javascript interacts with it and more about the chrome engine. Also learned more about flexbox css.
Justin: I’ve had some idea of what web scraping was, but actually getting to work on one was entirely different. I’ve also never seen or used HTML before, so using HTML code in Python web scrapers was a really great learning experience! I also got to understand more about how programs talk to each other, and how to read responses in general. This whole hackathon was one big learning experience for me!
What's next for New Leaf: Green Consumer Purchasing Recommendations
The product matching algorithm can use some work. We can implement a fuzzy string matching for key-words. We can potentially use machine learning algorithms for matching such as cosine similarly or other multi-class classification models (QDA, LDA, SVM, etc).
We can also grow our dataset. This is a manual and laborious process.
Finally, we can try to publish our extension on the chrome webstore!
Log in or sign up for Devpost to join the conversation.