Can you pull it off? Real-time task assignment with Firebase - Part 1

Bluant Studio — Fri, 11 Oct 2019 08:09:24 +0000

It can become though coordinating tasks for each team member if you have a team of 100+ members.
We at @bluantstudio wanted to tackle this problem and create a solution which can automatically distribute tasks to team members based on their position and skill.

So what are we trying to pull off?

We want to create a system which stores all the needed tasks and authenticates all of our team members, manages the assign of tasks evenly and accordingly to specific members skills and positions.

What do we want?

Database for our Team Members & Tasks
Distribution of tasks according to specific criteria
Ability for our team members to:
1. Request new task
2. Finish task
3. Skip task
4. Forward task to another team member
Check statistics for each task
1. How long has this task been worked on
2. How many people worked on this task
3. And much more
Admin accounts for team leaders

Why have we decided to try pulling it of with Firebase?

Well tbh someone suggested it and we said ok, lets! It offers us cloud database and cloud function + "subscription" - like service which allows us to act on database changes. Sounds good and let's see if we can pull it off.

How do we plan on pulling it off?

First thing first, roll it proudly, and blaze it up then start planning.
We tend to start each project by actually planning what is our database & project structure, which functions are required(Obviously not all of them but the ones that are most important - duh) - still not sure if this is because we are blazed or because we actually like this approach.(we think we like it)

Okay enough of chit-chat let's start:

Database structure

We know for sure we need User and Task object(yes object we are dealing with noSql db). Below are examples which will probably be very different in the end, but this is what we start with.
User - of course we need an object to store data about our team members

const User = {
  _id: '562a0ad89eb77f31392cd5b9',
  fullName: 'Sully "The Pickle" McLeary',
  roles: {
    developer: false,
    superAdmin: true,
    cms: true,
    sales: true,
    marketing: true,
    tariff: false,
    support: true
  },
  active: true
}

Task - each task should also have its own properties

const Task = {
    _id: '562a0ad89eb77f31492cd5b9',
    title: "Avenge raccoon",
    priorityLevel: 1, // 0-1
    assignedTo: "562a0ad89eb77f31392cd5b9",
    inProgress: true,
    startedAt: "2019-08-30T07:08:20Z",
    forRoles: ["raccoonOwner", "superAdmin"]
}

Required functions (or atleast we think they are required)

/**
 * @param forRole - users with multiple roles should be able to select type of task
 */
function getNextTask(adminId: String, forRole: String): Task {
  // Fetches the next task for the user by looking at his roles
  // Should return the current task if the user has not finished it or skipped
}

function finishTask(adminId: String): void {
  // Flags task as finished
  // Add timestamp to task
  // Update admins currentTask to ""
}

function skipTask(adminId: String): Task {
  // Removes admins currentTask field
  // Fetches and returns next task for admin
}

function pauseTask(adminId: String): void {
  // Sets tasks inProgress field to false - stop timer
}

function resumeTask(adminId: String): void {
  // Sets tasks inProgress field to true - start timer
}

function addTask(task: Task): void {
  // Add new task to database
}

function deleteTask(taskId: String): void {
  // Delete task from database
}

Tech stack
We have experience with React and React native but we recently found out about react-native-web so we decided to while we are testing firebase we will also test that package. Therefore the stack is:

React Native(react-native-web)
Firebase
Trello Api - We want to see if it's possible to create trello card and then push that into our database.

Okay now we have basics set and we are ready to start the project.

Setting up our React-native project

We've been using Expo for plenty of our applications in the past so there is nothing stopping us from using it here also.
Start by initializing a new project with this easy cli command:

expo init FirebaseTaskManagementPullItOff

After that simply run:

expo start --web

and navigate to http://localhost:19006/ (That is the default port on which web project is started). You'll notice a very simple screen but it's something:
- also bare in mind that "Web support in Expo is experimental and subject to breaking changes. Do not use this in production yet."

Connect to firebase

We need to setup the project on Firebase. To to this you need to make account and follow the steps to create new project. After that's done you should see something similar to this:
To connect firebase with our app it's logical that we need some kind of config with account data. To get that simply click on whatever icon you want to setup firebase for that platform. After entering few informations about the project you are presented with this:

// Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "YOUR-API-KEY",
    authDomain: "fir-taskmanagement.firebaseapp.com",
    databaseURL: "https://fir-taskmanagement.firebaseio.com",
    projectId: "fir-taskmanagement",
    storageBucket: "",
    messagingSenderId: "1231231234213",
    appId: "YOUR-APP-ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

Next, we need to connect our app with firebase.
First thing first add firebase to your project

yarn add firebase

And simply add the code from above into the starting point of your application:

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import firebase from 'firebase/app';
// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "YOUR-API-KEY",
    authDomain: "fir-taskmanagement.firebaseapp.com",
    databaseURL: "https://fir-taskmanagement.firebaseio.com",
    projectId: "fir-taskmanagement",
    storageBucket: "",
    messagingSenderId: "1231231234213",
    appId: "YOUR-APP-ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig)

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Register users

In the next tutorial we will handle how to register and login users with Google / Facebook. Stay tuned... --> Continue to part 2 <--

DEV Community: Bluant Studio