Pantry Share provides a platform where users can find information on where they can access food and enables those with excess resources to share with others in a simple and convenient way. Users seeking resources will see a list of food banks and a map corresponding to the locations. Users will also see data generated by other users and have the opportunity to claim food. Users with excess resources can make new food posts.
- Google Maps API - to generate a map on our website
- Google Geocode API - to translate address data to lat and long and place markers on map
- Firebase Database - to store user generated data
- uikit - for styles and elements on the page
- JQuery - to build a responsive site and create HTML elements
- HTML - to create elements
- CSS - to style elements beyond uikit
- GIT - version control system to track changes to source code
- GitHUB - hosts repository that can be deployed in GitHUB pages
Our website relies on google maps to show map data to our users. This was a key functionality identified in the ideation process.
function initMap() {
console.log("you made it");
// set initial orientation and magnification of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
});
// put the geocoder function into memory
var geocoder = new google.maps.Geocoder();
geocodeAddress(geocoder, map);
// get addresses from foodpantries object and add them to the map
function geocodeAddress(geocoder, resultsMap) {
for (let i = 1; i < foodpantries.length; i++) {
address = foodpantries[i].address
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
}
In order to allow users to generate data, we needed a place to store it. We used the firebase database to be able to store our data anytime a user provided a new submission with the following event listener and call to the WriteUserData function.
$("#post-food-button").on("click", function (event) {
event.preventDefault();
zipcode = $("#food-zip").val().trim();
name = $("#food-name").val().trim();
if (name === "") {
name = "anonymous neighbor";
}
address = $("#food-address").val().trim();
description = $("#food-desc").val().trim();
claimed = false;
state = "CA";
// date stamp time
hours = "not applicable";
if (checkZipcodeNum(zipcode) == false || zipcode.length != 5) {
$("#zip-warning").text("zipcode is invalid. please update and resubmit form");
}
else {
$("#warning").empty()
writeUserData(name, state, address, zipcode, description, claimed, hours);
$("form").css("display", "none")
}
});
// saves data to the firebase
var pathStr = "";
function writeUserData(name, state, address, zipcode, description, claimed, hours) {
database.ref("resources/food/" + state).push({
name: name,
address: address,
zipcode: zipcode,
description: description,
claimed: claimed,
hours: hours
}
);
}
Stephon Autery
Dan Fellows
Ana Medrano