Supabase & Vue 3 (With Quasar & Pinia)

Connect a Vue 3 & Quasar app to Supabase: with Auth, RLS, Database Functions, Storage, Edge Functions & Local Supabase

What you'll learn

How to connect a Quasar 2 app to a Supabase backend

Add full Realtime CRUD capabilities: Read, Insert, Update, Delete & Realtime

Add Supabase Authentication so your users can Register, Login & Log out

Add Security with Navigation Guards & Supabase Row Level Security & Policies

Add Supabase Storage so your users can upload an avatar (& display it in the app)

How to run Supabase Locally & How to Push Local Changes to the Live Instance

How to create Supabase Edge Functions

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 Supabase backend.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 Supabase Database and add full CRUD capabilities for one user:Read and display Entries from SupabaseAdd EntryDelete EntryUpdate EntryReorder EntriesRealtime UpdatesYou'll then create an Auth page where a user can login & register and setup Supabase Authentication:Register UserLogout UserLogin UserListen for Auth ChangesRedirect the User on Login & LogoutYou'll then add support for Multiple Users and add security to the app:Navigation GuardsSupabase Row Level Security (RLS) & PoliciesNext you'll learn about Database Functions & Triggers, you will:Create a Database Function which keeps track of the total number of entries created with MoneyballsLearn how to fire the Database Function straight from MoneyballsCreate a Trigger which fires this Database Function (automatically) every time any user adds a new entryYou'll learn about Supabase Storage, you will:Create an Avatars Storage BucketAllow each user to upload an AvatarDisplay the Avatar within MoneyballsNext you'll learn how to take your entire Supabase instance and run it locally, you'll:Install Supabase locallyImport all Database Tables & Data from the Live Supabase instanceLearn how to make changes to the Database locallyLearn how to push these changes to the Live instanceYou'll then learn about Edge Functions, you will:Create an Edge Function (locally) which displays a random greeting to the userAccess Auth and the Database in the Edge Function, so that we can display the user's total number of entries in the greetingDeploy the local Edge Function to the Live Supabase instanceFinally, you'll build the app for production and get it working on 5 platforms:Web browseriOSAndroidMacWindowsFor 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: Supabase: Introduction & Setup

Lecture 7 Introduction to Supabase

Lecture 8 Supabase vs Firebase

Lecture 9 Create a Supabase Project

Lecture 10 Install Supabase & Setup Environment Variables

Lecture 11 Setup Supabase Database

Lecture 12 Download Source Code

Section 3: Display Entries in Realtime

Lecture 13 Get Entries Store Ready for Supabase

Lecture 14 Display Entries from Supabase

Lecture 15 Handle Errors

Lecture 16 Get Realtime Updates

Lecture 17 Realtime: Insert

Lecture 18 Realtime: Delete

Lecture 19 Realtime: Update

Lecture 20 Add a Loading Screen

Lecture 21 Download Source Code

Section 4: Add, Delete & Update Entries on Supabase

Lecture 22 Add Entry

Lecture 23 Delete Entry

Lecture 24 Update Entry

Lecture 25 Update Entry: Improve Performance

Lecture 26 Update Entry: Handle Errors

Lecture 27 Download Source Code

Section 5: Order & Reorder Entries

Lecture 28 Order Entries

Lecture 29 Add Order Number to New Entry

Lecture 30 Add Order Number for First Entry Added

Lecture 31 Update Order Numbers on Sort (Local)

Lecture 32 Update Order Numbers on Sort (Supabase)

Lecture 33 Download Source Code

Section 6: Auth Page (Register & Login)

Lecture 34 Auth Page - Setup Layout, Page & Route

Lecture 35 Add a Card & Title

Lecture 36 Add Tabs for Login & Register

Lecture 37 Add the Form Elements

Lecture 38 Check Form in Dark Mode

Lecture 39 Dynamic Submit Button

Lecture 40 Hook Up the Form Fields

Lecture 41 Handle Form Submit

Lecture 42 Basic Validation & Error Dialog

Lecture 43 Handle Submit Success

Lecture 44 Redirect Back to Entries Page

Lecture 45 Download Source Code

Section 7: Authentication

Lecture 46 Supabase Authentication & Auth Store

Lecture 47 Register User

Lecture 48 Logout User

Lecture 49 Login User

Lecture 50 Listen for Auth Changes

Lecture 51 Store User’s Email & User ID

Lecture 52 Improve Logout Button

Lecture 53 Redirect User on Auth Change

Lecture 54 Download Source Code

Section 8: Multiple Users

Lecture 55 Restructure Database for Multiple Users

Lecture 56 Load Current User’s Entries

Lecture 57 Subscribe to Current User’s Entries

Lecture 58 Include User Id when User Adds Entry

Lecture 59 Clear Entries array in State when user logs out

Lecture 60 Unsubscribe from Entries

Lecture 61 Download Source Code

Section 9: Security: Navigation Guards

Lecture 62 Add a Router Boot File

Lecture 63 Add Navigation Guard Restrictions

Lecture 64 Download Source Code

Section 10: Security: Row Level Security & Policies

Lecture 65 Poor Security Demonstration

Lecture 66 Secure Data with RLS & Policies

Lecture 67 SELECT Policy (RLS)

Lecture 68 INSERT Policy (RLS)

Lecture 69 DELETE Policy (RLS)

Lecture 70 UPDATE Policy (RLS)

Lecture 71 Fix the UPSERT Issue

Lecture 72 Download Source Code

Section 11: Database Functions & Triggers

Lecture 73 What are Database Functions?

Lecture 74 Add Entries Count Banner to Auth Page

Lecture 75 Add Stats Table (with Entries Count)

Lecture 76 Create a Function to Increment Entries Count

Lecture 77 Fire the Function from our App

Lecture 78 Create a Trigger to Fire Function

Lecture 79 Display the Entries Count

Lecture 80 Fade in the Entries Count Banner

Lecture 81 Download Source Code

Section 12: Supabase Storage

Lecture 82 Create Avatars Bucket

Lecture 83 Storage Folders

Lecture 84 Storage Policies

Lecture 85 Settings - Add Profile Section & Avatar Upload

Lecture 86 Upload Avatar - Part 1

Lecture 87 Upload Avatar - Part 2

Lecture 88 Create a Profiles Table

Lecture 89 Save Filename to Profiles Table

Lecture 90 Get Avatar URL

Lecture 91 Display the Avatar

Lecture 92 Get Working for Different Users

Lecture 93 Download Source Code

Section 13: Run Supabase Locally

Lecture 94 Install & Configure Docker

Lecture 95 Install Supabase Locally

Lecture 96 Import Tables

Lecture 97 Import Data

Lecture 98 Connect to Local Supabase Instance & Setup Local Environment Variables

Lecture 99 Get Realtime Working Locally

Lecture 100 Local Avatar Images

Lecture 101 Add a User Bio Field

Lecture 102 Save the Bio to the Profiles Table

Lecture 103 getProfile Action

Lecture 104 Push Local Changes to Live

Lecture 105 Download Source Code

Section 14: Edge Functions

Lecture 106 Create Hello World Edge Function

Lecture 107 Deploy Hello World Edge Function

Lecture 108 Create a Greeting Function

Lecture 109 Create showGreeting Action

Lecture 110 Fix the CORS Issue

Lecture 111 Display the Greeting

Lecture 112 Access Database in Edge Function

Lecture 113 Access Auth & User in Edge Function

Lecture 114 Get The User’s Entries Count

Lecture 115 Deploy Edge Function

Lecture 116 Download Source Code

Section 15: Platforms

Lecture 117 Web

Lecture 118 iOS

Lecture 119 Android

Lecture 120 Mac

Lecture 121 Windows

Lecture 122 Finished Source Code

Section 16: Bonus Lectures

Lecture 123 Bonus Lecture

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