HeartCart | Devpost

❓The problem at hand.

How might we create an app that efficiently transports food from non-profit organizations to the homeless population in San Francisco, ensuring accessibility, dignity, and nutritional value?

🍄 Where did this stem from?

As a child, Grandma would always bring me and my sister to Chinatown in San Francisco. Through riding the #30 muni bus to walking up the hills to Willy “Woo Woo” Wong Playground, we would pass through blocks and blocks of clusters. Clusters of homeless people. As a kid, I always wondered, “how do they get food? Do they have people like Grandma to cook for them?” Grandma would tell me that sometimes, kind hearted humans would give me a dollar or two for food. Then she would hand me a few dollars to give the homeless as we passed them.

Homelessness is one of the biggest and most critical issues in San Francisco. With over 8,000 unhoused individuals in existence, we as a team wanted to find an innovative way to support this community.

🥣 Digging deeper.

Through research, ideation, and critical thinking, we were able to establish the foundational purpose of HeartCart. We used resources such as DoorDash and UberEats for the food delivery aspect and Volunteer Connection and POINT for the volunteer sign-up aspect.

We found through readings that many users enjoy the minimalistic style of the delivery platforms alongside the efficiency of the purchase experience. With that in mind, we were able to implement a strategically minimal interface and straight to the point experience for HeartCart.

💌 What does HeartCart do?

As users enter HeartCart, they are presented with the closest food banks to their current location. This ensures the most convenient drive from point A to B. When the user arrives at the food bank and picks up the food, they are ready to deliver it to the homeless population. At this point, users are provided with a homeless hotspot as a guide to places they could deliver the food. After delivering the food, they take a photo to ensure successful delivery, and add another heart to their cart!

⚒️ How we built it

User Interface designed in Figma and further implemented with React Native on the front-end while also utilizing Firebase for the backend / database connection.

We decided to build 3 main pages, the home page, a map view, and a profile page. On the home page, we developed a list of the food banks in the area where we see how far it is alongside a rating. We can tap on one of these cards in the list to get a further description view with a link to the directions to the food bank. For the map page, we used a React Maps library and found a dataset by the SF Government that counts the number of tent structures and vehicles in areas around San Francisco every month. We decided to use this dataset to create a heat map to allow users with a general direction to where to go for distribution of the food. Lastly, the profile page has the user's basic information of profile photo, name, bio alongside a React Line Chart with data on the user's number of deliveries for each day in the past week to gamify the process as incentive. For the login page, we decided to use Firebase Authentication and connected it to the implemented Figma design for a seamless UI.

⏳Challenges we ran into

Some challenges we faced were difficulties in having a clear shared vision on how to plan out the app. The free creativity of design versus the structured limitations of code led to some points of confusion and compromises on both sides; however, we overcame this through clear communication 🗣️! We also ran into difficulties as it was our first encounter utilizing React Native to this extent, leading to confusion with the navigator, data parsing, and implementation overall. However, throughout the process, each page became easier and easier to implement 🌟!

❤️ Accomplishments we’re proud of

We are proud of being able to accomplish building an application with a coherent and sleek design that we did not believe we could build 48 hours ago! The amount that we both learned throughout the past 2 days is what we both take pride in from making a full design system to learning how to develop in React-Native all culminated into use being able to build this app 📚!

📕 What we learned

Many San Franciscans are very willing to volunteer! Aside from that, we learned how to work more coherently as a designer-developer duo alongside up-skilling ourselves in our respective fields. We learned about how design systems and using UI Component Libraries in design can make development process a lot smoother. Furthermore, we learned how to implement animations alongside utilize re-usable components to great extent to be more aesthetic and organized in front-end app development!

🛒 What’s next for HeartCart

As HeartCart continues filing carts with nutritious meals, we also strive to implement additional features to the app. We want to add a feature that allows volunteers to capture photos of their deliveries for accountability, present the opportunity to deliver other essentials in addition to food, and build the volunteer community!

Though our app is focused on helping the homeless population, we want to increase the user experience of our app as well. One exciting way we're exploring is introducing a social aspect, where users can collect hearts through their delivery counts and show appreciation by "heart-ing" photos shared by other volunteers in their feed.