Inspiration:

For students, on top of stressful academics and a busy life in general, trying to be health-conscious and ethical in your groceries are the last thing on their minds. We wanted to reduce the friction that comes with adopting such habits, and make purchasing ethically and health-consciously easy and simple. Through SnapScan, users are guided to make purchases that keep you healthy and promote an ethical lifestyle. We hope to inspire our users to take the first step to building a better lifestyle with each scan.

What it does:

SnapScan allows users to choose first between the areas of food,clothing or retail items. Then, you will be able to upload an image of a barcode for any product in your chosen area. After uploading, SnapScan analyses the related product and provides information on the product and its parent company - importantly it mentions quality ratings and ethicality of the products and their manufacturing processes. This functionality is meant to be expanded to cover any product that has a barcode, and be able to provide critical information to support purchasing decisions.

How we built it:

We used React (with HTML, CSS, JS), with Next.js framework; OpenFoodFacts, BarcodeAnalyser, EthicalConsumer APIs and hosted through Vercel.

Challenges we ran into:

Backend:

For the main goal of the project, we intended to take a result from the openfood database, extract the manufacturing name, and search the ethical consumer website with said keyword to find information. However, this had to go through seven to eight different iterations, including but not limited to: having to try three different qr / barcode reader apis due to poor performance and inconsistency, a custom google search engine with a specific data display to be scraped, a duck duck go html parser because the custom search engine produced keywords we didn’t want, a direct html keyword extractor with JSoup as the code couldn’t find the needed html class, a fuzzy keyword aggregator that finds the keyword using a custom duckduckgo search of the extracted manufacture name (due to errors such as calling “Original Taste” the brand name of Coca-Coca: Original Taste), having to make a custom search on ethical consumer website due to our extracted word not finding correct hits, having to manually encode / setup an encoding fix for broken keywords such as apostrophes and more.

Because there are separate database APIs for different consumer areas (ie food and clothing use completely different database APIs) the implementation for each area of goods is separate and must be written on its own, so it is hard to abstract the code for each different genre of goods. As such, food was the first and only area we managed to implement fully due to multiple issues with the clothing and retail goods. We did attempt retail and clothing, but couldn’t find a database supporting barcodes, and also felt that having to use image search would detract from the original project idea.

Initially we wrote the API logic in Java Swing, and hoped to host it onto Vercel. We didn’t realize that Vercel prefers serverless functions, and the JVM that Java needed would fail to deploy. Translating the code to JavaScript was a major struggle as the APIs needed to be treated differently for JavaScript (as opposed to Java). For instance, the JSoup library had to be substituted for the cheerio library for HTML parsing.

When formatting the barcodes on the site, the native img tag was not working. For whatever reason, making the image a component worked for the sample barcode reading.

Frontend:

For the scrolling project name animation on the title page, the addition from one word to the next was quite glitchy. We fixed the issue by adding an individual letter each time instead of by word. Additionally, we added an easy out forward animation for the text.

When converting from a separate CSS file to Tailwind attributes directly in the main HTML file, we struggled to edit the Tailwind data. We resolved the issue by branching to a previous version and working from there.

Struggling with the color palette and what direction we wanted to take. We found a color palette online we liked and picked select colors we thought would contrast well, and repeated it across all our webpages.

At the beginning, we were unable to download Node.js due to conflicting system PATH variables (initially occupied by python 3.13). Without a working Node environment, we couldn’t start the React project structure or run a local dev server. To address this issue, we fully uninstalled older node and npm versions, removed leftover packages and manually repaired the PATH variable so Windows could correctly find Node.js.

Accomplishments we are proud of:

When we began, we had no idea what libraries/frameworks would be used to code the backend of the project - we are quite happy with being able to work out a functional and well designed backend with such little time!

What we Learned:

Sean:

Before this hackathon, I had no knowledge of backend development and even less on how to connect programs with websites deployed through Vercel - I’m happy I managed to learn enough about working with Vercel and ZXing to fully build and deploy a compatible backend, able to do image/barcode search, html parsing, api calls, keyword search/website queries and more. It took a lot of iterations but I think the final product is polished and well-written.

Arnav:

I came into this hackathon with minimal experience with front end development in HTML/CSS/JS and to a smaller extent React and Node.js, however I was really motivated to expand my skills and I picked up the syntax and fundamentals after researching and learning from my team members on the spot. In addition, I gained a solid understanding of backend development in which I had zero experience in.

Caroline:

Starting the project, it was not that clear with everyone where we would end, so I learned midway that designers should start planning the design around the beginning, so there’s opportunity for more feedback. Another thing that came helpful out of the hackathon is the expectations of understanding what experiences are usually pretty helpful to help create a project. Also the fact that Java isn’t really helpful in terms of creating GUIs…

Mark:

I learned to take a large idea, break it down, and actually implement it is a rough process. Particularly when I learned that desktop applications (Java Swing) cannot be directly deployed to web platforms (Vercel) without serious additional effort. I also learned about branching, merge conflicts, and handling deployment issues when collaborating on files multiple members were working on.

What's next for SnapScan

Live feed scanning to allow cameras with shaky images to read and decode barcodes. COMPLETE image implementation for lykdat global scanning API. This would allow users to simply take a photo of a piece of clothing and return a similar report. Use a similar barcode scanning approach to find more information on retail items. Allow photos of receipts to be taken, and procure a similar report.