Development
Web Development
Vue JS
Vue Vuex Firebase Messaging App (Slack Clone)
4.5 (79 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
707 students enrolled

Vue Vuex Firebase Messaging App (Slack Clone)

Learn Advance Vue JS VueX and Firebase techniques to build Modern Realtime Web Application
4.5 (79 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
707 students enrolled
Created by Ryan Dhungel
Last updated 12/2019
English
Preview this course
Vue Vuex Firebase Messaging App (Slack Clone)
Current price: $12.99 Original price: $19.99 Discount: 35% off
8 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Intermediate level Vue Js
  • Learn to use Vuex in Vue Js Project
  • Build Slack Clone
  • Build Advance Realtime Messaging App
  • Intermediate level Firebase Realtime Database Usage
  • Social Login with Google
  • Social Login with Twitter
  • Securing Routes
  • Custom Firebase Database Rules
  • Public Channels
  • Private Channels - One to one user based chat
  • User online/offline status
  • Notifications
  • File upload
  • Deploy to firebase hosting
Course content
Expand all 63 lectures 04:21:54
+ – Authentication
14 lectures 01:01:35
Course Introduction
Preview 04:38
Project setup
Preview 04:11
Files and folder structure
Preview 05:07
Creating pages
02:21
Setup login page with bootstrap
04:13
Firebase setup
04:34
Login with google
06:29
Vuex state
05:15
Dispatching an action
04:31
Error handling during authentication
04:44
Login with twitter
03:54
Handling auth state change
03:59
Securing routes
02:57
Implementing logout
04:42
+ – Application structure
4 lectures 19:45
Save users to database
05:30
Writing custom rules
03:36
Sidebar component
04:44
Popup modal
05:55
+ – Channels
5 lectures 20:07
Create a new channel
06:37
Rules for creating channel
02:22
Rendering channels
04:37
Set current channel
03:18
Show active channel
03:13
+ – Messaging
7 lectures 29:16
Messages component
03:36
Messaging form
03:29
Pushing messages to firebase
07:14
Custom rules for messages
04:14
Getting messages
05:13
Showing messages
02:48
Data filter and self message styling
02:42
+ – Users
5 lectures 24:51
Pull users
06:53
Show users
01:29
Connected status
05:32
Online/Offline status
06:07
What is next/fixes
04:50
+ – Private messaging
6 lectures 27:20
Creating private channel
04:34
Set private channel
06:57
Push messages to private channel
04:26
Custom rules for private messaging
04:50
Listening to events on/off
04:53
Show channel name
01:40
+ – File upload
10 lectures 38:24
File upload modal
04:17
File upload getting path
05:17
File upload progress bar
02:37
Firebase storage custom rules
04:23
Upload state
02:43
Upload file reset form
02:13
Create message with or without image
05:58
Message with content or image rules
06:50
Render images
02:26
Disable button while uploading
01:40
+ – Notifications
4 lectures 21:29
Counting notifications
05:25
Show notifications
06:14
Mixins - code reuse
02:12
Notifications on private channels
07:38
+ – Deploy to firebase
2 lectures 07:25
Deploy to firebase hosting
05:57
Post deploy fix - new channel show active
01:28
Requirements
  • Basic knowledge of Vue JS
Description

Welcome to build Modern Realtime Web App with Vue.js VueX and Firebase Realtime database.

TECHNOLOGY STACK:

  • We will be using Vue js, a progressive javascript framework.

  • We will use Vuex to manage the data for our application in one centralized place. 

  • We will be using Firebase which is a real time database by google. 

  • We will be using Bootstrap4 for styling.

Firebase is popular backend service that makes authentication and data storage easy. And it all happens in real time!

The application you will learn to build in this course, will be an Advance Messaging App, a slack clone. 


In this application, users will be able to communicate with each other in a group environment where they will all be inside a channel.

There will also be a feature where one user will communicate with another user in one on one basis and this will be private messaging.


By the end of this course, you will be much comfortable to work with firebase and obviously vue js and vuex.

The skills you will learn from this course is applicable to the real world, so you can go ahead and build similar app or build something different. no matter what, the concepts you will learn in this course will be extremely very helpful to you.


COURSE HIGHLIGHTS:


Authentication with Google and Twitter

Easy integration of VueX with Vue.js

Flexible firebase realtime database

Channels and Private messaging

Image Upload

Application scalability

Writing custom database rules

Users online/offline status

Notification

and much more :)


So... are you ready for the adventure??

Who this course is for:
  • Someone with basic knowledge of Vue JS who wants to build Advance Realtime Web Apps with Firebase