Build a Chat Application with GetStream.io, Angular and Firebase

Опубликовано: 13 Октябрь 2024
на канале: Decoded Frontend

19,539

500

Stream offers a free-forever Maker Account for qualifying small teams and personal dev projects — https://bit.ly/StreamIO-DecodedFrontend

Angular SDK Docs:
https://getstream.io/chat/docs/sdk/an...

In this video, you will learn how to build a production-ready chat application just in a few hours using GetStream, Firebase, and Angular. First of all, we will build basic authentication for the application using Firebase. Then using Firebase Cloud Functions, we will connect and synchronize Firebase Users with GetStream once and after that, we will implement the chat that has all the necessary functionality to have a smooth and full user experience. As the last step, we will deploy a ready app to the Firebase hosting.

Source code on GitHub:
https://github.com/DMezhenskyi/getstr...

💥 Angular courses made by Dmytro - https://bit.ly/df-courses 💥
✂️ Use coupon YOUTUBE_DISCOUNT to get a 10%-off discount ✂️

🕒 Time Codes:
00:00:00 - Intro;
00:01:15 - What is Stream IO;
00:03:27 - Project Onboarding;
00:06:35 - Initialization and adding Firebase to the Firebase;
00:12:26 - User Signing Up using Firebase Authentication;
00:23:29 - User Signing Out using Firebase Authentication;
00:25:50 - User Signing In using Firebase Authentication;
00:29:18 - Adding Firebase Router Guards;
00:36:01 - Intro to Stream.io;
00:38:54 - About Integration Stream.io with Firebase Authentication;
00:41:48 - Initialize Firebase Cloud Functions;
00:43:37 - Mapping Firebase user to Stream.io;
00:56:18 - Initializing Stream Chat;
01:06:04 - Retrieve an Auth Token for Stream Chat;
01:11:22 - Start listening for Stream Channels (Chat Rooms);
01:13:19 - Add default styling and adjust tsconfig.json;
01:14:11 - Implementation of the Chat;
01:22:28 - Creating a new Chat Channel;
01:31:25 - Adding users to the Chat;
01:48:32 - Customising Chat View (Channel Preview);
01:52:48 - Logout the Chat user from the Stream;
01:56:31 - How to deploy Angular App to Firebase Hosting;
02:00:12 - Outro;

↙️ Short Frontend Snacks every week here:

Twitter -   / decodedfrontend
Instagram -   / decodedfrontend
LinkedIn -   / dmezhenskyi

#angular #stream #firebase #ng #webdevelopment