I'm happy to get you started through Google Hangouts - reach me on Facebook or email
Fullstack:
- Offline push notifications (Progressive Web Application)
- Responsive UI
- Speed optimizations
Specialist:
The core features are the interactive whiteboard and the chain reaction system. They are rabbit holes all by themselves
-
Whiteboard:
- Realtime and collaborative
- Doodles can saved with a click and re-used in explanations
- All doodles are rendered stroke by stroke (quickly though) to preserve the thought process behind the drawings
- Support commonly used standard diagrams (e.g. binary trees for Intro to Algorithms) to reduce time spent drawing
-
- A system to match students in real life
- A system to match initiate and manage the chain reaction
- A graphical interface to keep track of the growing complexity of the chain reaction
Current active sprints are tracked in Gitlab
The only folder you need to know about is the "src" folder. Do not be distracted by other folders.
Here's what happens when the website runs (if the scripts were unminified and unuglified):
- index.html runs on Chrome - it imports main.js in its script tag.
- main.js imports global dependencies and renders App.vue.
- App.vue contains a navbar and a router-view component
- router-view magically loads different components depending on the URL according to the code in router.js
Components are defined in '.vue' files. There are three types of components:
- View components are the 'pages'/root components rendered at each URL.
- Base components are typically 'buttons' and 'cards' used throughout the app
- Normal components where the fun is...
A component does 3 things normally.
- It fetches data from Firestore and binds them to variables
- look out for
this.$bind...
in themounted ()
hook
mounted () {
// save data to the 'question' variable
this.$bind('question', db.collection('questions').where('questionID', '==', this.$route.path))
.then(doc => this.loading = false)
.catch(error => console.log(error))
}
- It renders the data using reusable UI components
// iteratively rendering reusable components is incredibly powerful
<template v-for="question in questions">
<base-card>{{ question.content }}</base-card>
</template>
- When users click buttons and check boxes, things happen. Those things are defined as methods:
// notice the enterChat(f) and ignore everything else
<a @click="enterChat(f)" class="secondary-content btn-floating pulse pink">
<i class="material-icons white-text">email</i>
</a>
enterChat(f)
is defined underneath in the '<script>' section:
methods: {
async enterChat ({ uid, finished, displayName, chainReactionCreatorUID }) {
// cannot chat with yourself
if (this.user.uid == uid) {
return
}
// more code
On Firestore, we have five collections - 'questions', 'users', 'chatRooms', 'subjects' and 'whiteboards'. Those documents point towards each other through references (e.g. a 'question' document can point to a particular 'user' document if it has a user 'uid' field.
Each 'question' document has a field 'questionID' which is in the format 'subject_number/pset_number/question_number' e.g. 6.006/1/2 and is, by definition, unique.