Inspiration:

Our team has adjusted to the COVID-19 environment pretty well, however many others are not as fortunate as us. Employment issues, health issues, money issues, and food shortages have caused a substantial amount of Americans to be unable to afford basic necessities such as food. It was hard for us to watch all these people struggle, so we decided to do something about it.

Thus, we created Foober. COVID-19 Pandemic has caused millions to lose their jobs, and many cannot pay for food anymore. Watching food banks run out of food constantly on the news got us thinking what we could do to. We decided to create a website which people can donate and receive food and other necessities.

What it does:

Through Foober, users can make postings of necessities and foods they are willing to donate, they can then set a location on the map as a meeting place. Those in need can see these postings on the website's map and meet up with the donators to receive the items. A person in need can click on a marker created by a donator, and the person in need can get into contact with the donator, and they can meet up at the address given, and the food can be donated.

How We built it:

The Foober website was built using Javascript, HTML, CSS, and the Google Maps API. We used HTML, CSS, and JS to write the code for the website and its animations. We used JS and the Google Maps API to create our donation map which has the postings. The JS scripts take the user input, and create a marker on the map with the information given.

Challenges We ran into:

Our team struggled with getting the forms on the website to create postings on the map. We had all never used the Google Maps API before so learning it together really helped us bond as a team. To start off we originally did not realize we needed latitude and longitude to make a marker in the google maps. We tried converting an address to lat and long coordinates, however we were unsuccessful in our attempts. We decided to have a link in the form to a website which will convert ones address to lat and long, and have the user input their results. Another issue we faced concerned getting the user inputs and creating the marker. We faced many issues with variables being considered null, however it took us a while to fix this issue. Eventually, we were able to get the user input and create a marker. It took many long debugging sessions until we were able to fix all of the issues with our code and get it to run properly.

What we learned:

We learned quite a lot about HTML and CSS, as there was quite a bit of code in these formats. This was also our first time working with JS and animations, and we thought we did a pretty good job. On top of this, we also learned how to use the Google Maps API integrated with user inputs. We were able to make a very nice looking site with the works of a working maps api which takes user input and creates a marker with information given by the user.

What's next for Foober:

Foober can easily be formed into a public website suited for the real world. We plan on adding a better looking marker for donation posts, and then hosting it on servers, so anyone can use it. To do this we would also need to implement a database, something which we look forward to doing.

Share this project:

Updates