Angular and Supabase Course - Build a Realtime Chat Application
Вставка
- Опубліковано 15 чер 2024
- Create and deploy a powerful real-time chat application using Angular 17 and Supabase in this full course.
Initial Setup: github.com/desoga10/ng-chat-u...
Final Implementation: github.com/desoga10/ng-chat-v
Demo Link: ng-chat-v.vercel.app/
✏️ Developed by @TheCodeAngle
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction and Project Demo
⌨️ (0:07:13) User Interface Setup
⌨️ (0:14:32) Setting up a New Supabase Project
⌨️ (0:16:48) Setting up Google Oauth using the Google Cloud Platform
⌨️ (0:25:39) Angular Router Configuration
⌨️ (0:27:58) Setting up the Authentication Service
⌨️ (0:39:03) Creating the CanActivate route guard
⌨️ (0:52:03) Setting up the Chat Tables and the Users Table in Supabase
⌨️ (1:11:07) Implementing the functionality to create a new Chat
⌨️ (1:21:22) Resetting the Form on Submit and Disabling Button for Validation
⌨️ (1:24:11) Fetch and Display Chats from Database
⌨️ (1:38:20) Implementing the Delete Message Functionality
⌨️ (2:01:42) Hosting the App using Vercel
⌨️ (2:08:08) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Thank you all for watching, and a special thanks to freeCodeCamp for publishing my video. Looking forward to future collaborations! 😊
Thank you so much for the tutorial! It was incredibly helpful and well-explained. I appreciate the effort and time you put into creating it. 😊
@@TheGemDev You're very welcome. I really appreciate your feedback. Thank you. 🤗
Might want to clear the search history before recording videos
@@jmtokx Thank you very much for the feedback. I'll take note of this moving forward.
A note for FreecodeCamp and everyone on future videos, please, add a little Section after the introduction with the Pre-requisites for the project. New people will struggle and probably give up in the very first 10 minutes of the video when the NPM xxx, or NG xxx commands fail because they didnt know what NodeJS, Angular or even VS code is installed and its possible issues during installation
that's very far i believe, especially with angular CLI installation and such, but if someone doesn't know what node or npm is, they should probably learn those first before gunning for angular😅
but i think this video was more for people with some knowledge of angular or used some frameworks before as it added on to existing concepts
Awesome!.. so happy to see an Angular video with functional auth guard
Great tutorial! Thanks for creating.
Very informative. Thank you for this tutorial.
This is lit!🔥
Also the first comment ❤
Oh, nice. Angular!
Supabase to the top!!
Can you guys make some videos for some projects using IDX?
Let’s gooo
We want Vue3/Supabase tutorial
I want Vue3/Nodejs full-stack tutorial.
Can you create angular 17 and supabase CRUD , with image.
I think one ui changes there when login other user then in chat window not showing delete option in previous user but in this video its showing could you please solved this issue
Spot that Nigerian accent 😌
😂 Nooooo.
loved the accent 😅
First comment. ✌️
👍👍
Where is the React version😢?
Siuuu
Will devin take our jobs ?
31:50 self-report 💀
try to clear out your cache, before you start making videos, so that your search history is not shown. Thanks!
No file uploads? No calls?
it's 2024, you cannot create a Super Chat app without file uploads, video/audio calls, what is this 1990?
Super Chat without any features is not a super chat, it's just a simple message system, not even qualified to be called chat. GTFOH
thanks, amazing channel, we need course about Microsoft AI-102