Inspiration
400 million metric tons of plastic are produced per year, and with the differing rates of decomposition, it will take hundreds of years to break them down. Rising awareness of the impacts that single-use plastics and toxic materials have on the climate has created a group of consumers interested in sustainably sourced products. Through our project, Sustainascan, we want to help this group grow and make greener choices by shopping for products that are certifiably better for the environment. Through our website, users can be assured that the products they choose are actively reducing hazardous chemicals that may be released into the environment and minimizing single-use plastic packaging. Along with showcasing products created by businesses and brands that aim to provide safer alternatives to common commercialized household cleaning items, Sustainascan is designed to provide more information about the certified products and transparency about the certification process.
What it does
Users can scan the barcode of an item, enter keywords into our search bar, or select a category from our menu to search for an item in our database. Relevant items from our database of sustainable products are displayed to the user. Users can then select these item listings to learn more about the products, and how they are sustainable.
How we built it
We looked through several public databases containing information about sustainable products, and decided to use Green Seal to provide the data needed for our project. We first scraped the Green Seal website for all of the product categories they store, and the products associated with each category. We used the Cheerio library to parse this data and extract information about each category and product. Then, we populated our Postgresql database using Drizzle ORM.
After we gathered this data, we built our UI, which is dynamically populated based on our queries to the database. To create this UI we leveraged Material UI (MUI) for enhanced accessibility throughout our website. We implemented a dropdown menu and search bar to allow users to filter displayed products based on category and keywords.
When a user selects a product listing on our website, they will be redirected to a dynamic route that displays additional information about the product that we gathered from the Green Seal site in a user-friendly manner. From here, the user can learn more about the product, what qualifies it as being sustainable, and where they can purchase it.
In addition to searching for items based on keywords and categories, users can directly scan the barcode of an item with the built-in camera of their device. We capture the Universal Product Code (UPC) of the scanned item and query our database accordingly. If the product exists in our database, we redirect via a dynamic route that displays information about the item.
Challenges we ran into
Gathering data from the Green Seal website was the most challenging part of our project. Green Seal has an API that allows for easy querying of their data. However, requests to use this API take 3 business days to process, so we were not able to wait for our request to be approved. As a result, we decided to scrape the Green Seal website. We realized the parsing/filtering abilities of the Cheerio library we used were not powerful enough for the information we wanted to extract. After experimentation, we were able to successfully extract the data we needed with a combination of Cheerio, and regular expressions.
It took some trial and error to implement the scanning-functionality of our project. We experimented with several open-source libraries to facilitate this process. Some of these libraries were not able to accurately extract the UPCs from the barcodes we scanned, and other libraries were too slow.
Additionally, we planned to utilize Gemini API to find the item's name and general description if the product does not exist in our database. We would have queried our database to find items that share keywords with the newfound name and description. This way, we could suggest related, sustainable alternatives to the user. While this planned functionality worked when we tested the API separately, we ran into issues with integrations and could not include it in our main project in time.
Accomplishments that we're proud of
Our team went into this with varying experience levels with one of us having never participated in a hackathon and some of us having little to no website development experience. We are proud to have successfully created a working web application that does the functionality that we wanted. One of the accomplishments we're proud of would be our scanning feature. We went through trials with this feature but it was worth it in the end to help us identify the UPCs from the bar codes and then query our database to find if it is Green Seal Certified.
What we learned
We learned how to work with new and different technologies such as NextJS, React, and Drizzle ORM to create our website. Through this process in addition to learning how to develop a web application, we also learned how to communicate as a team and work in a group environment. This is significant as we created this site from start to finish going through the entirety of the planning and design process to create the site we have now. This experience also taught us how to think on our feet as we worked against the time crunch over this past weekend. Overall, while we did gain coding knowledge, we also gained soft skills that will allow us to be more successful developers in the real world.
What's next for Sustainascan
We plan to expand our database by adding data from other sources, in addition to Green Seal. We will also implement the ability for users to add multiple filters to their item searches at once; for example, filtering by both keywords and categories. In addition to including an AI-powered component to our project by uploading an image and generating a description, we would like to include more AI tools. In particular, we would implement a chatbot that could suggest relevant, sustainable items for the user to learn about, and teach the user more about sustainability.
Built With
- drizzle
- gemini
- mui
- next.js
- postgresql
- react
- supabase
- typescript
Log in or sign up for Devpost to join the conversation.