A product finder by scanning or searching for a barcode.
My project started off by creating a wireflow for my application. In my wireflow, I created something that really functions as an application. Since the assignment was to create a website that would never load a new page, this would have to be done with hiding and displaying the content that was needed to be shown at that time. I wanted a simple homescreen with an option to start scanning. Followed by a full screen barcode scanner, that shows the scanned product after a successful scan. I used the data from de Open Food Facts You can see the happy flow of my application in the pictures below.
| Landing page | Scanner page | Product page |
|---|---|---|
 |
 |
 |
You can find all the progression of my work documented in my Wiki.
There were a few things that I would have liked to add to my project. One of those things was my error message. When the user searches for an invalid barcode inside my error state, a error message pops up. Sadly, when the user searches for a valid one, the error message still shows for a split second. I tried for days to fix this problem and asked for help, but no one (including myself) seems to know the problem. I also would have liked to add an extra state to show when the user doesn't give permission to use their camera. Now it would just show an endless loading screen.
If you want to use my code for your own, you can clone the repository as a local file:
git clone https://github.com/dannyfrelink/foodie-app
I have used the MIT License for this repository.