Learn how to use Supabase by building a real-world React.js Sales Dashboard app with authentication, real-time data operations, and secure user management.

✏️ Study this course interactively on Scrimba: 
https://scrimba.com/intro-to-supabase-c0abltfqed?utm_source=youtube&utm_medium=video&utm_campaign=fcc-intro-supabase 

Code is available on the Scrimba course page for each lesson.

The app features user authentication with role-based access along with a visualization of aggregated sales deals for each rep, updating in real-time as new deals are added. You’ll also build scalable user profiles which are automatically created upon signup using database triggers, and secure all data with permission-based filtering. By the end, you’ll have a production-ready business application with proper user management, data visualization, and security.

Scrimba on YouTube: https://www.youtube.com/c/Scrimba

⭐️ Chapters ⭐️
- 0:00:00 Course introduction
- 0:05:42 Introduction to Persistence
- 0:09:48 Supabase project setup
- 0:20:50 Query the database using supabase-js
- 0:27:55 Query with aggregate function
- 0:31:50 Storing the data in state
- 0:34:57 Format data for chart
- 0:40:26 Realtime subscription
- 0:47:17 New deal form
- 0:56:54 Insert new data
- 1:00:21 Section 1 Recap
- 1:01:00 Introduction to Auth
- 1:02:10 Router setup
- 1:10:35 Context API
- 1:18:38 Auth Session state - part 1
- 1:29:26 Auth Session state - part 2
- 1:31:40 JSON Web Tokens (anon)
- 1:39:24 JWTs (authenticated)
- 1:45:53 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
- 2:11:43 Navigate & Link
- 2:18:21 Sign out
- 2:27:53 Navigate after sign out
- 2:32:20 Row Level Security
- 2:37:11 RLS: Authenticated users only
- 2:43:19 Home redirect
- 2:52:13 Protected Route
- 2:58:53 Sign up
- 3:08:34 Database refactor - part 1
- 3:16:18 Database refactor - part 2
- 3:25:19 User profiles table
- 3:31:35 Sign up expansion
- 3:35:05 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
- 4:42:46 Account type in Header
- 4:48:45 Section 2 Recap


🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

freeCodeCamp is a nonprofit organization offering free online coding courses and programming tutorials, covering topics such as web development, data science, and machine learning. Learners can gain practical coding skills, build real-world projects, and earn certifications to advance their careers in tech.

freeCodeCamp

Supabase is an open-source backend-as-a-service platform built on PostgreSQL that handles database operations, authentication, and real-time data synchronization. This tutorial walks through building a React sales dashboard with Supabase, covering database setup, querying data with the client library, implementing real-time subscriptions for live updates, inserting data through forms, and adding user authentication with sign-up/sign-in flows. The course demonstrates connecting a React frontend to Supabase using environment variables, fetching and displaying aggregated sales data in charts, and securing data with row-level security policies.

Intro to Supabase – Full Tutorial for Beginners