We were inspired to pursue the Canvas track because of its clean link between technological development and aspects of our everyday living. We wanted to make a technological contribution that would give greater accessibility or freedom to users who share our same passion for sustainable living. Maintaining the health of our natural environment is very important and we decided to make our mark by creating a web platform that can recommend products with greener alternatives for more convenience for online shoppers who are looking for a specific product.
What it does
The backend of our database consolidates information from spot.ul.com by scraping information from their listing of green products. It holds product name information as well as a description, and ideally photos. GreenGen takes in user input for the product the user is looking for -- it should be able to toggle between modes for specific product name matching or a link to a website posting. When the user clicks on the search button, our goal is to output a list of similar products with greener alternatives that show up on the page with their name, description, and photo so the user can pick their cleaner replacement. The website extension is designed to do much the same thing, except as a drop-down addition to a browser window for quicker, more isolated access.
How we built it
In the backend, we found green product data (brand & pricing) and stored it in a database. We used Google Cloud Vision API to identify the user product when the user either sends a link to the image or the name of the product (which would be fetched to the backend). We then paired MongoDB with Google Cloud and deployed it on the Google App Engine as part of the MERN stack workflow. In the frontend, we designed a toggle feature next to a search bar to toggle between the user either using the link searching feature or searching by product name. When the search bar is clicked, a dropdown of alternative greener products show up. This was done in React.js.
Challenges we ran into
We struggled during the process of integrating the two pieces of the frontend and backend, specifically with fetching data from frontend. The frontend itself has interactive buttons, toggles, searches etc. that perform independently and send data to one another correctly, but connecting the events to one another as well as the built database proved finicky and difficult to configure. As a result, the two pieces are half-integrated; the full stack experience was new to all of us and experimenting with the linking process was both fascinating and decently confusing.
Accomplishments that we're proud of
We are very proud of learning, using, and applying several languages and frameworks that we were originally unfamiliar with (namely React.js and node.js). In learning these two languages for the frontend and backend respectively, we were able to build a working search bar that is integrated with any input data, fetches match results based on live input from the user, and presents a list of matching terms from the input. The navigation bar also links resources to finding your carbon footprint as well as a way to contact the creators of the webpage if any questions or concerns with the product arise. Additionally, we hooked up the information scraped from the green product site into our database through MongoDB, and created the basics of a browser extension that performs quick lookups when the user wants less detailed explanations and a lighter experience.
What we learned
We learned how to set up, develop, and deploy applications in React.js and node.js, which most of our group was initially unfamiliar with. The MongoDB database was also a new endeavor while integrating the MERN stack to link all of our information together. We experimented with using Bootstrap and the Google Vision API while building, which we did not end up pursuing because of the time crunch. However, we would love to continue building and integrating with these features moving forward!
What's next for GreenGen
In the future, we envision GreenGen as a complete pairing of webpage and browser extension so that users can shop sustainably using their favorite shopping sites as a fluid experience. The built-in extension would reduce the hassle of navigating to the website every time, and makes sustainable shopping easier, and thus, hopefully more popular. For both platforms, we want to make sustainable products searchable through a link of the original product, which is not currently supported, to make the transition to sustainable shopping smooth. As mentioned previously, being able to search for a product by image would also be extremely helpful to finding listings that are perhaps named differently but have the same features. This would be implemented by continuing our pursuit of the Google Vision API as well as adding new elements to our webpage to allow for image upload and transfer. For the webpage, we had the vision to create floating tiles with information about the benefits of green shopping as well as other facts to encourage other avenues of sustainability in our everyday lives to prompt for increased environmental awareness.