# From Barcodes to Allergen Shields: Building a Food Safety Scanner Deployed on Zerops

SURAM PRANEETH REDDY — Sun, 09 Aug 2026 15:50:24 +0000

Groceries shouldn't feel like a reading test. If you have peanut allergies, lactose intolerance, are trying to eat vegan, or need a low-sodium diet, grocery shopping becomes a slow marathon of reading chemical names on package labels.

For the WeMakeDevs Zerops Hackathon, I built NutriGuard — a premium, real-time agentic food safety scanner and nutrition auditing dashboard that does the evaluation for you instantly.

🎨 The Aesthetic: Playful & Clean "Supernatural" Design

Instead of a crowded dashboard, I took inspiration from the all-natural brand Supernatural (dye-free baking toppings).

Warm Paper Grid Canvas: Clean warm off-white background with a faint dot matrix design.
Ink-Outlined Flat Cards: Content segments look like hand-assembled cardboard boxes with bold outlines (3px solid #1e1e1e) and flat offsets.
Playful Hand-drawn Typography: Headings use playpen font scripts (Playpen Sans, Gochi Hand) paired with clean modern text (Outfit) for ultimate readability.

🛠️ Tech Stack & Architecture (3 Services Deployed on Zerops)

To build a resilient production stack, I designed a multi-service architecture:

Frontend Static Server (React + Vite): Handles live webcam barcode feeds (via html5-qrcode) and client-side label scanning OCR (via Tesseract.js) so users can upload photos of ingredient tables directly.
Backend Runtime (NodeJS + Express): Hosts the custom Allergen Matcher and Goal Evaluation engines. It maps barcodes to the public Open Food Facts API database of millions of products globally.
Database Service (PostgreSQL): Stores user baseline profiles (diets, conditions, target goals) and logs scan histories.

🛡️ Built for Resilience

Since public APIs can rate-limit requests, I built a smart local fallback layer mapping major products (Quaker Oats, Lay's, Coca-Cola) and connection drop-guards so the dashboard is fully functional out-of-the-box even if the database is offline!

🔄 How the Workflow Appears

Configure Shield: Set your diet (Vegetarian, Vegan), allergens to avoid, and health goals.
Scan Packaging: Align a barcode to your webcam or upload a photo of the ingredients list.
Real-Time Safety Audit: The backend fetches details from the Open Food Facts database, runs the matcher matrix, and returns a clear safe/danger alert.
Smart AI Assistant: A custom offline-first chatbot assistant (🤖) audits product details or accepts a Google Gemini API Key to answer conversational questions about recipes and nutritional alternatives.

☁️ The Zerops Deployment Experience

Deploying a multi-service static-app + backend-api + database stack normally requires configuring Dockerfiles, handling ingress routes, and managing secrets.

With Zerops, the deployment pipeline took under 5 minutes using two simple files:

zerops-import.yaml: Instantly provisions our Static Frontend container, Node.js API container, and a managed PostgreSQL database container in one import step.
zerops.yaml: Outlines our React build commands and Node start commands.

Once I connected my GitHub repo, Zerops read the files and launched the production endpoints automatically. Every push to my repository now triggers an automatic deployment.

🚀 Get Started

Check out the code and deploy it yourself!

Source Code: https://github.com/praneethreddyyy30/zerops
Hackathon Challenge: WeMakeDevs Zerops Challenge
Live link:https://frontend-2e19.prg1.zerops.app

A huge thanks to WeMakeDevs and the Zerops team for hosting this challenge!