Muster

Social-oriented inventory managing application. Users can organize items, assign locations to items, categorize items, and create collections. This app also allows users to trade their items with each other. Users can loan items, purchase items, and exchange items. User may search for specific items by location.

Features

collection - organize items under your collections
category - collections can be organized by category and shared among all users (allow other users to search for items by category)
search - when the user searches for items, it will show the location on a map
manage items - allows user to change category, collection, and location with drag and drop functionality
trade - user can trade items with each other. Trading has three options. loan, exchange, and purchase
like - users can like a certain collection, liked collections will show on a profile page
follow - users can follow other users, it will show on profile page
chat - users can chat with other users they are following, multiple users can be in one chat room

Demo

Code Example

fetching data

getItemData() {
    let collectionId = this.props.match.params.collectionId.slice(1);
    new Promise((resolve, reject) => {
      collection.child(collectionId).on('value', (snap) => {
        return resolve(snap.val())
      })
    })
    .then((collectionObj) => {
      this.setState({collectionName: collectionObj.name})
      if (collectionObj.itemId) {
        return Object.keys(collectionObj.itemId);
      } else {
        this.setState({items: []})
      }
    })
    .then((itemIdArr) => {
      var arr = [];
      itemIdArr.forEach(id => {
        var tempPromise = new Promise((resolve, reject) => {
          item.child(id).on('value', function(snap) {
            resolve([id, snap.val()])
          })
        })
        arr.push(tempPromise);
      })
      return Promise.all(arr);
    })
    .catch((error) => {
      console.log('no item in collection')
    })
    .then((itemArr) => {
      let userId = itemArr[0][1]['uid'];
      this.setState({userId: userId})
      users.child(userId).on('value', (snap) => {
        this.setState({userInfo: snap.val()})
      })
      return itemArr
    })
    .then(data => {
      if (data[0] !== null && data[1]!== null){
        this.setState({items: data})
      }
    })
  }

drag and drop functionality

dragulaDecorator(componentBackingInstance){
    let option = {
      isContainer: function (el) {
        return false; // only elements in drake.containers will be taken into account 
      },
      copy: false
    };

    if(componentBackingInstance) {
      let drake = Dragula(componentBackingInstance, option)
      .on('drop', (el, target, source) => {
        let clickedEl = el.className.split(' ')[0];
        let targetId = target.className.split(' ')[0];
        let sourceId = source.className.split(' ')[0];
        let collectionName = this.props.collectionList[clickedEl]['name'];
        
        collection.child(clickedEl).child('categoryId').set(targetId)
        
        let updates = {};
        
        updates['/category/' + targetId + '/collectionId/' + clickedEl] = collectionName;
        firebase.database().ref().update(updates);
        category.child(sourceId).child('collectionId').child(clickedEl).remove()
      })
    }
  };

Running Locally

in terminal

1. npm install
2. firebase serve -p 5000 -o 127.0.0.1

now go to http://localhost:5000/

Tech Stack

Javascript
React
Firebase
Algolia
React Router
Dragula
Stripe

Authors

Sohee Lim
Seamus Martin
Yusaky Kasahara
Christine Ma

License

This project is licensed under the MIT License

limsohee1002 / Muster