Can you pull it off? Real-time task assignment with Firebase - Part 1
Tags: firebase, reactnative, reactnativeweb, javascript
Published: 2019-10-11 08:09:24

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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? 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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__?
1. Database for our Team Members & Tasks
2. Distribution of tasks according to specific criteria
3. Ability for our team members to:
      1. Request new task
      2. Finish task
      3. Skip task
      4. Forward task to another team member
4. 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
5. Admin accounts for team leaders

#####__Why have we decided to try pulling it of with Firebase?__
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; First thing first, roll it proudly, and blaze it up then start planning.![Alt text of image](https://static.thenounproject.com/png/171228-200.png)
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
```javascript
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
```javascript
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_)
```javascript
/**
 * @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 <a href="https://github.com/necolas/react-native-web" target="_blank">react-native-web</a> so we decided to while we are testing firebase we will also test that package. Therefore the stack is:
1.  React Native(react-native-web)
2.  Firebase
3.  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 <a href="https://facebook.github.io/react-native/docs/getting-started" target="_blank">initializing a new project</a> with this easy cli command:
```javascript
expo init FirebaseTaskManagementPullItOff
```
After that simply run:
```javascript
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: 
![react-native-web start page](https://thepracticaldev.s3.amazonaws.com/i/mhpucy1mkb4hqambvajy.PNG) - _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 <a href="https://firebase.google.com/">Firebase</a>. 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: ![New Firebase project](https://thepracticaldev.s3.amazonaws.com/i/o28t40lclg036rqb45p9.png)
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: 
```javascript
// 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
```javascript 
yarn add firebase
```

And simply add the code from above into the starting point of your application:
```javascript
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__
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In the next tutorial we will handle how to register and login users with Google / Facebook. Stay tuned... --> <b>Continue to part 2</b> <--