NutriScan - Decode Food with Your Mobile Browser

I like mobile web apps more than smartphone apps. A while ago, I discovered Minhaz's amazing HTML5 QR Code & Barcode Scanner JavaScript library. Using that I built a minimal web page that can scan a product barcode through a smartphone's mobile browser and then redirects user to the equivalent product's Open Food Facts web page to display its nutrition information.

I have now extended that sample to scan an EAN-13 barcode off a packaged food product and then fetch just its name, image, Nutri-Score & Nova details using the Open Food Facts REST API.  

Screenshot of the output in the Microsoft Edge browser on an Android phone

Try out the no-frills NutriScan 🥫🔍 web app and please let me know what you think. Here's the code if you're interested -

Typically, the JSON returned by an API call looks like this -

{

    "code": "8906005504395",

    "product": {

        "image_thumb_url": "https://images.openfoodfacts.org/images/products/890/600/550/4395/front_en.5.100.jpg",

        "nova_group": 4,

        "nutriscore_grade": "e",

        "product_name": "Tana-bana"

    },

    "status": 1,

    "status_verbose": "product found"

}

However, there were cases when neither the fields & values nova_group & nutriscore_grade didn't show up at all. 

{

"code":"8906047529578",

"product":{

   "image_thumb_url":"https://images.openfoodfacts.org/images/products/890/604/752/9578/front_en.3.100.jpg",

    "product_name":"DiSano Apple Cider Vinegar with Mother of vinegar"

    },

    "status":1,

    "status_verbose":"product found"

}

I identified this issue after remote debugging live content on my Android device from my development machine.

I did not style the output in the deployed version to keep the code sample lean and to see what is the least amount of code it would take to build a functional app. The total data that is transferred to and fro therefore is < 400kb.

Screenshot of the output in Chrome browser on an Android phone