Build a Realtime Chat Application with Angular 17 and Supabase
Initial Setup: https://github.com/desoga10/ng-chat-ui-setup
Final Implementation: https://github.com/desoga10/ng-chat-v
Demo Link: https://ng-chat-v.vercel.app/
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:
https://supabase.com/docs
Angular 17 Signal Course (Demystifying Reactivity with Angular Signals)
https://www.newline.co/courses/demystifying-reactivity-with-angular-signals
Join my telegram community:
https://t.me/thecodeangle
For more resources on Web Development:
https://thecodeangle.com/[+] Show More
Final Implementation: https://github.com/desoga10/ng-chat-v
Demo Link: https://ng-chat-v.vercel.app/
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:
https://supabase.com/docs
Angular 17 Signal Course (Demystifying Reactivity with Angular Signals)
https://www.newline.co/courses/demystifying-reactivity-with-angular-signals
Join my telegram community:
https://t.me/thecodeangle
For more resources on Web Development:
https://thecodeangle.com/[+] Show More
Build a Realtime Chat Application with Angular 17 and Supabase
Initial Setup: https://github.com/desoga10/ng-chat-ui-setup Final ...
Create a Real Time Battery Status Indicator with HTML, CSS & JavaScript using the Battery Status API
In this tutorial we are going to create a battery status indicator ...
Build an AI Image Generator in Angular 17 Using the Clipdrop API || AI Text to Image Generator
Link to my Angular Course (Demystifying Reactivity with Angular ...
GitHub OAuth Login With Angular 17 and Supabase
Link to my Angular Course (Demystifying Reactivity with Angular ...
How to create a WordPress website & integrate ChatGPT using the XStore theme
⚠️Disclaimer: https://www.8theme.com never payed me for this video, ...
Build a Photo Gallery Application with Angular 17 and Supabase
In this tutorial, we dive into creating a powerful Photo Gallery ...
How to Generate Text Embeddings using Supabase Edge Functions, Transformer.js and React.js
In this supabase Edge functions tutorial, we will delve into the world ...
Vue.js Phone Number Authentication with Supabase and Vonage
In this supabase tutorial, we will delve into the Phone Numeber ...
Vue.js and Vuetify Data Table with Paging, Sorting, & Pagination
In this tutorial, we will learn how to create a data-table using ...
Create a Simple Blog Application using Caisy headless CMS and Next.js
In this video, we will build a simple blog application using the Caisy ...
Create a Sortable Table in Vanilla JavaScript using Data from a REST API
In this tutorial, we will learn how to make an HTML table with custom ...
How to Add Authentication to an Angular 16 App with Supabase
In this Angular 16 tutorial, I will show you how to add authentication ...