Build Real-Time Chat App with Angular, ASP.NET Core, SignalR & WebRTC

Want to build a chat application with real-time messaging and video calling features? This full stack tutorial guides you through creating a real-time chat app using Angular, ASP.NET Core Web API, SignalR, and WebRTC. You'll implement private messaging, user presence, and high-quality peer-to-peer video calls—perfect for building apps like Slack, Zoom, or WhatsApp using modern web technologies.

📚 Technologies Used: .NET Core, Angular, SignalR, WebRTC
🧠 What You’ll Learn:
How to use SignalR for real-time communication
WebRTC peer-to-peer video integration
Full Stack development using .NET Core & Angular

👉 Don’t forget to LIKE 👍, COMMENT 💬, and SUBSCRIBE 🔔 for more full-stack tutorials!

Video Chapters:
0:00 Introduction
1:02 Download and Install .NET 9 SDK
2:16 Download and Install Vs Code
3:08 Install Vs Code Extensions
3:14 Install C# Dev Kit Extensions in Vs Code
3:32 Install Nuget Gallery Extensions In Vs Code
3:42 Install SQLite VS Code Extensions
3:50 Download and Install Node Js
4:14 Install Angular 19 Globally
4:49 Install Angular Service In Vs Code
5:15 Install Material Icon In Vs Code
5:34 Let's Create API Project using CLI
7:05 Create Angular Client Project
9:15 Run API Project in custom port
10:15 Install EF Core from Nuget Gallery VS Code
10:18 Install Ef Core Sqlite in Vscode
10:42 Install Identity Entityframework Core
11:10 Add AppDbContext Class
12:50 Create AppUser Class and define custom property
13:46 Add Identity in container
14:11 Configure JWT Authentication
17:34 Create Register Endpoint using minimal API
20:34 Create Common Response Generic Class
24:12 Lets add Initial Migrations Using Cli
26:08 Testing Register endpoint using Thunder Client
28:23 Implement Upload profile picture in register endpoint
33:13 Download and install postman for api testing
33:13 Test Image Upload in register endpoint
34:00 Test Register Endpoint
35:24 Login Endpoint Create DTOS and Generate JWT token
44:30 Test login endpoint using postman
45:50 Add Message Entity and Add Migrations
50:00 Working on signalr chat hub backend for message
1:13:23 Update Angular 18 to 19 Version
1:15:00 Install Tailwindcss In angular 19
1:18:05 Install Angular Material
1:20:10 Generate register page component in angular
1:22:15 Generate Angular Auth Service And Implementation
1:24:13 Create Typescript Modal
1:27:02 Design Form for register using TailwindCSS & Angular Material
1:39:08 Implement User Profile Image Upload in Angular
1:42:10 Form validation in Angular and Angular Material
1:52:58 Implement Login In Angular19
2:08:25 Implement Login Guard In Angular 19
2:11:07 Create Chat Page in angular
2:12:53 Implement Auth Guard In Angular
2:15:24 Add Wild Card Route in angular
2:24:31 Design Side for displaying list of users with active status
2:40:20 Implement Logout functionaly in angular
2:45:35 Display Current Logged User Detail in angular
2:52:23 Install SignalR in angular 19 (Fetch list of online/offline users)
2:52:49 Create Chat Service and Implement SignalR Hub Methods
3:06:13 Test online users
3:07:54 Create and Implement Right side bar to fetch user detail form api
3:14:11 Design Chat Box display list of messages
3:45:00 Implement Send RealTime Message Functionality In Angular
3:53:22 Display Real Time Active Notification in Angular
3:55:48 Display Real Time Typing Indicator In Angular
4:02:55 Fetch Message History In Client
4:08:50 Mobile Responsive Design in angular tailwindcss
4:15:46 Change Angular Material Theme Color
4:16:25 Handle Duplicate SignalR Connection in Angular
4:18:01 Play Sound When User Receive Real Time Message
4:20:56 Design Reusable Button In Angular
4:31:30 Add PWA Support In Chat App
4:36:44 Implement Video Calling Functionality In Signalr & Angular
5:13:25 Deploy our real time chat app in azure CI/CD

#RealTimeChat #SignalR #WebRTC #Angular #TailwindCSS #AngularMaterial #DotNet

[JD-mrnv]

This is fantastic! Thank you for uploading. It's going to be a huge help for aspiring app developers

[Binanceentity]

Please after building this application and after hosting, how do I embed this chat app on another application sir? Please I really wanna know how to do that (I am curious)

[pointbreak]

I have such a question, will you have plans to add a group for several people to the general chat and group call?

[muhammadyousufsaleem]

Sir can you please tell me will more video upload or not and more videos ki pending or all is complete this series ?

[Rorrnaisloved]

Hello Pushpa. Please there are few issues I am having. I dont know if it is coming from my code or if it is from your own end. These are my issues/problems:
1) I successfully built this project with you till the very end where you implemented the VIDEO CALLING but my issue is that, why is it that the message I sent to a particular user keeps on broadcasting to other users I didnt even chat? Why is that?
2) Why is that If i should click on that same user I chatted, that is, let's take for an instance that I want to chat a user and I decided to click on the user in other to chat the user, but when i click on that particular user in other to chat with that same user (already I have sent a message to the user), the message I sent last will keep on mutiplying. e.g Me: "How are you", when I click on that user again, the message will add another one without me sending another message. Why?
3) Why is that if a user is yes it will surely indicate that the user is typing but when the user stops typing, it will still show that the user is typing.... Why? When it will stop showing that the user is typing is when I type and stop again (it will stop) but when i leave my keypad/keyboard without not typing, it will indicate that the user is typing... why plssss? This are my problem PUSHPA.
4) Please can you create a group chat and implement normal call? You have implemented video call but I want you to implement normal call sir. Thanks.

Please I want you to answer my questions sir. 🙏

[davispalla]

Wonderful! Do you have anything that works with maps and geospatial databases?

[Anand-]

Bro, thanks for this fantastic project.unlike others always pasting the code snippets which they already done. I have a request, for webRTC in angular what are the functions that you mostly use, can you list them and give us the small snippets to understand as a beginner, please.
you earned a subscribe from me😄😃. keep going with few more wonderful projects like this.

[grimmersnee]

Hey Pushpa, nice job brotha. I am having issues trying to pay for your code on the site you are using. Do you have an alternative? Seems to be PayPal errors..

[code-luiz]

Thanks for your help man! Im learning angular and this will help a lot! This content will be saved?

[WayfaringTenno]

One of the best projects I've ever seen

[_sourinchatterjee]

Can you please make this video using controller based architecture ? Please

[nimrahtariqcsstudent]

Can anyone tell me how to be consistent, I can't follow long series but they are good 😔

[AnuRani-ut]

my app login is not working after adding @angular/pwa.what to do?