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:
- Request new task
- Finish task
- Skip task
- Forward task to another team member
- Check statistics for each task
- How long has this task been worked on
- How many people worked on this task
- 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 <--
Top comments (0)