Realtime: Insert | Make Apps Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Supabase & Vue 3 (with Quasar & Pinia)

1 Introduction

Introduction (4:23)
Editor & Software Setup (0:58)
Chrome & Vue Devtools (0:31)
Install Course App: Moneyballs (0:32)
Moneyballs Overview (6:58)
Download Source Code

2 Supabase: Introduction & Setup

Introduction to Supabase (4:05)
Supabase vs Firebase (4:44)
Create a Supabase Project (2:13)
Install Supabase & Setup Environment Variables (5:03)
Setup Supabase Database (4:47)
Download Source Code

3 Display Entries in Realtime

Get Entries Store Ready for Supabase (3:16)
Display Entries from Supabase (4:39)
Handle Errors (4:13)
Get Realtime Updates (5:51)
Realtime: Insert (1:43)
Realtime: Delete (3:20)
Realtime: Update (3:00)
Add a Loading Screen (6:58)
Download Source Code

4 Add, Delete & Update Entries on Supabase

Add Entry (6:40)
Delete Entry (4:06)
Update Entry (5:08)
Update Entry: Improve Performance (2:58)
Update Entry: Handle Errors (6:56)
Download Source Code

5 Order & Reorder Entries

Order Entries (5:30)
Add Order Number to New Entry (4:00)
Add Order Number for First Entry Added (3:05)
Update Order Numbers on Sort (Local) (3:40)
Update Order Numbers on Sort (Supabase) (5:22)
Download Source Code

6 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

7 Authentication

Supabase Authentication & Auth Store (3:22)
Register User (5:42)
Logout User (2:36)
Login User (3:14)
Listen for Auth Changes (7:08)
Store User’s Email & User ID (4:53)
Improve Logout Button (2:03)
Redirect User on Auth Change (3:14)
Download Source Code

8 Multiple Users

Restructure Database for Multiple Users (2:57)
Load Current User’s Entries (4:45)
Subscribe to Current User’s Entries (2:28)
Include User Id when User Adds Entry (3:02)
Clear Entries array in State when user logs out (2:37)
Unsubscribe from Entries (4:55)
Download Source Code

9 Security: Navigation Guards

Add a Router Boot File (6:10)
Add Navigation Guard Restrictions (3:40)
Download Source Code

10 Security: Row Level Security & Policies

Poor Security Demonstration (2:11)
Secure Data with RLS & Policies (1:22)
SELECT Policy (RLS) (2:07)
INSERT Policy (RLS) (2:59)
DELETE Policy (RLS) (1:49)
UPDATE Policy (RLS) (2:39)
Fix the UPSERT Issue (3:52)
Download Source Code

11 Database Functions & Triggers

What are Database Functions? (1:23)
Add Entries Count Banner to Auth Page (2:52)
Add Stats Table (with Entries Count) (1:39)
Create a Function to Increment Entries Count (3:09)
Fire the Function from our App (2:42)
Create a Trigger to Fire Function (4:50)
Display the Entries Count (5:08)
Fade in the Entries Count Banner (2:44)
Download Source Code

12 Supabase Storage

Create Avatars Bucket (1:39)
Storage Folders (0:53)
Storage Policies (1:28)
Settings - Add Profile Section & Avatar Upload (3:59)
Upload Avatar - Part 1 (3:31)
Upload Avatar - Part 2 (6:10)
Create a Profiles Table (1:23)
Save Filename to Profiles Table (6:37)
Get Avatar URL (5:50)
Display the Avatar (6:22)
Get Working for Different Users (3:50)
Download Source Code

13 Run Supabase Locally

Install & Configure Docker (1:45)
Install Supabase Locally (4:24)
Import Tables (5:15)
Import Data (3:40)
Connect to Local Supabase Instance & Setup Local Environment Variables (3:51)
Get Realtime Working Locally (1:58)
Local Avatar Images (4:51)
Add a User Bio Field (2:18)
Save the Bio to the Profiles Table (6:48)
getProfile Action (2:24)
Push Local Changes to Live (5:03)
Download Source Code

14 Edge Functions

Create Hello World Edge Function (3:45)
Deploy Hello World Edge Function (2:49)
Create a Greeting Function (3:10)
Create showGreeting Action (3:09)
Fix the CORS Issue (3:00)
Display the Greeting (3:30)
Access Database in Edge Function (4:01)
Access Auth & User in Edge Function (3:47)
Get The User’s Entries Count (3:08)
Deploy Edge Function (2:59)
Download Source Code

15 Platforms

Web (4:39)
iOS (2:44)
Android (4:06)
Mac (2:43)
Windows (3:54)
Finished Source Code

16 Bonus Lectures

Bonus Lecture: Course Round Up (1:25)

Teach online with

Realtime: Insert

Complete and Continue

Discussion

0 comments