IPL Voting APP With VUE JS

IPL With Vue JS

We all know that IPL season is here, its amazing to watch our favorite players from all around the world pair up in teams and battle against each other towards one common goal — winning!.

This IPL, I wondered why not do something interesting with Vue JS, so while wondering what to do, I thought why not create a Vue App where we can vote for our favorite teams and also vote for the teams playing on that particular day!.

And this is what we are going to build in this series — IPL AND VUE JS

Setting Up the Project

As usual, we need to go through certain steps to set up the project. One of them is creating a new Vue Project using VUE CLI. Since I've already covered this, you can follow the article below to set that up and come back. Don’t worry its a short one. 😉

Vue From The TOP — Vue CLI 3

Alright!, welcome back. Now that we have our Vue Project Set up, let's move forward to set up Firebase. For this project, we will be using FireStore as our backend to store the data.

To get started, you can go to the Firebase Console and start off by creating a new Firebase project. You can name your project anything you like. BTW I named mine IPLwithVue.

Once the project is created, we can add Firebase to our Vue project. To do that follow the next couple of steps.

Step 1

Copy the config object from the firebase project OverView.

Firebase Project OverView

Click on the 3rd option, besides IOS and Android, and you will get your config object.

It will look something like this.

apiKey: "xxxxxxx",
authDomain: "xxxxxx",
databaseURL: "xxxxxxx",
projectId: "xxxxxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxxx"

Copy that object, go to main.js in our project and import firebase

import firebase from 'firebase'

Now, let's initialize firebase by saying —

firebase.initializeApp({
    apiKey: "xxxxxxx",
    authDomain: "xxxxxx",
    databaseURL: "xxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxxx"
})

Sweet!. Now we have added and initialized firebase onto our app.

Now let's look at the existing Data. For ease, I have created two JSON files, containing all the matches list and all the teams' list.

You can take a look at these two files in the GitHub repository.

chsvk/IPLWithVue

The files are listed under src/Data/{fileName}.json

Now we need to send these objects onto our FireStore database since this is a very small dataset, we can do that semi-automatically.

Inside our App.vue we can write the following code in the created LifeCycle Hook.

PLUG

Check out My Vue JS Fundamentals Course for Beginners on Cynohub

https://cynohub.com/courses/vue-js-fundamentals-course/

Before we add any data to FireStore, let's import the JSON files into App.vue.

import Matches from '@/Data/Matches'
import Teams from "@/Data/Team"

First, let’s add all the Teams data onto Firestore. Since the Teams file is an Array, and inside that each individual team is an object. We can store them in our database with a custom document ID.

{        
    "name": "Chennai Super Kings",
    "shortCut": "CSK",        
    "voteCount": 0,       
    "colorCode" : "#FFFF3C" 
},

This is how a Team Object looks like, these are the parameters that are involved. So I’m going to select the ‘shortCut’ property as the document ID for our team data.

Alright, let's send some data to 🔥 Store.

Once again, import Firebase inside our App.vue

import firebase from 'firebase'

This above code will send all the teams data to FireStore.

Now it’s time to send the Matches Data.

Since each match data is unique and there several of them, let’s have the document ID’s auto-generated.

The above code will send all the matches data to FireStore.

The key difference between these two sets of codes is ‘set’ and ‘add’ methods.

If we use ‘set’, firestore sets the ID as we give it, and if we use ‘add’, firestore automatically generates a random ID.

Great!. Now we have finished adding Data to 🔥 Store.

In the next post, let’s look into how to fetch that data and add a Voting System.

Check out The finished Project —

iplwithvue

Let me know which Team you Voted for in the comments Below! 😁

If you enjoyed this article, check out My Vue JS Fundamentals Course for Beginners on Cynohub

https://cynohub.com/courses/vue-js-fundamentals-course/