This is a submission for the KendoReact Free Components Challenge.
What I Built
OriginTrackr is an innovative progressive web app (PWA) designed to help consumers discover where the products they purchase may come from. There is a global movement to understand where the products we buy are coming from, or where the companies that make the products we buy every day are based. Built with React and powered by KendoReact components, the PWA brings together an intuitive interface that allows users to scan barcodes on products as they shop which reveals where the companies making or packaging the product's business is based. This can reveal trade connections that might not be apparent even if the product is labeled with where it is packaged or made. Recognizing the challenges of unreliable Wi-Fi in supermarkets and retail environments, I developed OriginTrackr as an offline-capable PWA to ensure users can access crucial product information without the need for a constant internet connection. Once users visit the application the KendoReact components, country code lookup table, and other assets are cached for offline use- no sketchy store WiFi required! Whether users are scanning a product’s barcode on the go or exploring detailed origin data, OriginTrackr ensures they can do so efficiently and offline.
OriginTrackr checks the prefix of barcodes against hundreds of country codes using react-barcode-scanner and a locally cacheable list of country codes. While a country code doesn't tell you where a product is necessarily made, it may inform consumers about where their money is potentially going as it does indicate that the business packaging or making that product is present in the country they registered their unique identifier with the GS1.
Check it out:
Demo
You can try OriginTrackr out on your phone, tablet, or laptop right now at OriginTrackr.com!
OriginTrackr has a modern, clean UI using KendoReact components. The first thing you are greeted with is a button that will let you start scanning barcodes. You will be prompted for permission before it begins using your camera:
OriginTrackr will display a popup letting you know where this barcode was registered, giving you an idea of where the business is based:
Once you get this notification, you can take OriginTrackr offline- no data connection or WiFi required!
You can also install OriginTrackr as an app by pressing "Add to Homescreen" from the settings menu in your browser:
Of course the whole application is open source, so you can check out how I did this on GitHub!
kevinl95
/
OriginTrackr
Find out where the products you're buying come from, just by scanning their barcode
OriginTrackr - Find out where your product choices are coming from using your camera
A modern web application to help you better identify where products come from during your errands! It lets you scan the barcodes on products using your cell phone camera and then uses the UPC to tell you where the product is coming from. It does this entirely offline- you can visit this page while you have internet and then re-visit the page while avoidng spotty or non-existant supermarket internet and still be able to see where your products are coming from!
Overview
Built with modern web technologies and featuring KendoReact free components, OriginTrackr provides a robust and user-friendly interface.
Technologies
- Frontend: React
- UI Components: KendoReact free components
Features
- Barcode scanning
- UPC lookup by country
- Offline-capable
- Allows users to store scans they would like to remember to a handy data table. Items in this table are stored…
KendoReact Experience
KendoReact Free Components were leveraged throughout OriginTrackr and made building an intuitive UI quick and easy. Here are some of my favorite components:
AppBar from @progress/kendo-react-layout
OriginTrackr uses the AppBar to display a header and footer for the page, providing space for branding as well as providing the user a link to the source code for the application. It's my hope that this helps drive pull requests and community involvement in the project.
Card from @progress/kendo-react-layout
I don't feel that it's good practice to immediately ask users for access to something as sensitive as their camera when they first load a page. At the center of OriginTrackr is a card with a button that lets the user decide when they're ready to start scanning for barcodes. This then prompts the user for access to their camera, and also lets me expand the card to show the camera's output. It makes it clear that the majority of the user's interactions will be taking place in the center of the screen.
ExpansionPanel from @progress/kendo-react-layout
I wanted to provide a space where users could optionally store scanned barcodes that they've seen in case they wanted to review where the products in their shopping cart came from later. I didn't want this to take up much room on the screen, so I put it in a collapsible expansion panel. This made it easy to keep the UI clean and manageable.
Dialog from @progress/kendo-react-dialogs
Users are given a dialog with the country's flag and name where a given product's barcode is registered once OriginTrackr successfully identifies it. It makes it very clear to the user that scanning was successful, and provides a way for me to prompt them to save this product for later. Countries and barcodes are saved locally in the user's browser. The Dialog component made making this whole interaction very easy to implement as it needed minimal customization to achieve my main objective - let the user know quickly where the product they're holding came from.
Notification from @progress/kendo-react-notification
I'm very excited that OriginTrackr works offline, but struggled to figure out how to tell the user that a website can work offline. It's not intuitive, and most users aren't used to using pages in their browser this way. The KendoReact notification widget made it easy for me to tell the user the moment the service worker finished caching assets for offline use that they would be able to use this app offline. It let me put the information somewhere accessible but non-intrusive. It also made it very easy for me to let the user know if something was wrong of if their browser does not support offline features or PWAs.
Delightfully Designed
The Progress ThemeBuilder helped me get the UI I wanted for my app customized quickly. One of my favorite things about it is that I was able to start with a nice set of preset colors that go together from the styles menu. I chose Default Green, as it had no obvious conflicts for color blind users and because given the subject matter green is a calming color.
Something that was bothering me while building Default Green, however, is that the success color is also green! I wanted it to be visually distinct from the other green widgets in my UI. Fortunately ThemeBuilder made this easy. I selected the success color from the dropdown and was shown all variants my users may encounter:
Using the color picker, I changed it to cyan which was currently unused in my UI.
Conveniently, all other success colors changed hue with it! I didn't need to go through and decide which hue was better for emphasis or hovering- ThemeBuilder did that for me. As an artistically challenged individual, I am thankful.
You can see this color throughout OriginTrackr's UI, as well as the excellent Default Green. I hope you find it calming and the intentional uses of color intuitive!
Top comments (0)