One of our members' sister is visually impaired and just learning to shop on her own at the grocery store. It can be hard for anyone to navigate a large store with many products, but for the visually impaired who cannot even see the aisle signs it's even more of a challenge. We decided to create shopwai to help not only those who are visually impaired, but also every other shopper who has difficultly navigating the supermarket or other large stores.

What it does

The application allows users to create their own shopping lists and see where all their items are on a map while they are shopping. Retailers would be able to create their own maps for the customers to use, improving their customers' shopping experience. The application utilizes pathfinding to give suggestions, allowing busy customers to efficiently shop.

How we built it

Our application was mainly built with Python and Flask as the backend. SQLAlchemy worked as our database and we used Jinja for templating. On the front-end portion, we used HTML5, CSS3 and Javascript with jQuery. A d3.js package was used to create and show the floor plan of the store. We also created a tool to help users create their own maps and floor plans, with items mapped to them, with Processing and Java.

Challenges we ran into

Integrating Processing was a huge issue. Initially, we had hoped to completely integrate Processing into our application without it being standalone at all, because it was able to convert code into JavaScript. However, this did not work for methods involving Buffered String Readers and such. We had the program output a file that could be used by the app instead.

Initially we also planned to have image recognition integrated with Vuforia and the Argon browser, however, the browser's integration with Vuforia was not complete and thus we weren't able to use it.

Accomplishments that we're proud of

One of the major things that was accomplished was a Processing program that works as a GUI to help anyone create a file that, when put into our application, is able to a floor plan with items mapped appropriately. It is a very useful part of the "Manager/Stores" side of the application.

While seemingly a small detail, getting the floor plan/map to scale appropriately to the page, shrinking as the page shrinks, growing as the page grows, was very important to use. This was extremely hard for us to figure out with the package that we had been using, which allowed for multiple layers, but did not give us much control over each layer. This was an important part of our app's user interface that we focused on else the map would have been too clunky and inconvenient to use, defeating the purpose of the application as a whole.

What we learned

As most of our members have not had extensive experience working on web applications, we learned quite a bit about a couple new technologies and packages. Along with getting more familiar with HTML, CSS, and JavaScript, we also learned more about how to use Flask and SQLAlchemy. One important thing that all of us finally learned how to use more efficiently was jQuery. As for the floor blueplan, we used packages from d3.js, a completely new javascript library that none of us had ever touched before.

What's next for shopwai

There are quite a few things that we want to add onto our current version of shopwai, for the web app to reach its full potential.

Our current web app has all of our data stored locally. While we have started a branch on our repository for basic firebase implementation to upload and get our data onto an online database, it is still something that needs to be worked on, as we would also need to keep in mind security and other pieces of information that we need to save.

We still have a couple problems with the mapping of the objects onto the map with the current d3.js package that we are using. In the future, we would most likely look into other d3.js mapping options as well as other technologies as a whole that could better suit our app's needs.

We also envisioned our application to be able to support multiple types of users. "Manager/Stores" would be able to upload their own version of their stores' maps while the "Customers" would be able to save and customize lists that they prefer. This would allow for a better user experience as a whole, as app caters to specific needs.

Share this project: