Banana - a comprehensive grocery price optimizer

See the best nearby discounts the moment you open Banana
Search an item like milk and compare every store’s price, all in one place
Share your location or enter an address to find nearby stores and their offers
Free to use, or Premium for daily prices, with 20% going to local food banks.
Link your store loyalty programs to unlock member prices.
Save your weekly groceries and reload them with the latest prices.
Manage your account, saved location, and saved lists in one place
Sign in with Google or email to keep your lists and preferences.
Compare your whole basket across stores instead of checking item by item
Mobile app: Search an item like salmon and compare every store’s price, all in one place
Mobile app: Share your location or enter an address to find nearby stores and their offers
Mobile app: See the best nearby discounts the moment you open Banana
Mobile app: Save your weekly groceries and reload them with the latest prices.
Mobile app: Pick the closest options

GitHub Repository

Link: https://github.com/priyanka-jason/Banana

Project Link

Link: https://banana-8qk.pages.dev Test Account: [email protected] Password: UBC123

Problem

Grocery prices keep rising, and the cheapest store changes from item to item. Comparing five flyers takes time that the families who most need the savings often don't have. Cheapflation and inflation are an issue, where simply picking the cheaper options may yield higher costs in the long-run.

Families need a service to reduce their costs.

Solution

Banana is a website and mobile app (Android and iOS) compares grocery prices across Save-On-Foods, Walmart, Costco, No Frills and Real Canadian Superstore in Metro Vancouver. Search once to see each item's price, discount, size and the nearest store.

Add items to a basket to see your total at every chain and the cheapest mix of stores. Banana always provides alternatives for cheaper total cost, with the same total quantity of items. You will always have the option to change themselves; Banana doesn't decide for you.

Saving money is always free; Banana's basic functionalities are available for everyone. Optional Premium ($4.99/month) sends 20% of every payment to local food banks. Once operational expenses are offset for the month, 100% of proceeds go to local food banks.

How we built it

React, TypeScript and Vite on Cloudflare Pages. Supabase (Postgres with PostGIS) for data and sign-in. MapLibre with OpenFreeMap tiles for maps, and the BC Address Geocoder for address search. A TypeScript pipeline turns each chain's data into one shared format, and GitHub Actions runs it daily.

To compare different sizes fairly, every item gets a unit price, based on its total size s in grams, millilitres or items:

$$u = \frac{p}{s} \times 100$$

React, TypeScript and Vite on Cloudflare Pages. Supabase (Postgres with PostGIS) for data and sign-in. MapLibre with OpenFreeMap tiles for maps, and the BC Address Geocoder for address search. A TypeScript pipeline turns each chain's data into one shared format, and GitHub Actions runs it daily.

To compare different sizes fairly, every item gets a unit price, based on its total size s in grams, millilitres or items:

So a "2 x 4 L" pack at $11.99 is s = 8000$ mL and works out to about 15¢ per 100 mL.

For a basket of items i, chain c's total and the cheapest mix across stores are:

T_c is only ranked if chain c has every item. Otherwise Banana highlights what's missing.

Challenges

Every store writes sizes differently ("2 x 4 L", "per kg", "12 ct"), so we had to read them all into the same units. We also had to stop a basket that's missing items from looking like the cheapest.

As first years, we have little to no experience with web design, integration of back-end and front-end systems, and utilizing databases. All of this is completely new, which is why we had to learn.

One aspect we struggled upon is scraping data, which is protected by firewalls and thus impossible to be gained with webscraping techniques. As such, we have the skeleton of an AI-assisted API to collect and scrape data, although we did not implement it due to cost.

Finally, the biggest hurdle was project management. A clear vision of features and implementation of databases along with proper division of tasks was hard to decide on due to our lack of experience in software group development. We struggled at first, and even had discrepancies in our results, but eventually we learned how to streamline the process with a clear workflow.

What we learned

We learned how to interact with online databases using Supabase, and the difficulty of using raw data. Most of the work in price comparison is cleaning data, not displaying it. Small honesty choices, like labelling demo prices and naming missing items, matter a lot for trust among users, and ensuring that our product is accurate and honest about the results.

The importance of slick, easily readable UI and UX is also emphasized, where we tried to optimize for user's use cases. We emphasized readability and simplicity, and always left the decision making to the user. With the shopping basket alternatives, we provided multiple options for users to then choose one of; our service never imposes on the user.

We were unable to scrape data properly due to a lack of time and funding to do. Instead, we had to use dummy data and focus on the key features of the service; time is of the essence with hackathons, where we had to know what to focus on with our decision.