A peek into cubbi
In a world of similar packaging, enjoy organization in a blink
With the ever expanding capabilities being established within technology, cubbi aims at bridging just one of the gaps in accessibility. Designed with VoiceOver and other accessibility settings in mind, cubbi utilizes a user’s camera to recognize a barcode, scan it, retrieve the product information and display it in a clean, concise format. Users can then save the item into a “cubbi” of their choosing and update information however they see fit. For instance, if a user only uses a particular item for a certain recipe, they can save that recipe in the notes section of that item. This same thought process can be applied to a myriad of scenarios. Users looking to get more organized can utilize the expiration date feature to keep track of their various items. Other users who care for people in their household could utilize several features to help keep track of details about items. No matter the user, the desire to create a clean, usable interface is cubbi’s key.
The idea for cubbi was thought up by the project’s sole member, Kathleen R McKiernan the first week of Holberton Foundations. A few years back, after a myriad of doctors appointments, cubbi’s creator, Katie, received the news that her vision was deteriorating, and would continue to do so. In many ways this helped ignite an air of inventive problem solving and a curiosity to expand the possibilities for day to day life. With the desire to create accessible technology for both the current world and the world to come, cubbi was born.
For a project based entirely on accessibility, using HTML, CSS and JavaScript as the foundational languages is key. This also ensured a clean design that can easily be modified and expanded upon. The project also utilizes 3 APIs: GCP for data storage, WebRTC to enable smartphone functionality, and Barcode Lookup to retrieve item information upon initial scan of an item. As a very simple flow of logic, below we have an example of the app’s interface. In fig.1, upon opening the app, users are greeted with the main page, which features a large “peek” button. This button aims to ensure user privacy because once the user clicks it, they’re brought to fig. 2 where their camera is enabled and ready to scan the item. The camera’s functionality looks to auto-detect barcodes and automatically capture the item’s information. Once this is done, the barcode is checked against the items saved in a user’s account. If it doesn’t appear, the API is used and the information is pulled. When the item’s information is received and ready for display, it is shown in a format seen in fig. 3. Here we see the item’s name and cubbi it’s stored in, as well as other item information and can update and delete the item from this page. In an alternate way to find an item, a user can open the cubbi page, or fig. 4. Here all of the different cubbis are seen, and clicking on them generates a list of all of the items stored within that cubbi. From that point, clicking on a particular item will bring you back to an item display seen in fig. 3.
The most difficult part of this project was implementing the functionality to enable a user’s camera. This part was done pretty much entirely with JavaScript, a language that was new to Katie coming to Holberton. Within the code that was developed was a tricky line of recursive code that was used to enable the auto-capture feature of the camera page. This particular rhythm as well as enabling proper formatting was incredibly tricky. Thankfully the documentation for WebRTC was thorough enough to find some amazing built in functions to utilize. One thing that would have been done differently if the project could be done over is adding on another team member. With a project as large as cubbi, a great deal more could have been accomplished for the product demo if there was an extra set of hands involved. This also could have helped a few other small technical hiccups along the way as well.
For this project, it helped teach even more about accessibility and coding to accommodate all users as well as some social takeaways. Working independently can be quite the double edged sword, so it was eye opening to see where the right choice was made and where it’s glaringly obvious things could have benefitted from a larger team. As far as research is concerned, this project was a huge confidence boost to show that no matter what happens, the tools are there to find solutions. It also solidified a love for HTML/CSS and the accessibility that is available just within their basic functionality.
With such a large percentage of the world considered visually impaired or blind, it is a duty to developers to consider how to see all the communities that could utilize their technology. From Cosmetologist to Coder, Katie hopes to see a world open up to the visually impaired community through this application in so many different ways.
