Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Introduction to Supabase - Full Tutorial for Beginners

via freeCodeCamp

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn Supabase fundamentals by building a comprehensive React.js Sales Dashboard application from scratch in this 4-hour and 25-minute tutorial. Master database operations, authentication systems, and real-time data management while creating a production-ready business application. Start with Supabase project setup and database querying using supabase-js, then progress through data persistence, aggregate functions, state management, and chart data formatting. Implement real-time subscriptions to automatically update the dashboard as new sales deals are added. Build robust user authentication with role-based access control, exploring JSON Web Tokens for both anonymous and authenticated users. Configure React Router for navigation, implement Context API for state management, and create secure sign-in and sign-up components. Establish Row Level Security (RLS) policies to protect sensitive data and ensure only authenticated users can access appropriate information. Design and implement user profiles that automatically generate upon signup using database triggers, then refactor the deals table to support multi-user functionality. Create protected routes, manage user sessions, and build a scalable architecture that supports different account types. Throughout the development process, explore advanced Supabase features including database triggers, secure data filtering, and permission-based access controls that ensure data integrity and user privacy in a multi-tenant environment.

Syllabus

- Course introduction
- Introduction to Persistence
- Supabase project setup
- Query the database using supabase-js
- Query with aggregate function
- Storing the data in state
- Format data for chart
- Realtime subscription
- New deal form
- Insert new data
- Section 1 Recap
- Introduction to Auth
- Router setup
- Context API
- 1:18:38 Auth Session state - part 1
- 1:29:26 Auth Session state - part 2
- JSON Web Tokens anon
- JWTs authenticated
- Add user to Auth.Users
- 1:47:58 Sign in component - part 1
- 1:53:39 Sign in component - part 2
- 2:00:57 Sign in auth function - part 1
- 2:08:54 Sign in auth function - part 2
- Navigate & Link
- Sign out
- Navigate after sign out
- Row Level Security
- RLS: Authenticated users only
- Home redirect
- Protected Route
- Sign up
- 3:08:34 Database refactor - part 1
- 3:16:18 Database refactor - part 2
- User profiles table
- Sign up expansion
- Trigger
- 3:46:41 Refactor deals table - part 1
- 3:51:12 Refactor deals table - part 2
- 3:59:18 Refactor deals table - part 3
- 4:02:31 Fetch all profiles - part 1
- 4:08:19 Fetch all profiles - part 2
- 4:13:41 Update new deal form - part 1
- 4:24:49 Update new deal form - part 2
- 4:31:25 Update fetchMetrics - part 1
- 4:36:33 Update fetchMetrics - part 2
- Account type in Header
- Section 2 Recap

Taught by

freeCodeCamp.org

Reviews

Start your review of Introduction to Supabase - Full Tutorial for Beginners

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.