About This Project

 

Food waste is an issue pervasive to urban and rural environments alike. In the United States alone, food waste accounts for an estimated 30-40% of food supply. PCNK provides a simple, user-facing tool for those with extra food to give it away to someone from a known personal network, whether a coworker or friend. Users can take a photo of the food they want to give away and upload it to PCNK with a brief description. Users with access to the uploaded item may view it in their "pantry," which displays food currently available to claim.

Key Features

Users can:

  • Upload images of food to share
  • Claim food they see in a scrollable "pantry"
  • Grant specific groups access to foods they upload

Technology Stack

  • React Native
  • Google Firebase

Open Source Projects Used

  • React Native Firebase
  • RN Camera
  • React Native Navigation
  • Teaset React Native UI Components

Code Snippets and Features

Native Camera Integration with Firebase Realtime Database and Cloud Storage

One of the main features of the app is to upload pictures of food to the app database so that other users can claim that food. To achieve this, I used the RN Camera open-source project and React Native Firebase project to automatically upload the food details to the Firebase database and images to Firebase cloud storage.

createFoodItem() {
    const ref = firebase.database().ref("foods");
    const {img} = this.props;
    ref.push({imgURL: img, text: this.state.text, value: this.state.value,
      sliderval: this.state.sliderval, category: this.state.category})
      .then(function () {
        return ref.once("value");
      }).then(function (snapshot) {
        console.log(snapshot.val()); // test
      });
  }

  setPhotoName(image) {
    let slicedImageName = image.substring(image.length - 6, image.length);
    let newName = (Date.now() + parseInt(slicedImageName)).toString();
    return newName;
  }

  getSelectedImages() {
    const metadata = {
      contentType: 'image/jpeg'
    };
    let photoName = this.setPhotoName(`${this.props.img}`);
    firebase.storage().ref('foodImages').child(photoName).putFile(this.props.img,
    metadata)
    .then(function (uploadedFile) {
      console.log(uploadedFile);
    })
    .catch(function (error) {
      console.log(error);
  });
}

Screenshots