Build Web Apps with Vue JS 2 & Firebase

Build Web Apps with Vue JS 2 & Firebase
Build Web Apps with Vue JS 2 & Firebase
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 11.5 Hours | 4.56 GB

Learn Vue JS & Firebase by creating & deploying dynamic web apps (including Authentication).

If you’re looking to get started building full-stack applications with Vue JS and Firebase, then look no further. In this course I’ll take you from novice to ninja in Vue JS, starting out with the very basics of VueJS and then moving on towards creating fully-fledged VueJS applications.

We’ll spend a whole chapter learning about the Vue Router – and how to create SPA’s (single page applications) using it – as well as exploring how to use the Vue CLI to get up and running quickly when creating Vue applications.

I’ll also teach you how to use Firebase, an online, free service provided by Google which acts as a very feature-rich, fully-fledged back-end to our applications. We’ll learn how to use Firebase to store and retrieve data to and from a NoSQL database called Firestore, as well as authenticate our app’s users with the Firebase Auth service, We’ll also take a peak at Firebase Cloud Functions (which allow us to run server-side JavaScript code in a Node.js environment), as well as deploying all of our applications to Firebase hosting.

There’s a crazy amount to cover, but by the end of this course you’ll be in a position to create full-stack web applications (complete with user authentication) using Vue JS and Firebase!

What you’ll learn

  • Get in-depth knowledge of Vue JS & Firebase from the ground up
  • Build & deploy 3 real-world web apps with Vue JS & Firebase
  • Learn about & implement Firebase authentication into Vue JS web apps
  • Use other Firebase services such as a Firestore database, Cloud Functions & Hosting
Table of Contents

1 Introduction
2 Course Files
3 Text Editor Setup

Vue.js Basics
4 What is Vue.js
5 Modifiers
6 Conditional Output with v-if
7 Looping with v-for
8 Setting up Vue.js (the simple way)
9 The Vue Instance
10 Methods
11 Data Binding
12 Events
13 The Event Object
14 Keyboard Events
15 Two-way Data Binding (v-model)

The Vue CLI
16 The Vue CLI
17 Filters
18 Computed Properties (custom search box)
19 Components & Vue Files
20 The data() Function
21 Nesting Components
22 Scoped CSS
23 Passing Data with Props
24 Custom Events
25 Life-cycle Hooks
26 Making Requests with Axios

The Vue Router
27 What is the Vue Router
28 Setting up Routes
29 Router Links
30 Route Parameters
31 Watching the $route Object
32 More on Router Links
33 Programmatically Redirecting Users
34 Hash vs History Mode
35 Styling Active Links

Project One – Ninja Smoothies
36 Project Preview & Setup
37 Retrieving Firestore Data
38 Deleting Firestore Data
39 Add Smoothie Component
40 Adding Ingredients
41 Outputting Ingredients
42 Saving Records to Firestore
43 Deleting Ingredients
44 Edit Smoothie Route
45 Firestore Queries
46 Edit Smoothie Form
47 Project Structure
48 Updating Firestore Records
49 Deploying to Firebase
50 Project Review
51 Material Design
52 Navbar Component
53 Index Component
54 Deleting (local) Data
55 Introduction to Firebase
56 Setting up Firestore
57 Installing Firebase

Project Two – Real-Time Chat App
58 Project Overview & Setup
59 Real-Time Events (event listeners)
60 Formatting Times with Moment
61 Auto-scrolling
62 Deploying the App
63 Project Review
64 Project Structure
65 Firestore Setup
66 Making a Welcome Screen
67 Passing Props Via Routes
68 Route Guards
69 Creating the Chat Window
70 New Message Component
71 Adding Messages to Firestore

Project Three – Geo Ninjas
72 Project Overview & Setup
73 Checking if an Alias exists
74 Signing up a User
75 Creating Firestore User Records
76 Wrapping the Vue Instance
77 Logging a User Out
78 Login Component
79 Logging Users In
80 Geolocation API
81 Updating a User’s Location
82 Route Guarding (auth)
83 Project Structure
84 Conditional Navbar Links
85 Ninja (map) Markers
86 User Profiles
87 User Comments (data discussion)
88 Adding Comments
89 Showing Comments (Real-Time)
90 Some Final Styles
91 Deploying the app
92 Setting up Firebase
93 Navbar Component
94 Map Component
95 Google Maps API
96 Creating a New Map
97 Creating a Signup Page
98 Firebase Auth & Data Structure

Firebase Cloud Functions
99 What Are Cloud Functions
100 Creating a Simple Callable Function
101 Calling a Function
102 Intro to Firebase Rules

ES6 & Extras
103 ES6 Arrow Functions
104 ES6 Promises
105 Imports and Exports
106 JavaScript Filter Method

107 Vue CLI 3 Introduction
108 The Vue GUI (part 1)
109 The Vue GUI (part 2)
110 Using ‘vue init’ with the New CLI
111 Using the new Vue CLI
112 The CLI Service
113 Custom Presets
114 Adding Plugins
115 Build & Deploy to Firebase
116 Instant Prototyping
117 Build Targets (Making a Web Component)
118 Using Web Components