Easy Grocy

Inspiration

This project was inspired by our own struggles related to living in a college apartment. Grocery trips at the University of Pittsburgh are never an easy task because students have to go off campus to find a store which often involves coordinating bus trips. Therefore, it can be really frustrating to realize you missed an item because your roommate finished it. Or your roommate was just at the store and could have grabbed something that you or the apartment needed.

From our experience, college students are terrible at coordinating with one another. And something like grocery shopping is something that cannot be avoided. Our app aims to make the process less burdensome for everyone.

What it does

This application allows users to join squads where they can collectively manage a shared grocery list. Items can be added, edited, and deleted by users in the group. After an item is added, users can control its status (in stock, needed). This allows for people to indicate if the apartment is out of something with the touch of a button. Additionally, when shopping users can mark off items as they find them.

Items in the list can also be attributed to a certain person or group of people. So for example, if you added paper towels to the list, you would say that's for everyone in the apartment. But if you needed something for just yourself, you could mark that as being just for you.

How we built it

We created this app using React-Native to allow for the application to be used on the web, on IOS and Android. In the backend we used the Flask framework and python to set up and manage our databases and handle user authentication. We used DigitalOcean to create a server and cloud to deploy our site. And lastly we used CloudFlare as our DNS server to provide SSL encryption.

Challenges we ran into

One challenge we ran into was incorporating the backend elements of Flask into our React Native app. For example, Flasks authentication traditionally works by routing users to different page once they enter a valid username and password. This is difficult to incorporate into a React app because it is a single page application (SPA). We were able to circumnavigate this problem using JSON web tokens (JWT) which would be created whenever a user logged in. This token is then required to access any of the user's information from our databases, effectively protecting it.

React Native presented many unique difficulties and lived up to its notoriety. That said, there is a large support community and with persistence we were able to push through. One issue that we ran into was that certain functions within React Natives library were asynchronous which created a lot of non-intuitive bugs.

Accomplishments that we're proud of

We are very proud to have completed this application using React Native that incorporates a completely functional backend. The design of the backend served as our own API which allowed for Flask’s functionality to be used by the React app. It was accessed from the front end using endpoints that were constructed to modify and access certain information. This resulted in very portable code that ensured a healthy and safe transfer of information from the server to client and vice versa.

The extra overhead of using React Native certainly pays off as well as it allows the application to be deployed as a website, IOS app, or android app. While there is the tradeoff of decreased customizability in certain areas (such as not having access to certain Apple libraries) can restrain the app in certain ways, having a multi-platform app in less than 2 days certainly makes the React Native framework worth it.

What we learned

We learned a lot about Git version control. We put in extra time and effort in order to properly use their forking, branching, and merging to handle merge conflicts quickly and easily. We also learned a lot about the React Native framework, which was new for the whole group. Additionally, we had very little experience using the Flask framework and working with more complex database systems.

What's next for Easy Grocy

There are still many features that we intend to add to Easy Grocy. Moving forward we would want to add a ledger that would keep track of who makes purchases and let the group know who is owed what money. Additionally, features include a receipt scanner to simplify the process of grabbing prices for objects. This would be a very useful feature but would likely require a machine learning algorithm using natural language processing. In that same vein, barcode scanning would help make the process easier.