EcoFinder

What it does

EcoFinder helps you find environmentally friendly alternative products to the one you are about to purchase. It is a one-click system that generates a link to more sustainable options on the same website with the help of OpenAI GPT-4 API. It currently supports Amazon, Walmart, Ebay, and Target websites.

How we built it

I used React, Typescript, and Lucide React to build the frontend of the application, and used Webpack bundler to make it work as a Chrome Extension. I integrated OpenAI's GPT-4 model to be the driving force behind the alternate product recommendation system.

Challenges we ran into

Setting up the Chrome Extension environment with React and Typescript was much harder than I thought. Since it's usually just done with plain HTML/CSS/JS, going my route meant researching a lot more on how to get the project running. Once that was up and running, progress was pretty smooth sailing.

Accomplishments that we're proud of

Fine-tuning the model was a pretty satisfying process. I started off with a vague prompt, leading to awful response structures and painful parsing logic. However, I slowly refined the prompt by removing fluff, giving concise instructions, and example output structure. I was really proud when the parsing finally worked and the output looked nice.

What's next for EcoFinder

So much more potential! Other than supporting more websites, in the future I hope to be able to showcase the difference in price and rating between the current and alternative products, so that it is more obvious what kind of deal you are getting. Adding more dynamic animations and styling would be a plus.

Built With

• lucidereact
• openai
• react
• typescript
• webpack