Skip to content
Powering MPH recycling and composting facilities in Bali
Branch: develop
Clone or download
nicksarafa Merge pull request #261 from MPH-Bali/feature/deliveries-and-material…

Feature/deliveries and materials only
Latest commit 5395f72 Nov 2, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
functions extra comma Mar 28, 2018
public capitalize route names Nov 1, 2018
.DS_Store Feature/public (#142) Mar 26, 2018
.firebaserc init (#5) Mar 20, 2018
.gitignore add .firebase to .gitignore (file for tracking deployments) Oct 26, 2018
.travis.yml Set travis to all branches, deploy on master Mar 23, 2018
LICENSE Update Mar 28, 2018
firebase.json Init ci (#29) Mar 23, 2018
firestore.indexes.json init (#5) Mar 20, 2018
storage.rules init (#5) Mar 20, 2018
yarn.lock yarn lock Apr 18, 2018


Powering MPH recycling and composting facilities in Bali.

Access the current deployed app at FirebaseApp


Design Trello Board

UX Whiteboard - RealtimeBoard

Wireframes - Facility Manager

Wireframes - backend super admin

Wireframes - public facing web

Zeplin desings Make sure you are registered and added to the project to view those. If you need adding to the project contact Andrea (sovesove) or Daria (piggydoughnut) or Nick Sarafa (nicksarafa)

How to contribute

Git workflow

Internal team

  • master branch - no one commits to master, master contains the currently deployed code
  • tags - do not forget to tag each version that is deployed from master
  • develop branch - code in development
  • new feature = new branch, add an issues number in the name of the branch
  • pull requests - once done with a feature, submit a pull request, add reviewers
  • tests - make sure to write a test for the piece of functionality you created

External contributions

  • fork the repository
  • create a branch out of develop
  • make your changes and create a Pull Request to the main repository to develop.

If you would like to become a part of our team and be added to the repository, please contact Daria (piggydoughnut) or Nick Sarafa (nicksarafa).

Front End with Vue.js ❤

The frontend can be found in the public directory and was initialised using Vue-CLI and the vuetify/webpack template.


DEV Dependencies

Style guides

Facility Manager - Architecture

The store is implemented using a single Vue instance that is made globably available through $firestore.

We're using firestore realtime data. Therefore all collections will be synced all the time and can be accessed from any component like this: $firestore.COLLECTION_NAME.

The following CRUD actions are available:

  • $firestore.get(COLLCTION_NAME, ID) returns promise with the requested item
  • $firestore.remove(COLLCTION_NAME, ID) deletes requested item, returns promise for success/error
  • $firestore.update(COLLCTION_NAME, DATA) updates parts of object (needs to have DATA.ID)
  • $firestore.add(COLLCTION_NAME, DATA) adds a record and returns promise with created object/error
  • $, DATA) add or updates a record based on if it has DATA.ID

The app is designed to only look at a given day for all the forms and tables. The day can be changed using $firestore.changeDate(DATE).


To use in-app toasts just $emit toast message to the manager component

  • $emit('message', { text: 'delivery saved', type: 'success', ding: true }))

Back End



Firebase Authentication

each user will have a corresponding user in Firebase

Security rules

Cloud Firestore Security rules structure allow you to control access to documents and collections in your database.

Firebase - example data

// All collections and are stored in the firestore
const settingsCollection = {
  name: 'Facility 1',
  village: 'Pererenan',
  importantVillageGuy: {
    id: 'Tu4SFfDhBUgAwGsvfopc', // person id
    name: 'Michael'
  materialTypes: [
      name: 'Plastic',
      pricePerKilo: 2000
      name: 'Metal',
      pricePerKilo: 2000
  expenseType: [
  houseTypes: [
    'public facilities'
  // + other information about the facility that we might need

const personCollection = [
    login: firebaseUserId, // Only for people with a login
    name: 'Test User',
    phone: '+62 123 123 123',
    whatsapp: '+62 123 123 123',
    address: 'Jalan Batu Mejan No. 88, Canggu, Kuta Utara, Kabupaten Badung, Bali 80361',
    email: '',
    geolocation: {
      latitude: '8.39111',
      longitude: '115.07361'
    type: {
      employee: false,
      client: false,
      buyer: true
    role: {
      communityManager: false,
      facilityManager: false,
      superAdmin: true
    houseType: 'villa',
    approved: false,
		lastFeePaid: [Object fee]

const deliveryCollection = [
    timestamp: '2018-03-15T09:55:48.942Z',
    driver: {
      id: 'Tu4SFfDhBUgAwGsvfopc', // person id
      name: 'Michael'
    banjar: {
      id: 'Tu4SFfDhBUgAwGsvfopc',
      name: 'Michael'

const workerHoursCollection = [
    employee: {
      id: 'Tu4SFfDhBUgAwGsvfopc', // person id
      name: 'Michael'
    in: '2018-03-15T09:55:48.942Z',
    out: null

const stockCollection = [
    timestamp: '2018-03-15T09:55:48.942Z',
    materialType: 'plastic',
    amount: 200
const expenseCollection = [
    description: 'Limited Furby Collection',
    amount: 20000000,
    person: {
      id: 'Tu4SFfDhBUgAwGsvfopc',
      name: 'Michael'

const saleCollection = [
    buyer: {
      id: 'Tu4SFfDhBUgAwGsvfopc',
      name: 'Michael'
    materials: [
        materialType: 'plastic',
        kilo: 200,
        pricePerKilo: 20000

const feeCollection = [
    timestamp: '2018-03-15T09:55:48.942Z',
    monthly_fee: 50,
    total_paid: 200,
    paid_until: '2018-07-15T09:55:48.942Z'

const banjarCollection = [
    name: 'Banjar Name',
    pickupTimes: [
        day: 'Monday',
        time: '6am-2pm'
        day: 'Tuesday',
        time: '6am-2pm'

const materialCollection = [
	worker: {
	   id: 'Tu4SFfDhBUgAwGsvfopc',
	   name: 'Worker name'
	banjar: {
	   id: 'Tu4SFfDhBUgAwGsvfopc',
	   name: 'Banjar name'
	organic: 10,
	inorganic: 10,
	timestamp: '2018-03-15T09:55:48.942Z'

User roles

Community manager

  • Community manager works in the village and talks with customers, households, businesses, villas and public facilities. He educates the village and discusses the rule and role of separation, he collects fees, he is on the ground and the ears and eyes of the facility manager.

Facility manager

  • The facility manager works at the facility. He manages the workers, the separation and weighing of delivered waste/materials, the sorting and weighing of plastics, paper and metal. He makes compost, he tracks worker hours

Super admin

  • access to internal statistics, adding new facilities, changing default prices


There are more people in the system but they are not system users (have no login in the system) -

  • workers of the facility - people who sort materials, truck drivers
  • clients - people who buy compost, plastic, etc
  • Customers
    • household - locals
    • villas - bules :)
    • businesses - restaurants, hotels
    • public facilities - schools

Predefined lists of values

  • banjar list
  • material type



  1. Registration

    System users (community manager and facility manager) register using their mobile phone and an OTP sent to them via SMS.

  2. Application to register

    Customers apply to be added to the system, however they do not become system users.

  3. Authentication

    Firebase phone auth

    Phone numbers that end users provide for authentication will be sent and stored by Google to improve our spam and abuse prevention across Google services, including but not limited to Firebase. Developers should ensure they have appropriate end-user consent prior to using the Firebase Authentication phone number sign-in service.

    Users login through OTP. Users will only need to login if they change the device they are using.

Facility (community and facility managers)

  1. Add/edit delivery

    • driver (non system user, person)
    • banjar name(predefined list of values in db)
    • #villas
    • #households
    • #businesses
    • #public facilities
    • comment
  2. Add/edit material

    • worker (non system user, person)
    • inorganic material kg
    • organic material kg
    • banjar name (predefined list of values in db)
  3. Add/edit stock

    • weight kg
    • type of material (predefined list of values in db)
    • comment
  4. Add/edit worker hours

    • name
    • type
    • note
    • morning in/out hours
    • afternoon in/out hours
  5. Add/edit a new buyer

    • name
    • email
    • company
    • sms/call
    • whatsapp
    • address
    • notes
  6. Add/edit a sale

    • buyer name (chosen from existing customers in the database)
    • records with:
      • material name
      • kg
      • price per kg
      • total price
      • final price (can be negotiated to be different than adviced price)
  7. Add/edit an expense

    • type (predefined list of values in db, e.g. fuel, maintenance)
    • cost
    • notes
  8. Add/edit a customer - automatically prefilled from a customer application

    • name
    • type (household, villa, business)
    • email
    • company
    • sms/call
    • whatsapp
    • address
    • notes
  9. Approve customer application (community manager)

    add "approved" flag to the customer detail

  10. Collect the fee from a customer (community manager)

    1. Add a fee collection record

      • date time
      • monthly fee
      • total paid ?
      • paid until
    2. Send a confirmation email to the customer

  11. Add/edit daily note

    • note text
  12. User actions log

Community public page

  1. Submission of a feedback/contact us form

Cloud Functions

  • sending emails - Welcome email, EOD notification
  • daily gathering of data for graphs


  • Delivery - delivery of the collected trash around the village
  • Buyer - anyone who wants to buy the facility products - compost, plastic, etc.
You can’t perform that action at this time.