DEV Community: Kourtney Lee

Snap Your Fridge, Get a Recipe: Building PantryLens with Gemma 4

Kourtney Lee — Sun, 24 May 2026 07:45:21 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

PantryLens — a free, installable Progressive Web App that turns a photo of your fridge or pantry into a complete, ready-to-cook recipe in seconds.

The idea is simple: food waste is a real problem, and one of its biggest causes is not knowing what to cook with what you already have. PantryLens removes that friction entirely. You open the app, snap up to 3 photos of your ingredients, tap Generate Recipe, and watch a full recipe stream to your screen — live, token by token — before you even put your phone down.

Key features:

📷 Camera capture, file upload, or drag-and-drop (up to 3 images)
⚡ Recipe streams live to the screen as Gemma 4 generates it
📱 Installable PWA — works on iOS and Android home screens, no App Store needed
🔒 No account, no login, no data stored — your photos never leave the request cycle
🆓 Completely free to use

Demo

Live app: https://pantry-lens-one.vercel.app

Install on your mobile home screen: Open the web app in the browser and use the built-in "Add to Home Screen" feature

Code

klee1611 / PantryLens

Turn your fridge photos into recipes — PWA powered by Google Gemma 4 via OpenRouter. Built for the Google Gemma 4 Hackathon on DEV.

PantryLens

Snap a photo of your fridge or pantry — get a recipe in seconds.

PantryLens is a progressive web app (PWA) that uses AI vision (Google Gemma 4) to identify ingredients from photos and stream a complete recipe directly to the screen, token by token.

How it works

Capture — take a photo with your camera, upload from your gallery, or drag and drop (up to 3 images)
Compress — the browser Canvas API resizes each image client-side to ≤1024 px before upload
Analyze — a Next.js Edge Function proxies the images to OpenRouter's vision model
Stream — the recipe streams back token-by-token, rendered progressively as Markdown

Demo

demo.mp4

Pin PWA to mobile home screen

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router, Edge Runtime)
UI	React 19, Tailwind CSS, react-markdown
AI	OpenRouter — `google/gemma-4-26b-a4b-it`
Rate limiting	Upstash Redis (sliding window, 5 req/IP/hour)
Testing	Jest 29, Testing Library,

…

View on GitHub

The project is fully open source under the MIT license. The stack:

Layer	Technology
Framework	Next.js 16 (App Router, Edge Runtime)
UI	React 19, Tailwind CSS, react-markdown
AI model	Gemma 4 via OpenRouter
Rate limiting	Upstash Redis (sliding window, 5 req/IP/hour)
Deploy	Vercel

How I Used Gemma 4

The model: google/gemma-4-26b-a4b-it

I used Gemma 4 26B A4B — the 26B total parameter Mixture-of-Experts model with 4B active parameters per forward pass, instruction-tuned. I accessed it through OpenRouter using the model ID google/gemma-4-26b-a4b-it to meet the following requirements:

Vision capability — PantryLens is fundamentally a vision task. The model needs to look at a photo of a messy fridge shelf and accurately identify eggs, half-used condiments, wilting vegetables, and leftover containers. Gemma 4's multimodal architecture handles this reliably, even for cluttered or poorly lit photos.
Instruction following — generating a well-structured recipe means strictly following a Markdown template with headings, bullet lists, and numbered steps. The instruction-tuned variant follows these formatting constraints consistently, which is critical for the progressive rendering to look correct as it streams.
Speed vs. quality balance — the MoE architecture means the model activates only 4B parameters per token while drawing on the full 26B parameter knowledge base. In practice, this produces recipe quality close to the denser models at latency that works well for streaming UX.

Compare different models of Gemma 4 for this use case:

Why reject the Edge 2B (E2B) model? While E2B is phenomenal for air-gapped, localized execution, its compressed parameter count lacks the deep "world knowledge" required for cooking.
Why reject the Full Precision 31B model? Uncompressed FP16/BF16 models demand massive VRAM clusters. In a serverless architecture, this translates to an unacceptable Time-to-First-Token (TTFT), virtually guaranteeing HTTP 504 gateway timeouts before the proxy can return data.
The Optimal Route (26B-A4B): Utilizing the 4-bit Activation-Aware Quantized (A4B) variant delivered the exact sweet spot. It retains near-frontier reasoning capabilities for complex visual extraction, but the 4-bit memory footprint drastically accelerates upstream inference, enabling ultra-low latency token generation.

The architecture: an opaque streaming proxy

The most interesting engineering decision was how the model is integrated. The frontend never touches the API key or sees the system prompt. Here's the full flow:

The Next.js API route runs on the Vercel Function using Edge Runtime for quick cold starts and low geographical latency. The 300-second timeout limit is acceptable since the response is unlikely to keep streaming for that long.

Client-side image compression was another non-obvious requirement. Vercel Function has a payload limit of 4.5 MB. Raw iPhone photos are 4–12 MB each — three of them would blow the limit before a single byte of AI processing begins. The solution: compress each image on-device using the browser's Canvas API (resize to ≤1024px, JPEG at 75% quality) before the upload. A 10 MB photo becomes ~150 KB. This happens invisibly in under a second on any modern device, including older iPhones.

The system prompt

Getting Gemma 4 to output clean, consistently structured Markdown for streaming required careful prompt engineering. The key lessons:

Explicit blank-line rules: without being told explicitly that every ### heading must have a blank line before and after it, the model occasionally merged headings and body text onto the same line, which broke the Markdown renderer.
Numbered list enforcement: instructions would sometimes collapse into a single paragraph unless the prompt explicitly stated "each step must be on its own line — never merge steps into a paragraph."
Pantry staples assumption: by default the model sometimes refused to generate a recipe if it couldn't see salt or oil in the photo. Telling it to assume common pantry staples are always on hand (even if not visible) fixed this.
Single-response constraint: without explicit instruction to never ask follow-up questions, the model occasionally responded with clarifying questions ("Are these all the ingredients?") instead of generating the recipe immediately.

The final prompt includes a section of explicit formatting rules before the template:

FORMATTING RULES — follow exactly:

The recipe title uses ## (two hashes). It must be alone on its own line.
Each section header uses ### (three hashes). It must be alone on its own line.
Every heading must have one blank line before it AND one blank line after it.
The instructions section is a numbered list. Each step is on its own line. Never merge steps into a paragraph.

Application Design Wrapping Up

The architecture here — Edge Function as opaque AI proxy, client-side compression, streaming passthrough — is a reusable pattern for any vision AI application that needs to:

Keep API credentials out of the frontend
Handle large image payloads within serverless limits
Deliver a live "typing" UX without server timeouts

PantryLens is the simplest possible version of this pattern, which makes the code easy to read and adapt.

AuroraPath - Chasing the northern lights | Earth Day Weekend Challenge

Kourtney Lee — Mon, 20 Apr 2026 03:51:28 +0000

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

AuroraPath — a real-time, carbon-optimized dashboard for sustainable aurora borealis viewing. 🌌🌿

Aurora hunting typically means driving long distances into rural darkness alone at night — one of the least carbon-efficient leisure activities imaginable. AuroraPath flips that script: it combines live NOAA space weather data with an Auth0-managed AI agent that generates travel recommendations prioritizing trains, buses, and carpooling over solo drives.

Auth0 is the backbone of AuroraPath's trust model. It enforces two distinct identity layers:

Human identity (User Auth) — Only authenticated users can invoke the AI. This prevents anonymous abuse of the Gemini API budget and ensures every recommendation is tied to a real account.
Machine identity (M2M Agent Auth) — The Gemini AI orchestrator runs under its own dedicated Auth0 Machine-to-Machine credential, completely separate from user auth. The AI agent has a traceable, revocable identity — if the M2M token is rotated or revoked, the AI stops calling Gemini without touching a single user session.

The remaining features are built on top of this trust foundation:

Aurora Visibility Score (AVS) — a deterministic 0–100 score from live NOAA G-scale indices and solar wind speed
Real-time geomagnetic dashboard — G/R/S-scale meters, solar wind, 24/48h forecasts, auto-refreshing from NOAA SWPC
Interactive map — latitude-based aurora visibility bands that update with geomagnetic conditions
Green Path AI recommendations — 3 nearby dark-sky spots with public transit directions, CO₂ saved vs. solo driving, and dark-sky ratings — only unlocked when Auth0 confirms the user's identity
Per-user daily quota — Upstash Redis tracks each Auth0 user's Gemini calls (10/day) using a hashed sub claim as the key

Demo

🔗 Project URL: https://aurora-path.vercel.app/

The dashboard loads with live NOAA data immediately. Click "Find My Green Path" — Auth0 Universal Login appears if you're not signed in. Once authenticated, the AI agent (operating under its own M2M credential) generates sustainable viewing routes near your GPS location.

⚠️ Hackathon Note: Green Path uses Google AI Studio free tier (100 req/day shared). If it returns an error, the daily quota may be exhausted. The Aurora dashboard always works regardless.

Code

klee1611 / AuroraPath

🌌 Carbon-optimized aurora sighting dashboard — Earth Day 2026 Hackathon

AuroraPath 🌌

Sustainable Aurora Viewing — Earth Day Hackathon 2026

A real-time, carbon-optimized dashboard for aurora borealis sightings Built for the dev.to Earth Day Weekend Challenge.

✨ What It Does

AuroraPath combines live NOAA space weather data with Google Gemini AI to help you:

Track real-time aurora activity — Aurora Visibility Score (AVS), G/R/S-scale meters, solar wind speed
See where auroras are visible — Interactive map with latitude visibility bands that update with geomagnetic conditions
Find sustainable viewing routes — AI-generated "Green Path" recommendations with carbon savings, public transit options, and dark-sky ratings

🧬 Aurora Visibility Score (AVS)

An empirical model based on NOAA space weather indices:

AVS = (G-Scale/5 × 65) + (max(windSpeed - 300, 0)/500 × 25) + forecastBonus

Score	Level	Meaning
80–100	🌌 Excellent	Visible at mid-latitudes (≥45°N)
60–79	✨ High	Strong activity at high latitudes
35–59	🌠 Moderate	Visible at polar regions (≥60°N)
10–34	🌃

…

View on GitHub

How I Built It

Architecture

Two-Layer Auth0 Identity Model

The most interesting architectural decision was treating user identity and AI agent identity as separate
concerns:

Layer 1 — User Auth (Regular Web App):

User → Auth0 Universal Login → Session cookie (httpOnly, SameSite)
                                      ↓
/api/green-path checks getSession() → rejects anonymous requests (401)

Layer 2 — Agent Auth (M2M Application):

/api/green-path → Auth0 /oauth/token (client_credentials grant)
                        ↓
                M2M access token → logged as agentId in every response 
                (revocable independently of all user sessions)

Every AI recommendation response includes:

 {
   "agentId": "auth0-m2m|...",
   "generatedAt": "2026-04-19T...",
   "quota": { "remaining": 4, "limit": 5, "resetAt": "..." }
 }

This makes the AI fully auditable: you know who asked (Auth0 user sub) and who acted (Auth0 M2M agent ID) for every call.

Aurora Visibility Score (AVS)

Rather than showing raw space-weather indices, a deterministic scoring model converts them to a 0–100 scale:

AVS = (G-Scale/5 × 65) + (max(windSpeed − 300, 0)/500 × 25) + forecastBonus

G-Scale (65% weight) — NOAA's geomagnetic storm index, the primary aurora driver
Solar wind speed (25% weight) — elevated wind (>300 km/s) correlates with aurora enhancement
Forecast bonus (+3–5 pts) — rewards stable or improving 24h conditions

The AVS gates the Green Path feature: users below AVS 10 ("None" activity) cannot trigger AI recommendations — there's no point generating eco-travel routes when there's nothing to see.

Gemini Green Path

The Gemini prompt injects the AVS score, G-scale, and reverse-geocoded region (resolved server-side to protect user GPS privacy), then requests structured JSON directly — no markdown parsing needed. Before any Gemini call:

Auth0 session verified (user layer)
Auth0 M2M token fetched (agent layer)
Upstash Redis quota checked (ratelimit:{sha256(userId)[0:32]}:{YYYY-MM-DD})
Input sanitized (sanitizeRegion() strips control chars, caps at 100 chars)
Gemini called with 30s timeout

Security Hardening

Full 7-phase audit conducted:

Per-user Gemini quota via Upstash Redis (hashed sub, in-memory fallback for dev)
IP rate limiting (30 req/min) on public /api/aurora
Server-side Nominatim proxy — raw GPS never leaves the server
5 HTTP security headers: HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy
CORS restricted to own AUTH0_BASE_URL origin

Prize Categories

🔐 Best Use of Auth0 for Agents - AuroraPath implements the full Auth0 for Agents pattern: a dedicated M2M application gives the Gemini AI orchestrator its own managed identity, completely decoupled from user auth.
Every AI recommendation is traceable to both a human (user.sub) and a machine (agentId). The M2M credential can be rotated or revoked without impacting any user session. The per-user daily quota uses the Auth0 sub claim (SHA-256 hashed) as the Redis key — Auth0 identity drives resource governance end-to-end.

✨ Best Use of Google Gemini - Gemini 1.5 Flash powers the Green Path feature — generating 3 location-aware sustainable aurora viewing recommendations as structured JSON, dynamically conditioned on the live AVS score and geomagnetic context. The model is only invoked after passing both Auth0 authentication layers and the Upstash quota check.

Never Miss an AI Hackathon Again: Building an Autonomous Discovery Agent with Notion & Brave MCP

Kourtney Lee — Mon, 30 Mar 2026 00:10:15 +0000

This is a submission for the Notion MCP Challenge

What I Built

HackathonSniper is an autonomous AI agent designed to eliminate "hackathon fatigue." If you're like me, you spend hours every month checking Devpost, DoraHacks, and Dev.to just to find one hackathon that fits your niche.

HackathonSniper turns this manual hunt into an automated pipeline. It doesn't just "search"—it thinks. It uses the Model Context Protocol (MCP) to bridge the gap between AI reasoning and the real web.

Video Demo

Show us the code

klee1611 / HackathonSniper

AI-powered hackathon discovery agent using Brave Search + Notion MCP

Hackathon Sniper 🎯 — AI-Powered Hackathon Discovery Agent

Hackathon Sniper is a TypeScript agent that automatically discovers, evaluates, and tracks hackathons using AI-powered analysis, real MCP server integration, and strict environment separation. Point it at the web; it returns only the hackathons worth entering.

What it does in one sentence: Hackathon Sniper searches the web for hackathons, scores each one against your criteria with a Groq-powered AI evaluator, and saves qualified results directly to a Notion database — all in a single command.

Features ✨

Intelligent Search 🔍 — Real Brave Search MCP server integration
AI Evaluation 🤖 — Groq-powered hackathon qualification analysis
Notion Integration 📊 — Real Notion MCP server for storage and tracking
Test Isolation 🎭 — Complete environment isolation for testing (zero external dependencies)
Fast Development ⚡ — Hot reload, comprehensive Makefile, pnpm package management
Type Safety 🛡️ — End-to-end TypeScript with Zod schema validation
Robust Testing…

View on GitHub

The Technical Architecture

The agent follows a rigorous 3-phase lifecycle:

🔍 The Hunt (Brave Search MCP): It performs targeted searches across the web to find new hackathon announcements, even those buried in blog posts or obscure landing pages.
🤖 The Vetting (Groq LLM): Every discovery is analyzed by a Llama-3 model. It evaluates the prize pool, solo-friendliness, AI relevance, and proximity to the deadline.
📊 The Storage (Notion MCP): Qualified opportunities are instantly synced to a beautifully structured Notion database, complete with metadata, deadlines, and AI-generated summaries.

How I Used Notion MCP

The Notion MCP Server (@notionhq/notion-mcp-server) is the "nervous system" of this project. It transforms a simple script into a powerful productivity tool by allowing the AI to interact with my Notion workspace as if it were a native application.

Instead of writing complex, boilerplate-heavy API calls to the Notion REST API, the Notion MCP is integrated. This allowed the agent to:

Dynamic Schema Mapping: The agent automatically maps structured AI evaluation objects to Notion database properties (Dates, Checkboxes, URLs, and Rich Text).
Process Isolation: By using the MCP StdioClientTransport, the Notion integration runs in its own isolated process, managed entirely by the Model Context Protocol.
Automated Workflows: The agent uses the create_notion_page tool provided by the MCP server to dynamically populate my "Hackathon Scout" dashboard.

Wrapping Up

This integration unlocks a "set and forget" workflow. I can run HackathonSniper as a background task, and my Notion workspace stays updated with a high-signal, low-noise list of opportunities. It’s not just data entry; it’s an autonomous data clerk powered by Notion MCP.