In this comprehensive full-stack development tutorial, we walk you through the entire process of building a feature-rich web application from scratch, using the latest technologies such as .NET Core 8 for the backend and Angular 18 for the frontend. Whether you're an aspiring developer or a seasoned professional looking to refine your skills, this video has everything you need to know to build a production-ready app.
What you’ll learn:
Backend Development with .NET Core 8 Web API: We start by setting up the backend with .NET Core 8, building APIs that handle data processing, and integrating with Azure SQL Database for secure and scalable storage.
Frontend Development with Angular 18: You'll learn how to structure your frontend application using Angular 18, implementing a seamless user experience with modern UI practices and handling state, routing, and HTTP requests.
Azure Services Integration: Discover how to leverage Microsoft Azure to take your application to the next level:
Azure Web App Service: Host your app on Azure's reliable and scalable infrastructure.
Azure Storage Account: Learn how to upload and serve images from Azure storage.
Application Insights: Monitor your app with Azure Application Insights for telemetry and diagnostics.
Azure SQL Database: Store and manage your app’s data securely with Azure’s managed SQL service.
Authentication with Azure AD B2C: Master Azure AD B2C to implement authentication and authorization for your users. You'll also learn how to customize claims using API Connectors, adding flexibility to your authentication workflows.
Sending Emails with SendGrid: Easily send transactional emails from your app using SendGrid integrated with your .NET backend.
Azure Functions: Implement serverless functionality with Azure Functions to handle background tasks efficiently, scaling with demand.
Continuous Integration/Continuous Deployment (CI/CD) with Azure DevOps: We’ll walk you through setting up Azure DevOps pipelines for automated testing and deployment, making sure your app is always up to date and live with just a few clicks.
Full Demo of the Completed Application: Finally, you’ll see the full app in action with features like user registration, secure login, data management, image uploads, and email notifications. We’ll demonstrate real-world use cases, including user management with Azure AD B2C, submitting forms, and seamless data flow between the backend and frontend.
Technologies Covered:
Backend: .NET Core 8 Web API
Frontend: Angular 18
Cloud Infrastructure: Azure Web App Service, Azure SQL Database, Azure Storage, Application Insights
Authentication: Azure AD B2C with custom claims
Email: SendGrid for sending emails
Serverless Computing: Azure Functions
CI/CD Pipelines: Azure DevOps
This video provides everything you need to build a production-ready full-stack application and deploy it using modern cloud technologies.
Repo:
github.com/lea...
github.com/lea...
github.com/lea...
Video Timestamp:
Project Overview: 00:00:42 - 00:08:50
Database Design: 00:08:50 - 00:37:00
Setup .NET Core 8 Web API Project: 00:37:00 - 01:02:15
Setup Angular 18 Project: 01:02:15 - 01:22:25
Build Web API HTTP GET Endpoints: 01:22:25 - 02:26:00
Angular Basics - Data Binding: 02:26:00 - 02:45:15
Angular Basics - Directives: 02:45:15 - 02:59:00
Angular Components, Routing, Pages: 02:59:00 - 03:58:00
Angular HTTP Services, Spinner, Toaster & More: 03:58:00 - 04:16:20
Azure Free SQL Database: 04:16:20 - 04:29:06
Azure App Service (Web App for Angular & Web API Apps): 04:29:06 - 04:39:15
Azure App Insights & Serilog for .NET Web API: 04:39:15 - 04:48:55
CI/CD for Web API & Deployment to Azure: 04:48:55 - 05:00:06
CI/CD for Angular & Deployment to Azure: 05:00:06 - 05:16:30
Azure AD B2C Integration for .NET Core & Angular: 05:16:30 - 05:50:40
Azure AD B2C Custom Claims with Azure Functions & API Connectors: 05:50:40 - 06:23:45
CI/CD for Azure Functions (Deploy to Azure): 06:23:45 - 06:38:52
SQL Trigger & SendGrid Email Integration using Azure Functions: 06:38:52 - 06:55:05
.NET Core Web API CRUD Operations: 06:55:05 - 07:38:55
.NET Core Health Checks: 07:38:55 - 08:06:20
Complete Web API CRUD for the Entire App: 08:06:20 - 08:34:15
Upload Image to Azure Storage (Using Angular & Web API): 08:34:15 - 08:49:55
Angular 18 Reactive Forms: 08:49:55 - 09:14:02
Angular 18 Auth Guards (Protect Routes): 09:14:02 - End
Please post your questions in the comment section and I will be happy to answer your questions.
Subscribe for more useful videos just like this: / @learnsmartcoding
Happy coding!
21 окт 2024
