Powering MPH recycling and composting facilities in Bali.
Access the current deployed app at FirebaseApp
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)
- 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
- 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.
- Vue.js - Frontend Framework
- Vueifiy - UI Components Framework
- Vue-router - Routing
- Vue-i18n - Internalization
- Vue-chartjs - Charts and Graphs
- Vue-moment - Helper library for Dates
- Firebasse SDK - Firebase connector
- Firebase-Tools - Deployment
- Prettier - Code Formatting
- ESLint - Linting using standard conf
- Jest - Testing
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
- $firestore.save(COLLCTION_NAME, 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 }))
each user will have a corresponding user in Firebase
-
OTP using SMS, Firebase phone auth
-
State management: Vuex
UI Components Framework: Vueifiy
Routing: Vue-router
Internalization: Vue-i18n
Form validation: Vuelidate
Firebase integration: Vuefire
Initial build setup: Vue-CLI
Cloud Firestore Security rules structure allow you to control access to documents and collections in your database.
// 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: [
'maintenance',
'other'
],
houseTypes: [
'villa',
'household',
'business',
'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: '[email protected]',
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'
}
]- 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.
- 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
- 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
- banjar list
- material type
-
Registration
System users (community manager and facility manager) register using their mobile phone and an OTP sent to them via SMS.
-
Application to register
Customers apply to be added to the system, however they do not become system users.
-
Authentication
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.
-
Add/edit delivery
- driver (non system user, person)
- banjar name(predefined list of values in db)
- #villas
- #households
- #businesses
- #public facilities
- comment
-
Add/edit material
- worker (non system user, person)
- inorganic material kg
- organic material kg
- banjar name (predefined list of values in db)
-
Add/edit stock
- weight kg
- type of material (predefined list of values in db)
- comment
-
Add/edit worker hours
- name
- type
- note
- morning in/out hours
- afternoon in/out hours
-
Add/edit a new buyer
- name
- company
- sms/call
- address
- notes
-
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)
-
Add/edit an expense
- type (predefined list of values in db, e.g. fuel, maintenance)
- cost
- notes
-
Add/edit a customer - automatically prefilled from a customer application
- name
- type (household, villa, business)
- company
- sms/call
- address
- notes
-
Approve customer application (community manager)
add "approved" flag to the customer detail
-
Collect the fee from a customer (community manager)
-
Add a fee collection record
- date time
- monthly fee
- total paid ?
- paid until
-
Send a confirmation email to the customer
-
-
Add/edit daily note
- note text
-
User actions log
- Submission of a feedback/contact us form
- 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent