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

egghead.io

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

via egghead.io

Overview

Supabase is an open-source tool for rapidly building application backends with real-time data and authentication. In this course, you'll learn the fundamentals of Supabase. You'll learn how to model complex data using PostgreSQL and SQL, build authentication flows with Oauth, and add real-time data to a Next.js application to build a fully-featured chat application, similar to Discord.
The chat app will have different "channels," which will be powered by data inside of Supabase. Users can visit these channels and write messages, which will be sent in real-time to other current users of the platform.
After this course, you will be able to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase, such as authentication, instant APIs, and real-time subscriptions.
Whether you are just starting out with frontend engineering or you are a seasoned veteran, this course will provide a strong understanding of Supabase. This course uses @supabase/supabase-js": "^1.4.2".
Prerequisite
This course will help you gain exposure to a timeless technology: relational databases, via Supabase's PostgreSQL support.
To effectively use Supabase, you need to understand the basics of SQL or Structured Query Language, and how it can be used to work with relational databases. In this talk, we'll look at the basics of SQL — how to query for data, how to insert and remove data, and how structured databases are organized using tables, rows, and columns.

Syllabus

  • Create a New Supabase Project
  • Navigate the Supabase Admin Interface
  • Create PostgreSQL Tables Using Supabase's Interface
  • Configure Supabase Auth to Allow Users to Login with GitHub
  • Use Triggers to Automatically Update Supabase Tables
  • Set up a Supabase Client in Next.js
  • Set up a Login Page in Next.js with Supabase's auth.session()
  • Set up GitHub Authorization with Supabase
  • Manage Third-Party Authorization Errors in Supabase
  • Executing Raw SQL using Supabase's Interface
  • Retrieve Data with a Supabase API Request
  • Subscribe to Database Changes using Supabase's Realtime Client
  • Enable Realtime Only for Individual Tables using supabase_realtime
  • Insert Submitted Data to Supabase Tables
  • Keep Track of the Current User Using Next.js with Supabase
  • Logout and Update Users with React and Supabase's upsert Method
  • Request User Details for a Given User Using Supabase's API
  • Retrieve and Displaying User Details with User Subscriptions
  • Deploy a Supabase Application to Production with Cloudflare Pages
  • Building Supabase Serverless Workflows with Cloudflare Workers

Taught by

Kristian Freeman

Reviews

Start your review of Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

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.