Supabase & Vue 3 (with Quasar & Pinia)

Connect your Quasar 2 app (built with Vue 3 & Pinia) to a Supabase backend in this comprehensive course! You'll build upon the foundation laid in "Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)" by integrating robust backend functionality.

Hands-on Project: Moneyballs

We'll use the existing Moneyballs app as our project, connecting it to a Supabase Database to implement complete CRUD (Create, Read, Update, Delete) operations for a single user. You'll learn to:

• Read and Display Entries: Fetch and display data from the Supabase database.
• Add New Entries: Enable users to easily add new data.
• Delete Entries: Implement functionality to remove existing data.
• Update Entries: Allow users to modify existing data.
• Reorder Entries: Provide a way to change the order of entries.
• Realtime Updates: Utilize Supabase's realtime capabilities for instant data synchronization.

Authentication with Supabase

This course covers setting up a secure authentication system using Supabase Authentication:

• User Registration: Implement a registration page for new users.
• User Login: Create a login page for existing users.
• User Logout: Implement a logout functionality.
• Auth Changes: Listen for authentication state changes.
• Redirection: Redirect users based on login/logout status.

Multi-User Support & Security

Expand your app to support multiple users and secure your data with:

• Navigation Guards: Implement route protection.
• Supabase Row Level Security (RLS) & Policies: Control data access at the row level.

Database Functions & Triggers

Enhance your backend with powerful database features:

• Database Functions: Create a function to track the total number of entries.
• Trigger Implementation: Automatically fire the database function whenever a new entry is created.

Supabase Storage for Avatars

Implement user profile pictures using Supabase Storage:

• Avatars Storage Bucket: Create a dedicated storage bucket for user avatars.
• Avatar Upload: Allow users to upload their own avatars.
• Avatar Display: Display the uploaded avatar within the app.

Local Development & Deployment

Streamline your development workflow:

• Local Supabase Instance: Install and run a Supabase instance locally.
• Database Synchronization: Import data from your live Supabase instance.
• Local Database Changes: Make changes to the database locally.
• Push Changes to Live: Push local changes to your live Supabase instance.

Edge Functions for Dynamic Content

Add dynamic content with Supabase Edge Functions:

• Create an Edge Function: Develop a function to display a random greeting.
• Access Auth & Database: Access authentication and database information within the Edge Function to personalize the greeting with the user's entry count.
• Deploy to Live: Deploy the local Edge Function to your live Supabase instance.

Production Ready App

Prepare your app for deployment:

• Production Build: Build the app for production.
• Cross-Platform Compatibility: Deploy to Web, iOS, Android, Mac, Windows platforms.

Prerequisites:

• Completion of "Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)"
• A Mac computer
• Basic understanding of Vue 3 (Composition API), Quasar, Pinia, and JavaScript.