Kanban application with Vue and Firebase

Creating Simple Kanban Application with Vue and Firebase

Before we create an application we should know what tools we want to build the application with. For a kanban collaboration application we need a fast application with a reliable database. Of course when we want to collaborate we need a real time database for the application that is why we use Firebase as our database. For the client side we will use Vue JS. To deploy it we will use Firebase Hosting Service too.

What is Vue.JS?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

What is Firebase Real Time Database?

It is service that provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud.

The Steps:

1. Preparing Vue Application

In building the application we will use Vue CLI to make the development faster. To install Vue CLI you can type this in your terminal :

npm install -g @vue/cli# ORyarn global add @vue/cli

After finish installing Vue CLI we can now create an application by typing :

$ vue create 

You can use any name you want for your application and I will just call mine kanban-firebase. We need to set up some things when we first create the project. This is my configuration for the application :

Vue JS Configuration

It may take a while to create the application and when it is finished it will show this on your terminal. (I am using yarn not npm here)

Don’t forget to install firebase on your project :

cd kanban-firebase
yarn add firebase
or
npm install --save firebase

Finished Creating The Application

Congratulations you have yourself a Vue application by running

yarn serve
or
npm run serve

Vue JS Template on localhost:8080

Congratulations you have yourself a Vue application by running

2. Preparing Firebase Database

The second thing we need to set up is our real time database from Firebase. Go to https://console.firebase.google.com/ and create a new project.

After finish initializing your application go to database and choose real time database. And choose start in test mode. Then go to your dashboard and click on the web. Copy everything and put the config on your src/assets/config.js.

(don’t forget to put this config in your .gitignore file)

Congratulations you have your Firebase Real Time Database running now.

3. Preparing Vue Components

Next thing we should do is to structure the list of components we needed so that the component is reusable. I will make 3 components in total and 1 view components to show the application. The components will be : the content card, the kanban card, and the main header for the application and the view component is just home.

My file structureLeft : Kanban Card , Right : Content Card

4. Get Data From Firebase

The next thing to do is get data from firebase. There are 2 ways to get you data from firebase, you can listen once or you can listen the data as the data change. Because we want real time database we will use the .on() method from firebase to get data and I will put the data on Home.vue.

The first thing I do here is to create an initial array to group the task on their type. I put in on taskData as an array of object. You don’t have to get the data every time you render the component because it will automatically change as you add more data to the database because we use .on(). If you want to get the data only one time and does not listen to the changes you can use .once().

var leadsRef = database.ref('/')
leadsRef.on('value', function(snapshot){

//your callback function here
})

When you get the data from firebase you can’t read the data straight forward because it will not be in form of a normal object that you want to process. To get the data that is processable on your firebase database you should use .val() at the end of it. To loop the snapshot from firebase I use .forEach method from javascript.

//snapshot is an array of object
snapshot.forEach(function(childSnapshot){
childSnapshot.val() //to get value from it

//the rest of the function
}

5. Render KanbanCard Component

The next thing is to render KanbanCard component. I have 4 items in the taskList so with v-for it will render 4 KanbanCard with title : Pre-Log, To-Do, On-Going and Finished.

<KanbanCard v-for="(data,index) in taskLists" :key="index" :data="data"></KanbanCard>

With this line of code here we will loop the taskLists array and give props to the KanbanCard the data inside taskLists array.

So the props inside each KanbanCard will look like this :

{
name: 'Pre-Log',
tasks: [
{
status : 'Pre-Log',
title : 'test'

}]
},

Each KanbanCard component will have every tasks with the type that is similar to them.

The Schema of The Database

6. Render ContentCard Component

Inside Each KanbanCard we will render the ContentCard component which hold every task that we add.

<ContentCard v-for="(item) in data.tasks" :key="item.id" :item="item" :name="data.name"></ContentCard>

Because we give props to the KanbanCard as a name of data. We will loop the data.tasks which is an array of object inside each props.

After you render each data it will look like this :

KanbanCard with ContentCard inside of it

and now how do we make the button in each ContentCard? In this case I will use the created lifecycle on Vue Component. Each component has the data(state) buttonOne and buttonTwo. Before it is created the state will change according to what we set below.

created () {
if (this.name === 'Pre-Log') {
this.buttonOne = 'To-Do'
this.buttonTwo = null
}
else if (this.name === 'To-Do') {
this.buttonOne = 'Pre-Log'
this.buttonTwo = 'On-Going'
}
else if (this.name === 'On-Going') {
this.buttonOne = 'Finished'
this.buttonTwo = 'To-Do'
}
else if (this.name === 'Finished') {
this.buttonOne = 'On-Going'
this.buttonTwo = null
}
}

In this step before the component is created it will check the name of the KanbanCard and will generate a button with a name that suits the KanbanCard. We also set a different method for each button. Basically the button will update the status of the task that we have.

actionOne () {
database.ref(`/${this.item.id}`).remove()      database.ref('/').push({
title: this.item.title,
status: this.buttonOne
})
},    

actionTwo () {
database.ref(`/${this.item.id}`).remove()      database.ref('/').push({
title: this.item.title,
status: this.buttonTwo
})
},    

removeItem () {
database.ref(`/${this.item.id}`).remove()
}

actionOne and actionTwo is the same. The main function of this two button is delete the task and create a new task with new status on it. For example :

Before pressing the button :

title : 'test',
status : 'Pre-Log'

After pressing the button :

title : 'test'
status : 'To-Do'

The third button that will always be rendered is the delete button. The delete button will delete the task permanently from the database.

7. Create New Task

Creating new task will be done in the MainHeader Component. Because Vue has two way binding we basically don’t need

the sendItem method will send data to firebase database and create new task with the input we enter. Each new task that we enter will automatically go to Pre-Log.

sendItem () {
database.ref('/').push({
 title: this.taskName,
 status: 'Pre-Log'
})
this.taskName = ''
}

after we create the task we want to empty the input box so what we do is by setting the taskName state into an empty string.

Congratulation you just finished the application!

Here is the live application and the Github repository :

Kanban Firebase
_Vue Firebase Application_kanban-74e11.firebaseapp.comjulianjca/kanban-vue-firebase
_Contribute to julianjca/kanban-vue-firebase development by creating an account on GitHub._github.com

If you have any questions leave it on the comment section down below!

Follow me on instagram to see my journey as a web developer!

Julian Christian Anderson (@juliancanderson) * Instagram photos and videos
_5,129 Followers, 879 Following, 117 Posts - See Instagram photos and videos from Julian Christian Anderson…_instagram.com