Carbon Plate

Inspiration

We eat too much steak. We know this. And yet, every time we read that "beef produces X kg of CO₂ per serving," our eyes glaze over, because a kilogram of carbon dioxide is not a thing our brains can hold. It's an abstract noun pretending to be a measurement.

So we asked: what if we could translate that number into something you can actually picture? Not "4.2 kg CO₂e" but "twelve square metres of phytoplankton working a full year to clean up after your lunch." Suddenly it's not a statistic. It's a small patch of ocean, quietly doing overtime because you wanted a burger.

Carbon Plate started as a napkin sketch at dinner (steak dinner, naturally) and turned into a weekend project we couldn't put down.

What it does

You take a photo of your meal. That's it. That's the whole interaction. Behind the scenes, Claude Vision identifies the ingredients on your plate: the rice, the chicken, the sad little side salad you added for optics. We look up each ingredient against a hand-curated table of carbon coefficients sourced from peer-reviewed datasets (Poore & Nemecek 2018, Our World in Data, ADEME Agribalyse). Then we give you back:

A carbon footprint in kg CO₂e, the standard number, for the numerically inclined. An ocean equivalent: how many square metres of phytoplankton would need to photosynthesize for an entire year to offset this one meal. Swap suggestions: Claude-powered nudges like "swap the beef for chicken and cut 68% of the impact," delivered without judgment (we're in no position to judge). A streak tracker: log meals over time and watch your weekly average. Streaks live entirely in localStorage. We don't have a database. We barely have a plan.

If you don't set an API key, Demo Mode kicks in automatically. Your uploaded photo gets mapped (deterministically, by file size) to one of five canned meals. The streak tracker, the swap math, the phytoplankton guilt: all of it still works. Nobody gets locked out.

How we built it

We wanted something that felt like a sticker you'd slap on a laptop, not an enterprise dashboard. That drove every technical choice:

Astro 5 handles the full-stack: server endpoints for the Claude API proxy, and zero-JavaScript pages everywhere we could get away with it. The entire app is basically one page. Landing, camera capture, and results all live in index.astro.

Alpine.js manages every client-side interaction. No React, no virtual DOM, no build step for interactivity. Alpine gave us reactive UI with the footprint of a sticky note.

Anthropic SDK powers two endpoints: api/analyze.ts sends your photo to Claude Vision for ingredient detection, and api/swap.ts asks Claude for lower-carbon meal alternatives. Both are thin server-side proxies, so your API key never touches the browser.

localStorage is the entire persistence layer. Your streaks, your history, your data: it all lives on your device. We chose this deliberately. No accounts means no passwords means no breach notification emails from us at 2 AM.

The carbon coefficients themselves live in src/lib/coefficients.ts (with a human-readable JSON mirror). Every multiplier (the phytoplankton conversion, the driving-distance equivalent) is a transparent, single-line calculation you can read and challenge.

Challenges we ran into

Coefficient accuracy is a rabbit hole with no bottom. The carbon footprint of "chicken" varies wildly depending on whether it's pasture-raised in Vermont or factory-farmed in Brazil. We ultimately accepted that our numbers are cradle-to-fork-ish averages and leaned into honesty: the about page explicitly calls the result "a vibe check, not a courtroom exhibit."

Claude Vision is impressive but imperfect. It occasionally identifies garnishes as main ingredients, or misses something hiding under a sauce. We tuned our prompts extensively and added confidence thresholds, but the fundamental challenge of "look at this photo and tell me what food is in it" is genuinely hard. We handle ambiguity by showing users exactly what Claude detected and letting them adjust.

Making climate data feel approachable without being dismissive. There's a tonal tightrope between "fun pocket calculator" and "trivializing a planetary crisis." We spent more time on copy than on code. Every line of UI text got rewritten multiple times to hit the right register: honest, a little self-deprecating, never preachy.

Accomplishments that we're proud of

Translating abstract CO₂ numbers into a tangible ocean area was the creative breakthrough that made the whole project click. It turns out people care more about "a parking-space-sized patch of ocean" than "2.1 kg CO₂e."

Built With

• alpine
• anthropic-api
• astro
• tailwind
• typescript