Ethical Food Checker PWA

Table of contents

• Live demo
• Description and concept
• Installation
• Features
• Activity diagram
• Client-server rendering
• External API
• Enhancements

Live demo

https://ethical-food-checker.onrender.com

Description and concept

The Ethical Food Checker is designed to help consumers make more responsible choices in the supermarket. By typing in the name or barcode of a product, the user can find out in less than a minute whether the product is vegetarian or vegan, if it contains palm oil, and what its Eco-Score is. The website uses the Open Food Facts API and shows worldwide products, to ensure that the user finds the right product.

Installation

To view, visit the website. To make local modifications, clone the repository and edit the files in an IDE.

Features

• Search on product name or barcode (products fetched from API).
• Show names, pictures and ingredients of matching products (products rendered by EJS).
• Show whether products are vegetarian or vegan, if they contain palm oil, and what their Eco-Score is (products rendered by EJS).
• Explanation with additional information on the above.
• Pagination (products fetched from API).
• Caching of homepage and visited pages.
• Offline page.

Activity diagram

Client-server rendering

Instead of fetching the products in the client-side JavaScript, the API call is being made server-side, using the node-fetch Node.js module. If the API returns products, load results.ejs and pass through the search query, received products, page and amount of pages in total. These parameters are then used in the HTML. If the API does not return products, load error.ejs and pass through the search query and type (name or barcode). The client-side JavaScript only consists of the service worker and the functionality of the "Explanation" button. If the service worker is installed and the user has no internet, offline.ejs is displayed and the search query is filled-in with client-side JavaScript.

External API

The external API that is featured in this project is the Open Food Facts API. From this API, the following properties are used:

• code (for barcodes)
• search_terms (for product names)
• page
• product_name
• image_small_url
• ingredients_text
• ingredients_analysis_tags (for vegetarian, vegan and palm oil information)
• ecoscore_grade

Enhancements

• Automatically minified CSS and JavaScript on npm start.
• Set HTTP header field Cache-control to cache non-HTML GET requests for 1 year.
• Added revisioning to service worker by storing the version number in a variable.
• Implemented compression using the corresponding Node.js module.
• Wrote as little client-side JavaScript as possible.
• Added font-display: swap to imported fonts in CSS.
• Verified that API images are not unnecessary big.
• Compressed background.jpg from 2 MB to 197 kB.
• Changed text in button from white to black to improve accessibility.
• Added language tag to HTML to improve accessibility.
• Added description meta tag to HTML to improve SEO.
• Removed unused images, CSS and JavaScript.

Lighthouse report beforehand

Lighthouse report afterwards