Build a Realtime Chat Application with Angular 17 and Supabase

Initial Setup:
Final Implementation:
Demo Link:

In this tutorial, we delve into creating a powerful real time Chat application using Angular 17 and @Supabase

In this tutorial, I covered ...
topics such as creating Realtime data fetching with Supabase, Supabase triggers and functions how to use the Google Oauth service in Angular, as well as utilizing the latest updates in Angular 17 such as Signals and the newly introduced control flows.

Build a Realtime Chat Application with Angular 17 and Supabase:
0:00:00 Introduction and Project Demo
0:06:55 User Interface Setup
0:14:14 Setting up a New Supabase Project
0:16:30 Setting up Google Oauth using the Google Cloud Platform
0:25:21 Angular Router Configuration
0:27:40 Setting up the Authentication Service
0:38:45 Creating the CanActivate route guard
0:51:45 Setting up the Chat Tables and the Users Table in Supabase
1:10:49 Implementing the functionality to create a new Chat
1:21:04 Resetting the Form on Submit and Disabling Button for Validation
1:23:53 Fetch and Display Chats from Database
1:38:02 Implementing the Delete Message Functionality
2:01:24 Hosting the App using Vercel
2:07:50 Outro

Supabase Docs:

Angular 17 Signal Course (Demystifying Reactivity with Angular Signals)

Join my telegram community:

For more resources on Web Development:​​​​
[+] Show More
Load More