travelingShopper

• 

  Mobile View

• 

  Desktop View

• 

  Prototype design 1

• 

  Prototype design 2

• 

  Prototype design 3

• 

  Prototype design 4

We as consumers often do not realize some of the inconveniences that we face while shopping because we have become so accustomed to them. Attending this hackathon and getting to know different challenges inspired us to think outside of the box; we brainstormed on our past experiences shopping at Kroger or any other retail markets and the ways we would be able to make them better for the future of us and others. Although all of our group members have past experience with some software development, we wanted to branch out and try to incorporate libraries and practices that we had no experience with to create our application. We have experience with Python, JavaScript, HTML, CSS, and SQL but we tried working with Vue.js, Vuetify.js, and API calls to create our travelingShopper application. Close to the end of the process, we decided to try and incorporate AdobeXD to showcase a prototype of our design process. We used this software because we were not able to finish as much as the project as we would have liked, but we still wanted to have something to showcase for the purposes of this Hackathon challenge. We started this process by looking into the Kroger's APIs to see if we could actually use the available public data for our application. Once we were sure the APIs would work in our favor, we split into two pair programming teams with one team taking on the backend with the API calls, and the other team taking on the UI creation with Vue.js. We used Vue.js to develop a prototype of an app that allows customers to input their items into their virtual cart. Our app gives them an eagle eye view showing them where their items are, and what item to get next to ensure the quickest shopping experience. Challenges:Throughout the hackathon experience, we learned a lot about restful APIs, working in an MVC environment, and collaborating better as a team. I think we can take a lot of these concepts and apply them in our next hackathon, or a future business venture. We think the biggest challenges was the fact that there was a steep learning curve with our entire process. Since we were trying to use new technologies, we were trying to learn the best practices and the documentations on the fly which made it challenging for our team. For the front end, we wanted to use a datatable to populate data dynamically using the JSON data we got back from our API calls. We were able to create a datatable and populate it with hard coded data, but we were not able to bridge the gap and find a way to populate it dynamically. On the backend, we needed to generate a new token key every fifteen minutes because it would time out. We were not able to create a dynamic call to make a new token key every time, so we hardcoded the token key and changed it every fifteen minutes.

Built With

• html
• javascript
• vue