DEV Community

Temiloluwa Valentine
Temiloluwa Valentine

Posted on

# ⚡ EcoScan— See Which Device is Drinking Your Money

DEV Weekend Challenge: Earth Day

_This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Last month, my dad got our electricity bill and just stared at it.

He couldn't understand why it was so high. Was it the iron my mum uses every morning? The old fridge that runs all night? The TV nobody ever turns off? He had no idea. So he just paid it. Like he always does.

That moment stayed with me.

Millions of families across Nigeria, India, Ghana, Kenya and across the entire world pay electricity bills they don't understand. Not because they're careless. But because nobody ever made it simple enough to see where the money is actually going.

So I built EcoScan for Earth Day.

EcoScan is an AI-powered energy auditor that works with just a gesture.

Point your camera at any electrical appliance in your home, your iron, your fridge, your phone charger, your TV. Pinch your thumb and index finger together. In seconds, you see exactly what that device costs you per month in your local currency, how much CO₂ it produces, and what you can do about it.

No typing. No forms. No complicated settings. Just point and pinch.


Demo

In the demo you can see:

  • Real-time hand tracking detecting the pinch gesture
  • Gemini identifying a clothing iron, phone charger and smartphone
  • The live dashboard updating instantly with monthly costs in local currency
  • CO₂ impact, efficiency scores and energy-saving tips for each device

Code

⚡ EcoScan— See Which Device is Drinking Your Money

Point your camera at any appliance. Pinch your fingers. Know instantly what it costs you and the planet.


🌍 The Story Behind This

Last month, my dad got our electricity bill and just stared at it.

He couldn't understand why it was so high. He had no idea which device was the problem. Was it the iron my mum uses every morning? The old fridge that runs all night? The TV nobody turns off?

He just paid it. Like he always does. Because there was no easy way to find out.

That moment stayed with me.

Millions of families across Nigeria, India, Ghana, Kenya, across the entire world pay electricity bills they don't understand. Not because they're careless. But because nobody ever made it simple enough to see where the money is actually going.

So I built EcoScan for Earth Day.


How I Built It

The Gesture Engine — MediaPipe in the Browser

The pinch detection runs entirely in the browser using MediaPipe HandLandmarker via WebAssembly. No backend needed for hand tracking.

Every frame, it calculates the Euclidean distance between Landmark 4 (thumb tip) and Landmark 8 (index finger tip). When the distance drops below 0.055 in normalized space, that's a pinch. It triggers once, captures the frame, and sends it to Gemini.

const dx = points[4].x - points[8].x;
const dy = points[4].y - points[8].y;
const dz = points[4].z - points[8].z;
const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
const pinching = dist < 0.055;
Enter fullscreen mode Exit fullscreen mode

A cooldown ref prevents double-triggering during the async Gemini call.

The AI Brain - Gemini 2.0 Flash Latest

When a pinch is detected, the current video frame is captured as a base64 JPEG and sent to a Next.js API route, which calls Gemini 2.0 Flash Latest.

The prompt instructs Gemini to return structured JSON:

{
  "appliance": "Electric Iron",
  "category": "laundry",
  "wattageMin": 1000,
  "wattageMax": 2400,
  "dailyHours": 2,
  "efficiencyScore": 4,
  "co2PerYear": 47,
  "costPerYear": 12,
  "habitChange": "Iron clothes in batches instead of one item at a time",
  "alternative": "Steam generator iron with auto shut-off",
  "funFact": "An iron left on for 1 hour uses the same energy as charging your phone 50 times"
}
Enter fullscreen mode Exit fullscreen mode

The API key never touches the browser, all Gemini calls go through Next.js API routes server-side.

Local Electricity Pricing - 20 Countries

The biggest insight: annual cost numbers mean nothing to most people. Monthly cost does.

EcoScan supports 20 countries with real electricity rates, from Nigeria to Germany. Users select their country from a dropdown and all costs recalculate instantly in their local currency.

The Live Dashboard

As devices are scanned, a live dashboard builds up using Recharts wattage by device, CO₂ impact, monthly cost, eco grade, trees needed to offset, and equivalent flights per year. Everything is stored in localStorage so it persists between sessions.

Tech Stack

Technology Purpose
Next.js 14 Framework + server-side API routes
Google Gemini 2.0 Flash Latest Vision AI — appliance identification
MediaPipe HandLandmarker Pinch gesture detection (WebAssembly)
Framer Motion Animations
Recharts Live dashboard charts

Prize Categories

Best use of Google Gemini

Gemini 2.0 Flash Latest is the entire brain of EcoScan. Without it, the app is just a camera. With it, a single pinch gesture turns any appliance into a complete energy audit wattage, CO₂, cost, efficiency score, habit tips and eco alternatives, all adapted to the user's country and local electricity rate.

The prompt is carefully engineered to always return clean structured JSON so the UI can render results instantly. Gemini makes something that would normally require a database of thousands of appliances work with zero setup, it just knows.


My dad still doesn't know which appliance was draining our electricity bill.
Now he can find out in seconds.
That's why I built EcoScan. 🌍

By @temiloluwavalentine_

Top comments (0)