Important Note To Judges:

Due to the limited time and lack of correct data, we cannot realize some of the functionality. Therefore, we decided to use the pre-edited image or data set to show our ideas. The logic of our project will describe below:

Sign Up:  After open the app, user will sign up for a new account. Every text input has a validator so that user cannot enter invalid email or password.

Login:After registration, user will login to the app. It will send an HTTP request to backend. We suppose to use token based login for persistency, but due to limited time we didn't.

Search groceries:After login, user will see a map view. It indicate the stores near the user's location fetched by GPS. When click the corresponding card of a store, a corresponding pin will change to red to indicate the position. When search a certain item, it will generate a list of items with corresponding stores, with price from lowest to highest, for user to choose.

Some function that hasn't realized:We just finish a wishlist template but we didn't connect with backend. Furthermore, we plan to add an appeal forum for user to post the product they want so that the grocery stores nearby and replenish their inventory.

This logic corresponds to what is shown on the demo video!


During the current COVID-19 pandemic, people flock to grocery stores to stock up foods and daily necessities as panic over the pandemic grows. Many large groceries, including Costco, appeared to experience supply shortage temporarily, which leads to unsatisfactory shopping experience of the consumers as their products in need might run out of stock. Inspired by the situation, we realize that the need for an app that optimizes the shopping experience by recommending a grocery based on the user’s shopping list.

What it does

SuperCart is able to list out optimal groceries based on users’ shopping list. It will search the inventory of stores to ensure that products in need are in stock. It also functions to compare prices between groceries for users. By requiring users' position, it will prioritize the nearby stores that fulfill users' needs. After considering factors of inventory, price, and distance, SuperCart will generate a list of recommended groceries for users.

How we built it

front-end:  We use React Native as the front end framework to build a iOS style mobile app. After determine the workflow and the frame diagram of each component, we create a git repository and post every progress for teammate to review. We used router to switch between different pages and map view to show the locations of different stores and supermarkets. After backend code is deployed to google computing engine, we connected apis with user interfaces.

back-end:  We use flask as the back end framework and beautiful-soup as the web scraping tool. We scraped data from different retail stores. Due to lack of data, we may not correctly respond the stock to the reality. We just wanna show how this idea work. After all data have been extracted, we start to build our apis.

Challenges we ran into

data extractions and lack of current apis:  Searching on the internet, we cannot find any api which can return the inventory of different supermarkets at once. Furthermore, using google maps find place api has a lot of inaccuracy. So it is hard for front end to display data correctly.

unfamiliarity with git tools:  Some of our teammate do not know how to use git command line methods, which is a great challenge for code management.

Accomplishments that we're proud of

  1. We successfully render the map view for users to visualize the place they may go to.
  2. We deploy the backend onto GCE and connect it with local front end codes.
  3. We scrape the data from different supermarket website using beautiful soup.
  4. We provide a recommendation of store for user to buy a product.

What we learned

  1. Building an API that connects local database and requests and perform specific task.
  2. Scraping data from a dynamic web page such as a product page on
  3. Use of database with SQL.
  4. Use google map api to find stores
  5. Deploy code on google cloud platform

What's next for SuperCart

  1. Updating database with real-time data
  2. Linking backend api such as wishlist and appealing forum to front end
  3. Improvement on security issues by encoding user information in database
  4. Update UI interface for better experiec

Try It out



beautiful-soup, flask, google-compute-engine, google-maps, javascript, python, react-native, sqlite, web-scraping

Devpost Software Identifier