Projects

  • Travis

CompareCarts App: Save Money on Groceries

Background:

In college, my girlfriend, her roommate, and I, bought groceries online together to save money and time. Being poor college students, we sometimes compared prices between Walmart Grocery, Peapod, and Amazon Fresh to see which provider would give us the best deals. This was a huge pain though because of the many groceries we would purchase so we didn't compare prices that often.


Later, during my senior year of college, I took a class called "Object Oriented Software Engineering" where we were allowed to create basically any software project that conformed to a client-server architecture. This seemed like the perfect opportunity to build a product that could solve our grocery issues and learn about building apps.


This was a team project, where I mainly built the frontend and made the system design. My other partners, Jack Ravekes, William Xie, Eric Rong, and Kun Liu, mainly worked on the backend. I'm not typically a frontend person, but I wanted to learn React Native.

Problem:

People want to buy cheap groceries and save time. At the time of writing, the Covid-19 pandemic is exacerbating this problem, with many people to turning to buying groceries online, but also, many people are becoming unemployed.

Savings could be substantial as the average American family of four in cities spend about $180/week or $9360/year. That means they can save about a thousand dollars a year if they can save 10% on groceries.


The natural question would be: is saving 10% on groceries realistic? Yes, it is but we normally wouldn't notice it. Would you notice that milk at one store is $2.00 and at another store it's $2.20? I wouldn't, but that's an example of a 10% savings that we'd like to capture with this app.

At the same time, would you actually know if milk was $2.00 at one store and $2.30 at another? Probably not because grocery prices change every week and if you really wanted to know, you would have to look it up on both stores' websites. That doesn't sound like a pain until you realize you buy like 50 items a week from the grocery store.

Solution:

A cross-platform app where users can search for grocery items from multiple grocery providers in a single search and then optimize their grocery lists to find the optimal grocery orders to save the most money.

Wireframing:

I used Adobe XD to wireframe the app. I never wireframed anything before, but this tool was really easy to use and I was able to go from downloading the software to finished wireframe in just a couple of hours.

Wireframing the app in Adobe XD

I was impressed by the ease of creating animations using Adobe XD which made the wireframe almost feel like an actual app.

CompareCarts App:

I built the app in React Native because I wanted to learn a cross-platform framework and React Native has the biggest community. I also briefly considered using Flutter, but I was wary about its smaller community and less support especially because this was my first app.

Login / Signup

First, the user logs into the app. Since this was just a prototype, we didn't really care too much about security. So, the frontend base64 encodes the username and password and sends these items within the body of a POST request. The server hashes the username and password and checks if these values exist in the database. If it does, then a 200 is returned. If not, then a 401 is returned.

Adding a new grocery list

Then, the user is greeted with his/her grocery lists or a page indicating that the user has no grocery lists. The user can create a new list.

Adding items to a list by searching for them

The user can then enter a list and search for items to add to the list.

Optimizing a grocery list

After adding a bunch of items to his/her list, the user can then press the "optimize" button which reorganizes their list into multiple orders to find the cheapest combination. In this case, the user saved $21.82 on a grocery list that was $87.70 therefore saving about 25%. The optimization algorithm also takes into account delivery fees.

Sharing a list

The user also has the ability to share lists with friends and family which allows them to see the shared grocery list and add or delete items from that list.

High-Level Architecture:

This project was built using a really simple client-server architecture. The client program (the app) interacts with the API server that’s hosted on Heroku through a REST API that we wrote. So every time a screen loads on the frontend, it’s sending requests to the backend to endpoints to do things like “verify user credentials” and “get items from list” and it updates what it displays to the user based on the server’s responses. As an example: when the user wants to search for an item, let’s say “cheese”, the client packages that request and sends it to an API server endpoint. Then the server takes that item name and then either queries the grocery provider’s API or webscrapes the page to get things like the image, price, and name of the items. Although webscraping is not very robust, we had to webscrape because we couldn’t get access to the official APIs. After getting the information for the item query, the API server then sends a JSON-formatted response to the client. When the user selects an item to be saved to their list, it gets persisted into the Postgres database. The server persists a bunch of data like account information, grocery list information, product details, etc. Overall, the architecture is a pretty basic client-server model, but if we needed to scale, we would probably need to add additional modules like caching, load balancing, and data partitioning so that a single server isn’t bogged down by a lot of requests.

Database Design:

When designing the database, I wanted to avoid as much data redundancy as possible. Theoretically, the database schema could have been much simpler like grocery_list can contain all the product attributes, but that would lead to data redundancy if there are multiple grocery_lists that contain the same item.


We separated "source" from "product" and "product_details" because the same item can be found from multiple grocery providers and each one may have a different price.

Conclusion:

Overall, this was a fun project where I got to learn how to make an app in React Native for the first time. I think there's a lot of business potential for this project where the user can order items through the app and the app would get an affiliate fee from the grocery stores. Further, there can easily be sponsored items and potentially we can sell grocery data to the stores to let them know what customers of their competitors are buying.