The inspiration of our hack comes from a short story of a complete stranger offering to help get groceries for Mark Rober's dad. CoVID-19 has brought out much selfishness in humans, from panic buying to hoarding resources. These selfish actions prevent at-risk people from acquiring these resources, who are often the ones who need them the most. Our app, Grocer, hopes to utilize the community to provide for these at-risk people while at the same time strengthing the relationships within the communities of our country.

The Current Situation

The virus spreads mainly through person-to-person contact, and having at-risk people enter supermarkets where others isn't an optimal solution. However, we still need to be able to supply these at-risk people with the necessities they need.

Why Not Delivery?

Currently, at-risk people can obtain groceries and other necessities through delivery. However, delivery isn't an efficient use of our resources, as it requires supermarkets to acquire more delivery vehicles while failing to use the millions of cars around our country. Delivery is also expensive and requires hiring more workers, contributing to a great expense that businesses aren't likely willing to pay; many supermarkets (notably the Chinese ones) don't provide delivery but still contain food and resources that are needed by thousands of people in our country. In addition, the supply of workers that can deliver goods is unable to match the demand for delivery services, and leads to either a sacrifice on the customer's end in cost, time, or both.

We believe that a more optimal approach to supplying people with the resources they need is through pickup. Some stores, like Walmart Grocery, already implement something similar, but their system is mainly supported by workers. In addition, many stores that are smaller but still vital to supporting many people don't have these services, and it isn't optimal to only rely on big supermarkets like Walmart to supply the goods of the whole community.

To mitigate the expense for supermarkets, we decided to create an app that takes advantage of community effort in order to safely supply those in need of resources, so that at-risk people can still purchase from these smaller stores, while keeping the bigger stores from becoming overloaded or overcrowded.

There are three main people who use our app: The at-risk people (requestors), the shoppers, and the workers.

The at-risk people / requestors create an online grocery list through our app, which contains many necessities that they can request. They submit a grocery list through our app, which is to be fulfilled by the shoppers who are able to enter supermarkets and are less at risk of getting seriously sick from the virus.

When these shoppers shop at a store that the a requestor requested groceries from, they would be given the option to fulfill their grocery list as they shop for themselves. They would collect all the items that on the at-risk person's shopping list and check them out for the store to hold. The store would then notify the requestor that their items are ready, and they would come and pick it up from the store in a safe manner, such as having workers dropping the items off in their car. Our app also tracks the amount of of items shoppers have fulfilled. To give incentive, supermarkets can use this information to give small discounts on their grocery bills (e.g. for every 25 items fullfilled, they can get a 10% discount).

We did research about CoVID-19 and discovered that the main method of transmission of the virus is through person-to-person contact. It is unlikely that the virus is dangerously spread through contact with surfaces, so our option is much safer than having an at-risk person enter one of these stores where they are exposed to others around them. Even if it's less likely to spread through surfaces, our app still advises its users to take the necessary precautions when obtaining their items, such as thoroughly washing their hands after handling the packaging.

Each grocery list is associated with a unique QR Code within our app. If a shopper wishes to fulfill a grocery list, they ask for a worker at the store to scan the respective QR Code that locks the grocery list to ensure that they're the only shopper who's fulfilling the request. The app then transforms the grocery list into a checklist to help the shopper keep track of what they're buying for the requestor. When they are finished, they proceed to the checkout line where they checkout the requestor's items separately from theirs. If they have completed the grocery list, the get the grocery list's QR Code scanned by a worker once again which completes their fulfillment and notifies the requestor. The requestor then can pick up their order safely, as a worker can drop off their groceries in their car without the requestor needing to enter the store.

We considered many ways that this system could be abused and thought of ways to prevent it. To prevent shoppers from using our app for profit (by using the discounts), we would implement a timeout (e.g. for an hour) that gets activated after each fulfillment. This way, we discourage staying in these supermarkets for extended periods of time only for the discounts, which is contrary to the purpose of our app and only increases the risk of them getting infected. As well, a shopper can leave without fulfilling a grocery list. To combat this scenario, we integrated our app with to detect a shopper's location. If detects that a shopper has left a store without finishing a requestor's grocery list, it would automatically unlock the list for other shoppers to fulfill and would give the shopper a longer timeout and a strike. If a shopper receieves too many strikes, their account would be disabled.

Our app benefits every party at each side of the spectrum. The at-risk people benefit from less exposure to the virus while still being able to access necessities, as they can stay in their car and not have to roam around stores, where they are more exposed to the virus. The shoppers benefit from the small discounts and from being able to contribute to the virus-vulnerable members of their community. The retailers benefit from reducing the load on their workers, conserving their resources (e.g. delivering less), and being able to reach more customers with our app.

How we built it

We used React Native + Expo to build an app that works on both Android and iOS, which is especially important if we wish to target most people. We originally used Python + Flask to build the backend, but later decided to switch to Node.js.


In order to display a list of necessities that a user could purchase at one of the supported stores, we needed to retrieve these items from the official inventory. We used UiPath to facilitate this process. The powerful data scraping tool UiPath provided allowed us to fill our app with realistic items that one could expect to buy at the stores we implemented. It also made it easy to scrape from more than one website, making it easy to implement multiple stores in our app prototype.

UiPath also provided official tutorials that made it incredibly easy to get started. Our teammate in charge of doing the web scraping had never heard of UiPath before, but within a few minutes, he was able to find a tutorial that taught him how to do just that and scraped grocery items off of Walmart to display in our app. This process was much less tedious than trying to create a web scraper with code from scratch.


Our app needed a reliable database that could hold large amounts of items. MongoDB was perfect for this application because it provided tools that allowed us to easily view and manipulate the data during testing and debugging, such as MongoDB Compass. MongoDB Compass allowed us modify data in bulk after we changed our minds about how the documents should be stored. For example, we originally decided to assign integers to stores to identify them. However, as our app grew, we realized that we needed to create a separate collection for Stores. The flexibility of MongoDB allowed us to relate the two collections with a simple modification to the Schema, and allowed us to bulk edit the documents to reflect this change. To programatically interact with the database, we used Mongoose, which is a high-level JavaScript package (relative to the native drivers) that allowed us to easily create, read, update and delete documents from the server. In fact, it was so easy to use that one of our teammates who had never heard of Mongoose was easily able to pick it up within a few minutes. The ease-of-use and the powerful tools MongoDB provided allowed us to obtain maximum efficiency for our project.

There were potential problems with the system our app used. What if a shopper forgot to finish somebody's request, making it indefinitely locked such that others couldn't fulfill it? How could we easily let a shopper know if a store they visited was supported with our app? solved these location-related issues as it allowed us to receive events whenever a user enters or exits a location. We implemented in our code such that whenever a shopper enters a geofence around a store supported by our app, it would send a notification to the shopper, letting them know that they can fulfill a grocery list request at the store they're shopping at. As well, when a shopper leaves the store while still having a requested grocery list active, our app would notify them to remind them get the QR Code of the grocery list scanned by an employee (if they finished a request) or to cancel the request within the app. We then set a timer, that when expired, would automatically unlock the grocery list and activate a timeout for the shopper, warning them to take action in the future. Without, it would be difficult to tell if somebody had no interest in fulfilling a grocery list they assigned themselves to, or whether they're simply taking a long time to get groceries. allows us to consistently detect these cases, ensuring that the grocery list requests are fulfilled as soon as possible.

Every project needs a domain name. We decided to choose the domain because it embodies the purpose of our app well, which is all about shopping for those who can't do it safely themselves.

Challenges we ran into

One of our teammates didn't know React Native, and another didn't know how to interact with MongoDB in the backend. Therefore, it was important that tasks were broken up and given clear specifications so that two people can work separately on both parts while ensuring a seamless integration. However, coordination was a lot harder than we expected, but luckily one of our teammates knew both React Native and MongoDB, so he was able to effectively integrate the front-end with the back-end even when they were worked on separately.

Working together online is much more difficult than working together in-person, because it becomes hard to communicate and help each other out. However, through Discord, we were able to effectively communicate our ideas and help each other debug code. There were times where it became hard to give instructions through voice (especially when our voices cut out a lot), but we managed to work through it and ended up giving sufficient help to one other when we needed it.

Judging Criteria


Leon Si

Dragon He


We implemented most of the features that we wanted to implement at the beginning, largely thanks to the large time frame that HackQuarantine provided us with. The majority of our app's features work, but there are a few details that have been left out. For example, we couldn't test with an actual geofence (due to the lockdown in Ontario, Canada). As well, we didn't implement an official sign up/login system within our app. However, at the end, we managed to implement all the important core features of our app and make it work well enough to present a working prototype of the main features!

Design, UI and UX

We designed our app to be simple to use, especially as one of the main target audiences of our app are the elderly, a subset of at-risk people that would greatly benefit from avoiding entering grocery stores. The user interface is clean and uncluttered, and navigating through our app is easy and intuitive. The simplicity of use contributes to the great user experience, as the effort needed to accomplish tasks within our app is minimal.


See the "How we built it" section for more information!


While many stores do implement pickup options, they don't involve the community and rather leave the burden to the employees. We realized that if CoVID-19 continues, stores will eventually be unable to hire enough workers to match the demand of pickup/delivery options. After hearing about Mark Rober's inspiring story, we believed that our app does more than just help reduce the burden of the employees, but also allows for a chance for people to do good within our communities. I haven't heard of such a system implemented before, but I believe that it was only some time before somebody extended the idea of getting groceries for others for profit into an app where we get groceries for those in need for benefits within the store, especially in a time like this.


Frontend App (Expo)

Frontend Repository

Backend Server

Backend Repository


We originally built a simpler prototype of the app for WinHacks, but realized that there was a lot of improvements we could do affecting both the app and the idea. We decided to revamp our old idea and dive deeper into the possibilities that our app could reach.

The name Grocer 2.0 not only stands out as a more thought out version of our old app, but also symbolizes the shopper becoming the person collecting and helping prepare the food, as if they became a new Grocer (a.k.a. Grocer 2.0)

Due to two of our original team members being unable to further help (due to online courses and other tasks they needed to finish), the other two members intensely hacked for another week to prepare the submission for HackQuarantine. They decided to make a new Devpost because of how great the new changes were to the idea.

Share this project: