ScanTerra

Scan a product's barcode and get an eco score out of 100 with a one-line reason, so you're not guessing how sustainable it is.

Event
TerraHacks 2024
Built
August 2024
Role
Full stack (scanner, API routes, landing page)
Team
Leo Cheng, Kevin Huang and me

How it works

  • The camera reads the barcode in the browser with react-zxing.
  • A Next.js API route looks the product up with the Barcode Lookup API and drops empty fields.
  • A second route sends the product details to Claude (Anthropic's API) and asks for JSON back: a score out of 100 and a short reason.
  • The result shows in a card with a circular score bar.

What I built

  • Project setup with shadcn/ui and the barcode scanner component.
  • The first versions of both API routes (product lookup and scoring), with the API keys in environment variables.
  • The landing page (hero with a Spline 3D model, features and call to action), the loader, the scan button and the result card.

Team

Leo built the scan logic, local history with localStorage, the circular score bar and the CO2 graphic, and reworked the APIs with me.

Stack

Next.js 14 · TypeScript · Tailwind CSS · shadcn/ui · react-zxing · Anthropic API (Claude) · Barcode Lookup API · Framer Motion · Spline