The latest articles on DEV Community by Hamza Atiq (@hamza_atiq_25a2581701fdab). https://dev.to/hamza_atiq_25a2581701fdab https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3370047%2F32e48670-00d5-4423-b4ca-db876a4ac751.jpg https://dev.to/hamza_atiq_25a2581701fdab en Hamza Atiq Mon, 20 Apr 2026 05:25:25 +0000 https://dev.to/hamza_atiq_25a2581701fdab/ecolens-33c9 https://dev.to/hamza_atiq_25a2581701fdab/ecolens-33c9 <p><em>This is a submission for <a href="https://dev.to/challenges/weekend-2026-04-16">Weekend Challenge: Earth Day Edition</a></em></p> <h2> What I Built </h2> <p>EcoLens is an AI-powered eco-companion that lets you scan any everyday object and instantly learn its environmental impact. Upload or photograph anything, a plastic bottle, a piece of clothing, a coffee cup, then Gemini 2.5 Flash Vision returns a structured eco-report with carbon footprint, planet score (0–100), recyclability breakdown, and three greener swap suggestions.<br> What makes it more than a one-off tool: Backboard persistent memory remembers your entire scan history. On your second scan, a personalised panel appears referencing what you've scanned before. The summary page pulls your Backboard memories to generate a weekly eco-journey narrative with a planet-score trend chart.</p> <h2> Demo </h2> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://ecolens-one.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">ecolens-one.vercel.app</span> </a> </div> </div> </div> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/Hamza-Atiq" rel="noopener noreferrer"> Hamza-Atiq </a> / <a href="https://github.com/Hamza-Atiq/ecolens" rel="noopener noreferrer"> ecolens </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">🌍 EcoLens — AI Eco-Companion</h1> </div> <blockquote> <p>Scan any object. Discover its environmental impact. Build greener habits over time.</p> </blockquote> <p>Point your camera at any everyday object — a plastic bottle, a piece of clothing, a coffee cup — and Gemini 2.5 Flash Vision instantly returns a full eco-report. Backboard's persistent memory means EcoLens remembers your scan history and gives you increasingly personalised sustainability advice over time.</p> <div class="markdown-heading"> <h2 class="heading-element">✨ Features</h2> </div> <ul> <li> <strong>Instant eco-report</strong> — carbon footprint (kg CO₂), planet score (0–100), recyclability breakdown, 3 greener swap suggestions, and a fun environmental fact</li> <li> <strong>Persistent memory</strong> — Backboard remembers every object you've ever scanned; on your second visit the app greets you with personalised advice referencing your history</li> <li> <strong>Weekly eco-journey</strong> — <code>/summary</code> page pulls your Backboard memories to generate an AI narrative of your sustainability progress, complete with a planet-score bar chart and trend badge</li> <li> <strong>Mobile-first</strong> — drag-drop or take a live photo directly from your phone…</li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Hamza-Atiq/ecolens" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <p><strong>Stack:</strong> Next.js 14 (App Router) · Tailwind CSS · Backboard SDK · Vercel<br> <strong>Two distinct Gemini 2.5 Flash calls per scan:</strong></p> <ol> <li>Vision analysis → structured JSON eco-report (carbon_kg, planet_score, recyclable/not_recyclable arrays, eco_swaps, fun_fact)</li> <li>Memory-aware personalised advice → references the user's full scan history via Backboard's Auto memory mode <strong>Backboard integration:</strong> </li> <li>One persistent assistant ("EcoLens Assistant") per app, looked up by name on init</li> <li>One thread per user, keyed by browser UUID in localStorage</li> <li> <code>memory: "Auto"</code> on every addMessage call, Backboard automatically extracts and stores facts from each eco-report</li> <li> <code>summary</code> page calls <code>getMemories()</code> to surface raw memories alongside an AI-generated weekly narrative Images are base64-encoded client-side, written to a temp file server-side, and passed to Backboard's <code>addMessage</code> via the <code>files</code> parameter. Backboard routes them to Gemini via BYOK.</li> </ol> <h2> Prize Categories </h2> <ul> <li>Best Use of Google Gemini — two Gemini 2.5 Flash calls per scan (vision analysis + memory-aware personalisation), structured JSON output contract, BYOK via Backboard</li> <li>Best Use of Backboard — persistent assistant memory across sessions, Auto memory mode, getMemories for weekly summary, thread persistence in localStorage</li> </ul> <p>Hamza Atiq(Me)</p> devchallenge weekendchallenge