Add a Loading Screen | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

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

1 Introduction

Introduction (1:33)
Editor & Software Setup (0:58)
Chrome & Vue Devtools (0:31)
Install Course App: Moneyballs (0:49)
Moneyballs Overview (6:58)
Download Source Code

2 Firebase: Introduction & Setup

Introduction to Firebase (1:40)
Create a Firebase Project (1:07)
Create App & Install Firebase (2:00)
Setup Firestore Database (3:53)
Connect to Database (2:28)
Download Source Code

3 Read, Add, Delete & Update Entries

Get Entries Store Ready for Firebase (3:10)
Display Entries from Firestore (4:29)
Get Entries in Real Time (8:04)
Add a Loading Screen (5:35)
Add Entry (6:51)
Add Entry (with Firebase IDs) (6:09)
Delete Entry (2:17)
Update Entry (3:49)
Download Source Code

4 Order & Reorder Entries

Order Entries (5:44)
Add Order Number to New Entry (4:02)
Add Order Number for First Entry Added (2:12)
Update Order Numbers on Sort (5:30)
Download Source Code

5 Auth Page (Register & Login)

Auth Page - Setup Layout, Page & Route (3:42)
Add a Card & Title (3:34)
Add Tabs for Login & Register (2:32)
Add the Form Elements (5:29)
Check Form in Dark Mode (2:02)
Dynamic Submit Button (1:27)
Hook Up the Form Fields (1:19)
Handle Form Submit (1:00)
Basic Validation & Error Dialog (1:35)
Handle Submit Success (1:50)
Redirect Back to Entries Page (1:13)
Download Source Code

6 Authentication

Firestore Authentication & Auth Store (3:42)
Register User (7:30)
Logout User (2:35)
Login User (5:11)
Listen for Auth Changes (5:54)
Store User’s Email & User ID (3:58)
Improve Logout Button (1:37)
Redirect User on Auth Change (3:12)
Download Source Code

7 Multiple Users

Restructure Database for Multiple Users (5:15)
Setup Refs for Multiple Users (5:41)
Clear Entries array in State when user logs out (2:34)
Unsubscribe from the Get Entries Listener (5:17)
Download Source Code

8 Security: Navigation Guards

Add a Router Boot File (6:06)
Add Navigation Guard Restrictions (4:02)
Smoother Login (for Returning User) (3:16)
Download Source Code

9 Security: Firestore Security Rules

Poor Security Demonstration (4:04)
Secure Data with Firebase Security Rules (6:00)
Download Source Code

10 Platforms

Web (2:26)
iOS (Fix Capacitor Error) (4:53)
Android (Fix the Jitters) (7:15)
Mac (2:03)
Windows (1:57)
Download Source Code

11 Bonus: Order Entries with Firestore Query

Remove entriesOrdered Gettter (2:58)
Order Entries with Firestore Query (4:19)
Download Source Code

12 Bonus Lectures

Bonus Lecture - Course Round Up (0:52)

Teach online with

Add a Loading Screen

Complete and Continue

Discussion

0 comments