QuickReview (QR)

Acccessible, Programmable QR Codes for Next-Gen Application of Efficient Reviewing Basically like a label-maker for QR codes, with reviews/comments built in.

Comment

QuickReview (QR)

Inspiration

The goal of this project is to make QR codes more accessible to use. Normally, creating a QR-code-enabled experience requires technical knowledge like setting up a website, hosting it, and making a QR code that redirects to your URL. With QuickReview, the process is vastly simplified and accessible for anyone.

Our first idea for use cases was using these codes on books, so that librarians can quickly and easily set up a system for reviewing books, but we realized it could be so much more. Basically, any items that are unique and benefit from being labeled are use cases for these programmable QR codes. Other examples include artwork, landmarks, and classrooms.

What it does

The flow of using QuickReview is as follows:

  1. Generate "blank" QR codes with out web portal and print them out (with scale, we could sell rolls of these at physical stores to make the process that much easier)
  2. Log in to the website on your phone (or app in the future). For every item you want to label, scan a QR code to initialize it with the necessary info, then stick it on your object. Initializing the QR code makes you its owner and lets you edit it later.
  3. Users can scan these codes to view the associated information, and leave a review/comment.

The process is similar to using a label-maker, where the first time one of our QR codes is scanned is similar to when text is printed on a blank label. The advantage, of course, is that QR codes are more easily replicated, can store vastly more information, and allow for interactivity.

How we built it

Our project is built around the Openscreen API. We use the API to generate QR codes and store the data behind them in an asset, including the name, description, and reviews. We used Auth0 to authenticate users in order to verify ownership (edit access) with each QR code, and we used Firebase to keep track of what codes each user owns. Our tech stack was SvelteKit with Pug and Stylus templates and Vite plus Vercel for deployment.

Challenges we ran into

  1. When working with Auth0, we implemented the Auth0 API in the frontend and it will render the frontend before all the data are obtained, so that caused some troubles for us, since sometimes some of the variables on the page might flash “undefined” and changed to the real value in a second or so.
  2. Another challenge we ran into is that when using the Firebase Realtime Database, we had a little bit of trouble updating the list of assetIDs we have, and it was due to the way that we retrieved the data from the database. That is, instead of using the get() function, we used onValue() to create a listener, which caused the problem.
  3. One non-technical challenge we ran into was the limit of the time. We actually haven't started brainstorming until three hours into the hackathon, and we found ourselves running short on time on the last day. So we pulled an all-nighter to make the app work, and we all know it will be worth it no matter the result, since we really grew a lot by learning new frameworks we have little experience of as well as different APIs provided by the sponsors.

Accomplishments that we're proud of

The biggest achievement is creating a project that is capable of solving a wide range of problems in real life beneficial to people in need, from improving educators’ efficiency to managing resources for food banks. Besides that, we are proud of making a modern improvement of labeling machines and integrating multiple APIs satisfying our needs, including OpenScreen, Auth0, and Firebase.

What we learned

What we learned most was learning how to use two important APIs, OpenScreen and Auth0. They supported the development of this project in two most important parts: QR code generation and user authentication. Learning them helped the team reduce implementation time and provided extra security with mature protection mechanisms. This project also helped us strengthen our familiarity with Sweltekit.

What's next for QuickReview (QR)

Add statistics of a QR code being scanned through Openscreen's tracking system, which will let creators understand how their QR code is being utilized. More features like shared ownership of QR codes and more possibilities for content to embed. Converting the site to a progressive web app for better usability.

Built With

Share this project:

Updates