Harvest Hub

Map with filters
Contact form with dropdown for school, linked directly to the schools email
Map pop up on click with additional food pantry details
interactive data frame filterable by same criteria as map, showing all details such as phone and location

Inspiration

Harvest Hub was inspired by the challenge of accessing food resources for individuals with busy schedules or limited availability. The application offers a filterable directory of food pantries, enhanced with an interactive map and detailed contact information. By enabling users to search for food pantries based on their operating hours and location, Harvest Hub aims to make essential resources more accessible and convenient for those in need.

What it does

Harvest Hub is an interactive platform that connects users with over 550 food pantries across the city. The application features a dynamic map and allows users to filter pantries by their days of operation and geographic location, making it easy to find resources that fit their schedules. Additionally, users can directly reach out to the administrators of CUNY programs through a convenient contact form, simplifying the process of getting in touch and accessing support

How we built it

We built Harvest Hub using React for the frontend, integrating a map that displays food pantry locations. To obtain the data, we used Python to scan a PDF, extracting details about each food pantry, including their hours of operation and contact information. We geolocated all the addresses to provide accurate mapping of each pantry's location. The backend is powered by Supabase, which stores all the data. We implemented one-hot encoding to enable filtering by the days each pantry is open and a distance-from-user function to show the resources that are closest, ensuring users can easily find the most relevant resources based on specific criteria like proximity and days open.

Challenges we ran into

One of the biggest challenges was ensuring the accuracy of the data, especially since it was extracted from a PDF. We had to clean and verify the information to ensure reliability. Implementing a seamless filtering system that works efficiently with a large dataset was also challenging, as was integrating all components—React, Supabase, and mapping tools—into a cohesive platform. We encountered technical difficulties, particularly with React, as we worked to ensure the user experience was smooth and responsive.

Accomplishments that we're proud of

We're proud of successfully mapping over 550 food pantries across the city and creating a user-friendly interface that makes it easy for users to access vital resources. We’re particularly proud of the smooth integration of features like filtering by days open and location, as well as the distance-from-user function, all of which greatly enhance the user experience. These accomplishments demonstrate our ability to combine complex data handling with a seamless, intuitive interface.

What we learned

Through this project, we gained valuable experience in data extraction and geolocation, particularly the challenges of converting unstructured data from PDFs into a structured, actionable format. We also deepened our understanding of implementing complex filtering systems and integrating various technologies like React and Supabase into a cohesive product. Beyond the technical skills, we learned the importance of iterative development and problem-solving as a team, refining our approach based on real-time feedback and ensuring our solution was both effective and user-friendly.

What's next for Harvest Hub

Next, we plan to continue expanding Harvest Hub by incorporating more resource types, including additional data for dental clinics, sexual health clinics, and homeless shelters. We're also looking to improve the user interface and enhance filtering options, making it easier for users to find exactly what they need. Additionally, we aim to introduce features like real-time updates on pantry and resource availability to keep the information current and reliable.

Last Minute

Things went horribly wrong with react but we were able to use streamlit, a tech we were previously unfamiliar with to get a workable demo going! With just a few hours to go until deadline, and a mountain of problems emerging with the front end, Doug was able to get a plan b using streamlit up and running which captured the core functionality of our application.

Update: it was deployed successfully as well!

Built With

css
figma
html
leaflet.js
node.js
pandas
postogres
python
react
react-leaflet
streamlit

Submitted to

CTP Hacks 2024

Created by

In this project, I served as the data specialist, responsible for data collection, backend development, database setup, and data cleaning/feature extraction.

Since there were no comprehensive datasets on food pantries and related resources, I took the initiative to create one from scratch. Using BeautifulSoup and Python, I scraped several NYC.gov pages and PDFs to compile data tables for shelters, food pantries, dentists, and sexual health clinics.

The dataset for food pantries and soup kitchens was particularly successful, containing over 550 rows of detailed information, including program names, hours and days of operation, phone numbers, and addresses. I dedicated significant time to cleaning and standardizing this dataset to ensure it was accurate and user-friendly.

A critical aspect of my work involved geolocating the addresses to extract latitude and longitude values. I then reverse geolocated these coordinates to obtain ZIP codes, boroughs, and standardized address fields. This process was essential for making the data more accessible and usable in our project.

Another challenge I faced was managing the varied schedules of the pantries. Some were open on specific days, like Mondays and Fridays, while others operated only on the first and third or second and fourth weeks of the month. To address this, I created binary columns for each day of the week and used regular expressions to map these irregular schedules accurately.

I also set up the database using Supabase and uploaded the datasets. This was a new experience for me, as it was my first time working with a database, but it was a rewarding challenge.

However, what I found most rewarding was the collaboration with my team. From the start, I made it a priority to maintain open and regular communication. Whether it was updating them on data progress, discussing how the backend setup could support our goals, or aligning on how to present the data most effectively, we were constantly in sync. This ensured that everyone was on the same page and that our efforts were complementary rather than overlapping.

In the end, it wasn’t just about the data or the technology—it was about working together to build something meaningful. I’m incredibly proud of what we achieved as a team.

Douglas Rollman
In this project I worked as a front developer. For this project we wanted to incorporate a map to make it easy for users to find resources using our website. I had experience with Node.js and JS before this project but I learned to use React and react-leaflet so I could create a map of Dental, food, health clinics, shelters and CUNY food resources.

For this project we decided to use React to make the page responsive and reactive to user input. Our other front end developer was more experienced with React than I was. Together we reviewed React documentation and he helped me understand the basics of React to propel me forward in this project. I used the React docs and YouTube to get more familiar with React. It was very challenging using a complex framework for the first time but my persistence paid off as I was able to create a great visualization for this project using React and React-leaflet.

Our data specialist, Doug, setup Supabase to give us all the data we needed on each of the resources we wanted to spread awareness of. I read the documentation for Supabase and watched tutorials to become familiar with the code for integrating data from Supabase.

Alongside connecting the database I was working on implementing leaflet.js into our react page. This was critical to our project as we wanted a easy to read visualization of where the resources were located. I found the ideal library for our project, react-leaflet, and began tinkering with the code to create a map that visualized all the data stored in Supabase. I learned to use states and props to manipulate the data into arrays that I could push them as markers into the Map Component. I relied on StackOverflow, react-leaflet documentation and my teammates to render my map.

Thanks to the open discussion with my team we worked quickly and soundly to get all parts of our project working and connected. We used Zoom and Slack to meet through out the three days of the hackathon and used Google Docs to plan out the scope, features and MVP of the product.
I am very proud of what we accomplished as a team. For our first hackathon everyone pushed themselves to learn new things, communicated frequently and showed great character throughout this process. This hackathon provided us a great experience for learning and team collaboration.

Nathan Vazquez
I worked as a front-end developer, and developed the site more broadly. I integrated our food resources as filterable, and highly navigable tiles. Though I have used React before, I was by no means comfortable with it. I learnt a ton about working on this project! Most importantly, I learnt the quirks of React and React data management as a whole and working around it.

Tor Sdayur
Leye-ade