Barcode Allergen Scanner - ║▌║█║▌│║▌║▌█
Description:
The Barcode Allergen Scanner is a web application designed to help users quickly access allergy information for various food products while shopping. Implemented using HTML, JavaScript, and CSS, the app allows users to manually input codes to retrieve detailed allergy information. The application is for the moment intended for mobile only, as a mobile viewport device is typically what you would carry in a store.
Demo or Screenshots:
(Click image to open in full size)
Features:
- Input barcodes to scan products for allergens instantly.
- JavaScript form validation to only allow numeral 13-digit inputs
- Data about product is retrieved from the kassalapp API
- Define your allergies in the application to give a feedback on allergens. Allergies are stored with a "true" value in the local storage
- Products can also be found via the product list
- Nifty scanning animation to simulate actual barcode scanning functionality.
Technologies Used:
Installation:
Link to live demo (Deployed using Netlify)
Usage:
- Manage personal allergies within the the profile page . (Selected allergens are stored with a true value in local storage to indicate intollerance.)
- input product barcode EAN number on the index page. Click the button to proceed
- View allergy information for the scanned product. Allergens that correspond with your previously defined allergies are highlighted in red.
Navigation:
The page uses a footer for navigation, containing the following symbol buttons:
- 🏠 Home - Navigates to the index page with the EAN input
- 📷 Camera - (Only present when on the index page). Runs an animation to simulate an actual barcode scanner
- 🌿 Allergies - navigates to the profile page with the allergen selection
- 📦 Product list - Navigates to the product list which contains a list of all products available.
Configuration:
Users can customize their allergy preferences within the profile page settings.
Credits:
License:
This project is licensed under the MIT License. See the LICENSE file for more details.
Contributing:
This project is not open for direct contributions but is available for forking.
Known Issues/Limitations:
- Limited support for certain barcode formats - Currently supporting only EAN (European barcodes)
- Barcode image scanner is not functional - An animation is used instead.
- Allergen filter not functional in product list
- External API does only support fetch calls of up to 100 entries at a time. (Limited to 100 calls a minute)
Future Improvements:
- Enhanced support for additional barcode formats.
- Performance
Changelog: