Spooky Shopper

Helping shoppers spend less time lost, and more time shopping!

Comment

Inspiration

We've been lost in new supermarkets so many times, we've gotten sick of it! As avid shoppers ourselves, we'd like to help fellow shoppers spend less time having to be lost, and spend more time actually shopping!

What it does

This mobile app allows the user to input a shopping list of what they want to buy, which is done by the user typing in the items they want to buy. If the item isn't in the store however, this will be reflected in the fact that they can't add that item to their shopping list. Once the user has inputted all their items, the app will sort their list so that they will cover the shortest distance. After that, the floor plan of the store is displayed with the locations of the items, allowing the user to see where to go next.

How we built it

We built the front-end using React Native, which uses TypeScript and to test it, we used Expo and Android Studio to test it on our phones and emulate it respectively. Since we all have some experience with HTML, CSS and JavaScript, the syntax itself wasn't too hard to grasp. We also used Python, specifically Flask and Pandas in order to handle the backend, utilising json, csv and txt files. In order to test the app, we used Expo Go in order to emulate the app on our laptops and to download it on our phones. In order to make some of the graphics, we used matplotlib to quickly create a graph to prototype the floor plan and GIMP, a free image editing tool, to actually make them.

Challenges we ran into

TypeScript was quite new to us, so we had a bit of trouble using it effectively at first. Since this was our first hackathon for all of us, we felt slightly underprepared since we didn't have much time to familiarise ourselves with it beforehand, however we were prepared to learn as much as we could in the 25 hours (because of daylight savings) we had. We also didn't get the best sleep on the night before, so we were quite fatigued as night rolled around. Lastly, we also had various bugs we had trouble debugging, but that was also because we were new to the language.

Accomplishments that we're proud of

Making our first mobile app was a very grand dream that we had been able to realise together today. We also worked together really well - every person had something to do throughout the whole day, we communicated well with each other which was reflected in the commits we made to our GitHub repository and we were very supportive of each other. Case in point, I felt very tired around 2am, so one of my teammates told me to take a break and walked me to the rest room.

What we learned

We learnt to make our first mobile app together and all of us learned how to use React Native, put into practice about what we learnt about working as a team and learnt a lot about technologies we were unfamiliar with. Most of us learned to use csv files and Flask as well.

What's next for Spooky Shopper

We're aiming to be able to be in a position where we can pitch our mobile app to various supermarkets in order to entice them to use our app. This will be beneficial to them as they will be able to reduce congestion in stores. That being said, we do need to fix a few issues with the app, such as not being able to draw the path between items in the store and the list sorting not fully working. To upscale, we will also use an SQL database as well as build a store searcher in order to select a specific store. We're also planning to add more features, such as adding in a tracker to see where you are in the store.

Share this project:

Updates