Helping Hands

Project for SparkHacks Hackathon

Team Bonkers

Adam Beigel, Adrian Velazquez, Christian Sanchez, Manh Phan

How to run it:

• ** Must have Node.JS Installed in your system **

• clone git repo

• npm install

• npm run dev

Inspiration

Given there are many unfortunate individuals in Chicago that do not have access to basic human needs such as food, water, shelter, internet, etc., we took it upon ourselves to create a free web application that they can use in order to find helpful resources. Chicago is a huge city and finding what you are looking for can be very difficult for those who do not know the area or need a refresher. This website allows those users to find where and what the closest resource buildings are based on their location by using an interactive map.

What it does

Our website implements an interactive map using the OpenStreetMaps and Leaflet API that finds resources near the user as well as relevant information about it (hours, location, etc). We used public datasets provided by the city of Chicago in order to populate the data on the OpenStreetMaps API. The map can be filtered out by the user to just find specific buildings near them by clicking one of the several button tabs we have at the top of the page which are : Home, Workforce Center, Food Banks, Shelter, Hot and Cold weather shelters, Community Centers, and Health centers.

We chose using react js as the best tool for the job, because the homeless community does not have easy access to a desktop application, but phones can easily reach a website and the generation of the device does not matter as much.

How we built it

First, our team spent several hours brainstorming ideas that align with the theme of the hackathon. We then drew out the framework of our website to get a visual idea on how our website is going to look and perform.

Next we got to work on implementing the smaller easier portion of the website first then moving towards the bigger, more advanced elements. We used a mix of HTML, CSS, JavaScript, React, Python, and leaflet API to add the functionality we needed to the web application.

Challenges we ran into

We had challenges with learning and using React and Javascript on the fly via documentation, the bootcamp, and examples since we had not used this technology prior to this project. Another challenge we ran into was debugging issues where data was not loaded correctly and aspects of our interface did not function as expected.

Accomplishments that we're proud of

We are proud of implementing an interactive map that displays a zoomed-area of Chicago near the user. We are also proud of the fact that we implemented a filter system that only chooses specific data to display based on the user's need. Ultimately we are proud that after learning how to use React for the first time, and staying awake until 2am, we were able to create a web application using large amounts of publicly available datasets.

What we learned

Learning languages on the fly as well as implementing them is very difficult and confusing as the more you look into it, the more lost you become. We also learned that front-end development is a time-consuming task and nowhere near as straight-forward as we thought it was.

What's next for Helping Hands

We believe that this website holds incredible potential to scale into a larger project. Whether it be done by asking shelters and organizations to share their information that can be displayed on the app, or by looking through larger datasets that can be applied to many cities across the country.