Inspiration

People want to shop sustainably but the data is buried in reports and NGO databases. EcoAudit was born from a simple question: why isn't there a tool that tells you, instantly, how sustainable a brand really is?

What it does

EcoAudit is a sustainability dashboard that lets you scan any product with your camera, get an AI-powered sustainability score, and track the environmental impact of your spending over time. It also shows a global map of brand impact and a ranked breakdown of the companies you buy from most.

How we built it

Vanilla HTML, CSS, and JavaScript frontend with a Node.js proxy to keep the API key secure. The Product Scanner uses the Canvas API to freeze the camera frame and draw a live perimeter trace animation while Claude Vision analyzes the image simultaneously. Brand logos are pulled from the Clearbit API and the impact map runs on Leaflet.js.

Challenges we ran into

Pausing a video element stops it from feeding frames to Canvas, which broke our scanning animation. We fixed it by capturing the frame into an offscreen Canvas, converting it to an ImageBitmap, and redrawing it every animation tick while the API call ran concurrently. Getting the design to feel genuinely organic — not just a rounder spreadsheet — also took several full redesigns.

Accomplishments that we're proud of

The camera scan-and-trace experience feels surprisingly fluid for pure vanilla JS. Claude Vision identified products accurately even in real-world lighting conditions, which we weren't sure would work until we tested it.

What we learned

Claude Vision is remarkably capable at identifying consumer products from camera images. We also learned that design communicates values — a sustainability app that looks sterile and corporate sends exactly the wrong message.

What's next for Eco-Audit

Community-sourced sustainability flags, and carbon offset integrations directly in the app. Social media integrations and blogs where people can promote sustainable events and insights.

Share this project:

Updates