Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Vue JS

Vue Vuex Firebase Messaging App (Slack Clone)

Learn Advance Vue JS VueX and Firebase techniques to build Modern Realtime Web Application
Rating: 4.6 out of 54.6 (112 ratings)
13,502 students
Created by Ryan Dhungel
Last updated 1/2021
English
30-Day Money-Back Guarantee

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

11 sections • 59 lectures • 4h 10m total length

  • Preview04:38
  • Preview04:11
  • Preview05: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

  • Save users to database
    05:30
  • Writing custom rules
    03:36
  • Sidebar component
    04:44
  • Popup modal
    05:55

  • 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

  • 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

  • Pull users
    06:53
  • Show users
    01:29
  • Connected status
    05:32
  • Online/Offline status
    06:07
  • What is next/fixes
    04:50

  • 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 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

  • Counting notifications
    05:25
  • Show notifications
    06:14
  • Mixins - code reuse
    02:12
  • Notifications on private channels
    07:38

  • Deploy to firebase hosting
    05:57
  • Post deploy fix - new channel show active
    01:28

  • Source Code
    00:01

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

Instructor

Ryan Dhungel
Web Developer
Ryan Dhungel
  • 4.5 Instructor Rating
  • 14,227 Reviews
  • 188,178 Students
  • 24 Courses

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.

He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.