Naples, like millions of other cities in the world, suffers from COVID-19. People have to perform social distancing and minimize their travels outdoors. While the young people can still go to supermarkets, the old, the disabled, and the homeless are not able to access stable food resources as usual. To help out the disadvantaged group as well as advocate for social distancing, Pina and Angelo start to hang baskets, which are filled with food resources for the one in need, on their house’s balcony. Surprisingly, this behavior attracts more helpers to put food, as well as other necessities, in the basket for the handicapped. The shared basket resource in Naples also inspired us to popularize and systematize the cooperative idea through a web app named Basket.

What it does

Basket is a web app that enables neighbors to help each other during the hard COVID-19 times and minimize the necessity to go outdoors to buy groceries. Everyone can use Basket to either help his/her/their neighbors, or get help from others. The users can choose to either help their neighbor or ask for help. To help their neighbors, he/she can post the information of when and where he/she is going to shop. Helpers can also view past requests that the others posted earlier and select the ones they want to help based on basic information including their shopping lists, special tags, age, distance, etc. These information are displayed on a Google map. The users will get credit every time he helps others. If the user needs help, he/she can also see past posts from the helpers and post requests for help. He/she should select a nearby supermarket and add groceries he/she needs and tips he/she is willing to give into the shopping cart. After entering basic information, including name, address, description of his posts, he will either pay through Basket online or choose to pay in cash offline if he/she is not familiar with online payment. After a helper is connected to one or multiple people in need, he/she will buy groceries in a supermarket and deliver to his/her neighbors. Helper can then either check the complete sign and Basket will pay to him or he/she will complete the transaction offline through cash.  Basket can be applied even at the post-COVID19 times. It used the shared economy concept that enables people to save their labor and buy groceries for others. Unlike traditional takeout platforms, basket saves the costs of delivery-ma for both supermarkets and the clients.

How I built it

  • First, we use the Figma UI design tool to collectively design our web app UI.
  • We then use ReactJS, a Javascript library as a frontend tool. We used the react router to route between different pages.
  • Flask, python and Azure MySQL server management system to develop the web app. We used my Azure MySQL server, and connect to the host via python to create databases, tables, and edit them, so that every one can have access to it.
  • Special Credit: Zoom - really help our teammates collaborate through screen sharing, debugging, and discussing.

Challenges I ran into

The biggest challenge we ran into is learning and writing React. Although the front-end team have some experience in front end, this is the first time that we use React and it takes time to learn it. Another one is to build up a robust and responsive MySQL databases that our Flask can query and send back to front end smoothly, since the website is data heavy.  Also since we are a global team ( that we are sparsely distributed in China, West and East Coast of America ), to communicate effectively and stay updated with each other is also a challenge. However, we manage to deal with it through holding a Zoom Meeting Room open 24Hours and stay in the room as long as possib, and proactively reach out to one another through our group chat.

Accomplishments that We're proud of

We are proud that Basket connects everything together: no matter it’s system-wise, or neighborhoods-wise. Even though we have a hard-time familiar with these development tools, we believe our method can be deployed into a larger developing scale since react is component based.  Also, we believe Basket will be widely deployed into many neighborhoods in the future

What I learned

After acknowledging that React is a popular front-end developer tool for it’s component based style, my teammates started to learn react from zero. We also learned how to connect react and flask together and connect them to the MySQL database on a server. Some of my teammates didn’t have any experience in html style programming before, so we learned a lot through the hackathon. We also learned how to use Google Maps API on a website. Specifically, I learned how to load GEOJson address information into Google Map and illustrate them as markers. Also, I learned to add information windows on the markers and connect the data with SQL databases.

What’s next for Basket

Basket can be applied even at the post-COVID19 times. It used the shared economy concept that enables people to save their labor and buy groceries for others. Unlike traditional takeout platforms, basket saves the costs of delivery-fee for both supermarkets and the clients. We decide to first optimize our web page and utility from both  style-wise and function-wise. There are several features we want to add to Basket. First, we want to add a Community for the neighbors to publicly or privately chat with each other if they need help from each other or simply need emotional connections from each other.Then, we want to connect a phone call feature through Twilio for the ones who are not technologically literate enough to use our web app. They can just make a phone call to our virtual number and our AI assistant will automatically post the information on Basket. They will receive a phone call when someone connects to their request. Basket provides a unique business model that other companies haven’t used before: sharing-economy on delivery systems. As the delivery fee is very high in the US, we want to first implement Basket in USC neighborhoods. As a result, we need to contact supermarkets near USC to connect their items to our database so that buyers and helpers will have a transparent price. If it works well, we can apply Basket into a wider range of areas and eventually everyone, not only in the US, but also in China, Europe may be benefited from Basket. In the future, we would like to use Blockchain for our online transaction so that buyers and helpers can pay less in each transaction so they can save more transaction fees and have a safer, more transparent transaction environment.

Try It out



css, figma, flask, google-maps, html, javascript, mysql, python, react

Devpost Software Identifier