View on GitHub


AisleGuide is a multiplatform application being developed to provide users with a better way to navigate when buying groceries.


AisleGuide is a multiplatform application being developed using Ionic Framework. The goal of this application is to provide users with a better way to navigate when buying groceries. AisleGuide will provide that by displaying the shortest path through a particular store from a users’s grocery list.

AisleGuide allows the user to compile a list of items found within the grocery store. Once the user has their list, it will sort those items into the fastest possible route through the current store, and it will display an image showing the user where to go. In addition to simple list compilation and sorting, the user has a few customization options. They will be able to save lists to local storage, allowing them to quickly load frequently used lists. Also, the user will be able to add store-specific items to the application.


Noel Raley, Daniel Carey, Christian Ring, Zac Hughes


Dr. David Rocheleau


Application Walk-Through

From the title screen, the user is first tasked with selecting the store from which they plan to shop. The current options are BiLo and Publix. From here the user either selects the side menu or the button at the bottom.


Lets choose the side menu to explore what options are available. As you can see, the user has the option to search for Grocery items alphabetically and categorically. They can view their currently selected items. They can load previously saved lists. The user can also add a new item to the master list, for more customization. When they have a full list, they can click the navigation button to be guided to their respective items.


From there lets choose Alphabetical. This will start by displaying all items in A-Z order. As you can seen, there is also a search bar at the top that can aid in finding items to select. This will search by both the item name, and the category that it can be found in.


Next lets jump to categorical, and specifically we will look at the category “Dairy”. Here the items are listed in alphabetical order as well, but only the items under that category are displayed. The rest of the items are filtered from view. Here we have selected two items.


So lets navigate to those items by selecting the navigation page. Here it will display the store layout for whichever store is selected. It will illuminate the aisle that has the top item green, directing the user to its location. As the user moves through the store, they will check off the items, bringing the next to the top. The map will adjust to the new top item, and guide the user to the new location.


If there is an item that is in the store, but is not found within the AisleGuide application, the user can add it. To do this the user selects Add Item from the side menu and simply fills out the information needed. When saved, the new item will be integrated seemlessly into the master list of items.