DEV Community

SURAM PRANEETH REDDY
SURAM PRANEETH REDDY

Posted on

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

#zerops #webdev #hackathon #ai



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:

  1. 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.
  2. 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.
  3. 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

  1. Configure Shield: Set your diet (Vegetarian, Vegan), allergens to avoid, and health goals.
  2. Scan Packaging: Align a barcode to your webcam or upload a photo of the ingredients list.
  3. 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.
  4. 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:

  1. zerops-import.yaml: Instantly provisions our Static Frontend container, Node.js API container, and a managed PostgreSQL database container in one import step.
  2. 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!

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

Top comments (0)