We were inspired by the social impact challenge and we sought to fix a problem that affects millions of Americans and people around the world. We wanted to increase the accessibility of information to homeless populations especially in large cities.

What it does

Our web application is made to be used on a kiosk, specifically ones in larger cities. For example, in New York City, there are already a variety of kiosks used for directions. The way our web application works is that the user would select whether they are looking for food or shelter to which the kiosk will calculate the closest food banks or homeless shelters and provide directions to the users. Homeless shelters and food banks will also have the option to update their server to show updated availability and times. When designing the web application, we focused on creating simple yet important functions that would help both those seeking assistance and the shelters and food banks offering their services. We also focused on creating a simplistic UI to increase the accessibility of the web application, we aimed on allowing the user to never have to type anything into the kiosk but still being able to use all of our functions. Finally, we decided on creating designs with universal symbols to increase the accessibility to people who do not speak English (or the other three languages we had chosen to translate it into).

How We built it

The front-end of our web application was designed using Figma and Sketch to provide wireframes that allowed us to analyse which functions were most important to us. The front-end was built using HTML/CSS and Javascript to provide a simple yet sleek interface. Some tools used to enhance the front-end was Google Maps Embed API as well as using JSON databases to host the information for the shelters and food banks. The website was hosted on Google Cloud, using a domain from To host our website, we used node.js and express.js to support the backend of the web application.

Challenges We ran into

A challenge we faced was creating the website and hosting it. For most of us, this was our first hackathon and we didn't have a lot of prior experience building a website in only 24 hours. Creating this web application was full of challenges but eventually, we were able to make it fully functional. Another challenge was the backend, none of us had any experience in creating a backend server so we used Google Cloud and node.js tutorial to create the backend. At first, it was difficult connecting the different components but we were soon able to host a fully functional app.

Accomplishments that We're proud of

An accomplishment that we're proud of was the development of the website and creating a solution to a pressing issue.

What We learned

We learned how to use node.js, Google Cloud web services, and gained more insight into how to create a fully functional website with HTML/CSS.

What's next for TheGenerousFoundation

The next step for TheGenerousFoundation would be to create a reservation based system which would allow users to enter their information and have their picture taken in order to reserve their spot at a shelter. We would also like to look into creating a mobile app version, allowing those without access to a kiosk to still be able to check the directory based on their location.

Share this project: