Inspiration

Our team comprises of members who are in their early 20s, and we know how much of a drag it can be to go shopping, and more often than not we end up sticking with products we know, and not trying anything new. We wanted to create an app that would making the shopping experience more enjoyable, as well as encourage us to try new products out.

What it does

Our app makes use of a virtual floor plan of the store and a shopping list to help make the quickest path around the store, to help speed up the shopping experience. On top of this, our app offers quests, which encourage customers to try new products by offering in app rewards for tracking down products the customer hasn't tried before. Our app also makes it easier for those with disabilities to get around the shop, as it calculates the shortest possible routes between items, which is hugely beneficial for those with mobility impairments.

How we built it

We wanted to create a seamless experience for our users, and in the end we decided on creating a web application. We originally planned on creating a mobile application, however due to time constraints we decided on a mobile first approach to our web application. For our server side implementation, we used PHP 8 with Laravel 8, a robust and powerful framework that allows for the rapid development of backend web servers while still maintaining good levels of security. For our front end, we coupled ReactJS with Typescript for a modular, easily maintainable component system, and we utilised InertiaJS and Axios for our server to client communication.

Before developing though, we had to design all of this, and we used Figma for all out design work.

Challenges we ran into

The biggest challenge we had was deciding on how we would implement the virtual floor plan and GPS system for the app. Ultimately we decided on using the exterior boundaries of the store (i.e. walls) and taking the area of the internal space, and dividing it up into a series of small squares that would act as a coordinate system, which we could then allow store managers to place Nodes such as shelving units, tills, etc etc. We could also use this coordinate system coupled with a mobile device accelerometer and compass to determine the users path while moving through the store. For calculating the routes between items, we made use of Dijkstra's Algorithm.

Accomplishments that we're proud of

We're really happy with how the User Interface turned out. Not only is it incredibly intuitive, clean and easy to interact with, but it is also friendly towards disabled users, catering towards those with colour blindness and mobility issues. Our key aim was to create a seamless user experience and we feel like we achieved this.

Another thing we're happy with is what we managed to achieve on the server side implementation. We managed to keep a cleanly written, easily maintainable backend system, without spending too much time writing the code. Should we have the chance to continue development, we would be able to easily pick up where we left off.

What we learned

The most vital thing we learned was about time management and role assignment. It's key that we manage our expectations from the outset and we set clear and decisive goals as we move through the design and development phases. Also communication is a clearly vital part, and it's important that we ensure everyone is working under the same mental image of what the project is and which direction it is going.

What's next for Product Hunt

Ideally in the future we'd like to implement the mobile app, as well as expand the web application to include options for vouchers and more quest ideas. We'd also like to add options for quests for users with mobility issues and financial hardships, as the app currently promotes more of an economical gain for the store implementing it.

Share this project:

Updates