Quasar 2 & Firebase Cloud Firestore (With Vue 3 & Pinia)

Connect a Quasar 2 (Vue 3) app with Firebase Cloud Firestore - including Authentication, Security and Realtime Data Sync

What you'll learn

How to connect a Quasar 2 app to a Firebase Cloud Firestore database

How to setup Firebase Authentication so users can Register, Login & Log out

How to setup Firebase Security Rules to secure your users' data

How to get the finished app built & working for Web, iOS, Android, Mac & Windows

Requirements

Basic understanding of Vue 3, Quasar, Pinia & JavaScript

Description

In this course, you'll learn how to connect a Quasar 2 app (with Vue 3 & Pinia) to a Firebase Cloud Firestore Database.You'll start by downloading and launching the course app, Moneyballs (from my course Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia).You'll connect Moneyballs to a Firebase Cloud Firestore database and add full CRUD capabilities for one user:Get and display Entries from FirestoreAdd EntryDelete EntryUpdate EntryReorder EntriesYou'll then create an Auth page where a user can login & register and setup Firestore Authentication:Register UserLogout UserLogin UserRedirect the User on Login & LogoutYou'll then add support for Multiple Users and add security to the app:Navigation GuardsFirebase Security RulesFinally, you'll build the app for production and get it working on 5 platforms:Web browseriOSAndroidMacWindowsBy the end of this course, you'll have a thorough understanding of how to connect your own Quasar 2 app to a Firebase Cloud Firestore database.For this course, I recommend:Having completed my course Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)Using a MacHaving a basic understanding of Vue 3 (Composition API), Quasar, Pinia & JavaScript

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Editor & Software Setup

Lecture 3 Chrome & Vue Devtools

Lecture 4 Install Course App: Moneyballs

Lecture 5 Moneyballs Overview

Lecture 6 Download Source Code

Section 2: Firebase: Introduction & Setup

Lecture 7 Introduction to Firebase

Lecture 8 Create a Firebase Project

Lecture 9 Create App & Install Firebase

Lecture 10 Setup Firestore Database

Lecture 11 Connect to Database

Lecture 12 Download Source Code

Section 3: Read, Add, Delete & Update Entries

Lecture 13 Get Entries Store Ready for Firebase

Lecture 14 Display Entries from Firestore

Lecture 15 Get Entries in Real Time

Lecture 16 Add a Loading Screen

Lecture 17 Add Entry

Lecture 18 Add Entry (with Firebase IDs)

Lecture 19 Delete Entry

Lecture 20 Update Entry

Lecture 21 Download Source Code

Section 4: Order & Reorder Entries

Lecture 22 Order Entries

Lecture 23 Add Order Number to New Entry

Lecture 24 Add Order Number for First Entry Added

Lecture 25 Update Order Numbers on Sort

Lecture 26 Download Source Code

Section 5: Auth Page (Register & Login)

Lecture 27 Auth Page - Setup Layout, Page & Route

Lecture 28 Add a Card & Title

Lecture 29 Add Tabs for Login & Register

Lecture 30 Add the Form Elements

Lecture 31 Check Form in Dark Mode

Lecture 32 Dynamic Submit Button

Lecture 33 Hook Up the Form Fields

Lecture 34 Handle Form Submit

Lecture 35 Basic Validation & Error Dialog

Lecture 36 Handle Submit Success

Lecture 37 Redirect Back to Entries Page

Lecture 38 Download Source Code

Section 6: Authentication

Lecture 39 Firestore Authentication & Auth Store

Lecture 40 Register User

Lecture 41 Logout User

Lecture 42 Login User

Lecture 43 Listen for Auth Changes

Lecture 44 Store User’s Email & User ID

Lecture 45 Improve Logout Button

Lecture 46 Redirect User on Auth Change

Lecture 47 Download Source Code

Section 7: Multiple Users

Lecture 48 Restructure Database for Multiple Users

Lecture 49 Setup Refs for Multiple Users

Lecture 50 Clear Entries array in State when user logs out

Lecture 51 Unsubscribe from the Get Entries Listener

Lecture 52 Download Source Code

Section 8: Security: Navigation Guards

Lecture 53 Add a Router Boot File

Lecture 54 Add Navigation Guard Restrictions

Lecture 55 Smoother Login (for Returning User)

Lecture 56 Download Source Code

Section 9: Security: Firestore Security Rules

Lecture 57 Poor Security Demonstration

Lecture 58 Secure Data with Firebase Security Rules

Lecture 59 Download Source Code

Section 10: Platforms

Lecture 60 Web

Lecture 61 iOS (Fix Capacitor Error)

Lecture 62 Android (Fix the Jitters)

Lecture 63 Mac

Lecture 64 Windows

Lecture 65 Download Source Code

Section 11: Extra: Order Entries with Firestore Query

Lecture 66 Remove entriesOrdered Getter

Lecture 67 Order Entries with Firestore Query

Lecture 68 Download Source Code

Section 12: Bonus Lectures

Lecture 69 Bonus Lecture

Vue 3 & Quasar Developers looking to create a backend for their Cross-Platform App with Firebase Cloud Firestore