Full Stack Chat App: ASP.NET Core + Angular + WebRTC + SignalR Tutorial

Learn how to build a Full Stack Chat App: ASP.NET Core + Angular + WebRTC + SignalR Tutorial. In this full stack project tutorial, we cover private messaging, online status updates, and live audio/video chat integration using WebRTC. 🔗 Source Code: https://buymeacoffee.com/codewithpushpa/e/354693 📚 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