How I Built a Fast, Offline-First Gluten Detection PWA Using Web OCR & Open Food Facts

Navigating dietary restrictions like Celiac disease or gluten sensitivity requires quick, reliable information right at the grocery store. Traditional apps can be slow or bloated.

To solve this, I built Glutensa—an open, lightweight Progressive Web App (PWA) designed to analyze food ingredients in real time using barcode scanning and OCR (Optical Character Recognition).

Here is a breakdown of the architecture, key technical challenges, and how we structured the data pipeline.

---

🛠️ The Tech Stack

• Frontend: PWA Architecture (HTML5, Vanilla JS, Service Workers)
• OCR & Image Processing: Web-based OCR engine for ingredient label extraction
• Data Layer: Open Food Facts REST API (Fallback Engine) + Local Micro-Datasets
• Search & Indexing: Dynamic Schema.org (JSON-LD) structured data for search engine optimization

---

🚀 Key Technical Challenges & Solutions

1. Fast Barcode Lookup with API Fallbacks

When a user scans a product barcode, speed is critical. We first check an optimized local/cached dataset. If no match is found, the app seamlessly falls back to querying the Open Food Facts API:

javascript
async function fetchProductData(barcode) {
  // Check local cache/db first
  let product = await checkLocalDatabase(barcode);

  if (!product) {
    // Fallback to Open Food Facts
    const response = await fetch(`[https://world.openfoodfacts.org/api/v2/product/$](https://world.openfoodfacts.org/api/v2/product/$){barcode}.json`, {
      headers: { 'User-Agent': 'Glutensa - Web/PWA - Version 1.0' }
    });
    const data = await response.json();
    if (data.status === 1) {
      product = parseOFFData(data.product);
    }
  }
  return product;
}

💡 What's Next?
We are currently expanding the dataset, refining OCR accuracy under low-light conditions, and building dynamic Programmatic SEO pages to help users find instant answers to queries like "Is X product gluten-free?".
Check out the live project here:
🔗 Live App: https://glutensa.me
⭐ GitHub Repository: glutensa on GitHub
I'd love to hear your feedback on optimizing web OCR performance and offline data caching in PWAs!