Skip to content

Commit d2293a2

Browse files
workcontrolgitworkcontrolgit
committed
update tutorial with images
1 parent ce5681e commit d2293a2

7 files changed

Lines changed: 62 additions & 110 deletions

‎docs/01-foundation.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Part 1: Foundation — Understanding the CAT Pattern
1+
# Part 1: Foundation — Understanding the CAT Pattern
22

3-
# Building Modern Web Applications with Angular, .NET, and OAuth 2.0
3+
## Building Modern Web Applications with Angular, .NET, and OAuth 2.0
44

55
**[← Back to Main Tutorial](../TUTORIAL.md)** | **[Next: Part 2 →](02-token-service-deep-dive.md)**
66

@@ -110,6 +110,9 @@ Our application consists of three main components:
110110
10. Return protected data
111111
```
112112

113+
![CAT Pattern Architecture](images/cat-pattern-architecture.png)
114+
*Figure 1: CAT Pattern architecture showing the three-tier separation of concerns*
115+
113116
---
114117

115118
## 🔐 Key Security Features
@@ -240,6 +243,15 @@ npm start
240243
* **Password:** `Pass123$`
241244
5. After successful login, you'll be redirected back to the Angular dashboard
242245

246+
![Angular Login Page](images/angular-login-page.png)
247+
*Figure 2: TalentManagement Angular application login page*
248+
249+
![IdentityServer Login](images/identityserver-login.png)
250+
*Figure 3: Duende IdentityServer authentication page*
251+
252+
![Application Dashboard](images/application-dashboard.png)
253+
*Figure 4: TalentManagement dashboard after successful authentication*
254+
243255
### Common Issues
244256

245257
**IdentityServer won't start**

‎docs/02-token-service-deep-dive.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Part 2: Token Service Deep Dive — Understanding OAuth 2.0, OpenID Connect, and Duende IdentityServer
1+
# Part 2: Token Service Deep Dive — Understanding OAuth 2.0, OpenID Connect, and Duende IdentityServer
22

3-
# Building Modern Web Applications with Angular, .NET, and OAuth 2.0
3+
## Building Modern Web Applications with Angular, .NET, and OAuth 2.0
44

55
**[← Part 1: Foundation](01-foundation.md)** | **[Tutorial Home](TUTORIAL.md)** | **[Part 3: API Resource Deep Dive →](03-api-resource-deep-dive.md)**
66

@@ -331,6 +331,9 @@ The signature is created by:
331331
3. Signing with a private key using the algorithm specified in the header
332332
4. Base64 encoding the result
333333

334+
![Token Structure](images/jwt-token-structure.png)
335+
*Figure 6: JWT token structure showing header, payload, and signature components*
336+
334337
---
335338

336339
## 🏗️ Duende IdentityServer Overview
@@ -369,6 +372,9 @@ Our IdentityServer setup consists of three main components:
369372
* Programmatic access to IdentityServer configuration
370373
* Integration with automation tools
371374

375+
![IdentityServer Admin UI](images/identityserver-admin-ui.png)
376+
*Figure 5: Duende IdentityServer Admin UI for managing clients, resources, and users*
377+
372378
---
373379

374380
## ⚙️ Configuration Deep Dive

‎docs/03-api-resource-deep-dive.md‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Part 3: API Resource Deep Dive — Clean Architecture, Entity Framework Core, and RESTful Design
1+
# Part 3: API Resource Deep Dive — Clean Architecture, Entity Framework Core, and RESTful Design
22

3-
# Building Modern Web Applications with Angular, .NET, and OAuth 2.0
3+
## Building Modern Web Applications with Angular, .NET, and OAuth 2.0
44

55
**[← Part 2: Token Service](02-token-service-deep-dive.md)** | **[Tutorial Home](TUTORIAL.md)** | **[Part 4: Angular Client Deep Dive →](04-angular-client-deep-dive.md)**
66

@@ -308,19 +308,23 @@ namespace TalentManagementAPI.Domain.Enums
308308

309309
## 💼 Application Layer
310310

311-
### CQRS Pattern with Result Wrapper
311+
### CQRS Pattern with Custom Mediator
312312

313-
The Application layer uses **CQRS (Command Query Responsibility Segregation)** to separate reads from writes, and wraps all responses in a `Result<T>` type.
313+
The Application layer uses **CQRS (Command Query Responsibility Segregation)** to separate reads from writes, implemented with a **custom mediator pattern** (not the MediatR library).
314314

315-
**Commands** — Modify state (Create, Update, Delete)
316-
**Queries** — Retrieve data (Read)
317-
**Result<T>** — Standardized response wrapper
315+
**Key Components:**
316+
* **Custom Mediator** — `TalentManagementAPI.Application.Messaging.IMediator` (custom implementation)
317+
* **Commands** — Modify state (Create, Update, Delete)
318+
* **Queries** — Retrieve data (Read)
319+
* **Result<T>** — Standardized response wrapper
320+
* **Pipeline Behaviors** — Validation, logging, caching decorators
318321

319322
### Command Example: CreateEmployee
320323

321324
**CreateEmployeeCommand.cs:**
322325

323326
```csharp
327+
using TalentManagementAPI.Application.Messaging;
324328
using TalentManagementAPI.Application.Events;
325329

326330
namespace TalentManagementAPI.Application.Features.Employees.Commands.CreateEmployee
@@ -635,6 +639,9 @@ namespace TalentManagementAPI.WebApi.Controllers.v1
635639
- Returns `IActionResult` (not strongly-typed `ActionResult<T>`)
636640
- Uses `Guid` for all entity IDs
637641

642+
![Swagger UI](images/swagger-api-endpoints.png)
643+
*Figure 7: Swagger UI showing TalentManagement API endpoints with authentication*
644+
638645
---
639646

640647
## 🔒 Authentication & Authorization
@@ -673,7 +680,7 @@ In this deep dive, we covered the **actual TalentManagement API** implementation
673680

674681
✅ **Clean Architecture** — Four layers with clear separation
675682
✅ **Domain Layer** — Value Objects (PersonName), Base Entities with Guid IDs
676-
✅ **Application Layer** — CQRS with nested handlers, Result<T> wrapper, Repository pattern
683+
✅ **Application Layer** — CQRS with custom mediator, nested handlers, Result<T> wrapper, Repository pattern
677684
✅ **Infrastructure Layer** — Generic repository with field shaping
678685
✅ **WebApi Layer** — API versioning, BaseApiController, AllowAnonymous for demos
679686
✅ **Key Patterns** — Repository, Event Dispatcher, Result wrapper, Field shaping
@@ -708,6 +715,4 @@ In this deep dive, we covered the **actual TalentManagement API** implementation
708715

709716
**Tutorial Home:** [📚 Complete Tutorial Series](TUTORIAL.md)
710717

711-
---
712718

713-
**📌 Tags:** #dotnet #cleanarchitecture #webapi #entityframeworkcore #cqrs #mediatr #restapi #authentication #repository #valueobjects #ddd #solidprinciples #guid #apiversion

‎docs/04-angular-client-deep-dive.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Part 4: Angular Client Deep Dive — Modern SPA with Material Design and OIDC
1+
# Part 4: Angular Client Deep Dive — Modern SPA with Material Design and OIDC
22

3-
# Building Modern Web Applications with Angular, .NET, and OAuth 2.0
3+
## Building Modern Web Applications with Angular, .NET, and OAuth 2.0
44

55
**[← Part 3: API Resource](03-api-resource-deep-dive.md)** | **[Tutorial Home](TUTORIAL.md)** | **[Part 5: Advanced Topics →](05-advanced-topics.md)**
66

@@ -712,6 +712,12 @@ export class EmployeeService extends BaseApiService<Employee> {
712712
* Only needs to define `endpoint` property
713713
* Can add custom methods as needed
714714

715+
![Employee List](images/employee-list-page.png)
716+
*Figure 8: TalentManagement employee list with Material Design data table*
717+
718+
![Employee Form](images/employee-form.png)
719+
*Figure 9: Create/Edit employee form with validation and Material Design components*
720+
715721
---
716722

717723
## 📝 Summary
@@ -762,6 +768,3 @@ In this deep dive, we covered the **actual TalentManagement Angular** implementa
762768

763769
**Tutorial Home:** [📚 Complete Tutorial Series](TUTORIAL.md)
764770

765-
---
766-
767-
**📌 Tags:** #angular #typescript #materialdesign #oidc #spa #rxjs #oauth2 #angularauth #webdevelopment #frontend #authentication #pkce #httpinterceptor #guards #dependencyinjection

‎docs/05-advanced-topics.md‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Part 5: Advanced Topics — Git Submodules, Testing, Deployment, and Production
1+
# Part 5: Advanced Topics — Git Submodules, Testing, Deployment, and Production
22

3-
# Building Modern Web Applications with Angular, .NET, and OAuth 2.0
3+
## Building Modern Web Applications with Angular, .NET, and OAuth 2.0
44

55
**[← Part 4: Angular Client](04-angular-client-deep-dive.md)** | **[Tutorial Home](TUTORIAL.md)** | **[Part 6: Real-World Features →](06-real-world-features.md)**
66

@@ -1092,6 +1092,3 @@ In this advanced topics guide, we covered:
10921092

10931093
**Tutorial Home:** [📚 Complete Tutorial Series](TUTORIAL.md)
10941094

1095-
---
1096-
1097-
**📌 Tags:** #docker #cicd #github-actions #azure #aws #testing #playwright #monitoring #logging #performance #security #devops #deployment #containerization #submodules

‎docs/06-real-world-features.md‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Part 6: Real-World Features — CRUD Operations, Dashboard, Search, and Analytics
1+
# Part 6: Real-World Features — CRUD Operations, Dashboard, Search, and Analytics
22

3-
# Building Modern Web Applications with Angular, .NET, and OAuth 2.0
3+
## Building Modern Web Applications with Angular, .NET, and OAuth 2.0
44

55
**[← Part 5: Advanced Topics](05-advanced-topics.md)** | **[Tutorial Home](TUTORIAL.md)**
66

@@ -11,6 +11,7 @@
1111
This final part demonstrates real-world features aligned with the **actual TalentManagement project** implementation:
1212

1313
* **Complete CRUD Operations** — Full Create, Read, Update, Delete workflows with Guid IDs
14+
* **Custom Mediator Pattern** — Using custom IMediator implementation (not MediatR library)
1415
* **Repository Pattern** — Using IEmployeeRepositoryAsync instead of direct DbContext
1516
* **Result Wrapper** — Handling Result<T> and PagedResult<T> responses
1617
* **Base API Service** — Generic service pattern for Angular
@@ -26,9 +27,9 @@ This final part demonstrates real-world features aligned with the **actual Talen
2627
**GetEmployeeByIdQuery.cs:**
2728

2829
```csharp
29-
using MediatR;
30-
using TalentManagementAPI.Application.Common.Interfaces;
31-
using TalentManagementAPI.Application.DTOs;
30+
using TalentManagementAPI.Application.Messaging;
31+
using TalentManagementAPI.Application.Interfaces.Repositories;
32+
using Mapster;
3233

3334
namespace TalentManagementAPI.Application.Features.Employees.Queries.GetEmployeeById
3435
{
@@ -72,7 +73,7 @@ namespace TalentManagementAPI.Application.Features.Employees.Queries.GetEmployee
7273
**UpdateEmployeeCommand.cs:**
7374

7475
```csharp
75-
using MediatR;
76+
using TalentManagementAPI.Application.Messaging;
7677
using TalentManagementAPI.Application.Events;
7778
using TalentManagementAPI.Domain.ValueObjects;
7879

@@ -143,7 +144,7 @@ namespace TalentManagementAPI.Application.Features.Employees.Commands.UpdateEmpl
143144
**DeleteEmployeeByIdCommand.cs:**
144145

145146
```csharp
146-
using MediatR;
147+
using TalentManagementAPI.Application.Messaging;
147148

148149
namespace TalentManagementAPI.Application.Features.Employees.Commands.DeleteEmployeeById
149150
{
@@ -181,13 +182,17 @@ namespace TalentManagementAPI.Application.Features.Employees.Commands.DeleteEmpl
181182
```
182183

183184
**Key Features:**
185+
- Uses **custom mediator pattern** (`TalentManagementAPI.Application.Messaging`, not MediatR library)
184186
- Uses **Repository pattern** (`IEmployeeRepositoryAsync`)
185187
- Returns `Result<T>` wrapper (not bare values)
186188
- Uses `Guid` for all entity IDs
187189
- Updates **PersonName** value object
188190
- Publishes **domain events** on changes
189191
- Proper null checking with failure results
190192

193+
![CRUD Operations](images/crud-operations.png)
194+
*Figure 10: TalentManagement CRUD operations - Create, Read, Update, Delete employee records*
195+
191196
---
192197

193198
### Frontend: Complete CRUD with BaseApiService
@@ -602,6 +607,9 @@ this.employeeService.getAllPaged(params).subscribe({
602607
* Client controls response payload
603608
* Security: only allowed fields can be requested
604609

610+
![Search and Filtering](images/search-filtering-ui.png)
611+
*Figure 11: Advanced search and filtering with pagination and field shaping*
612+
605613
---
606614

607615
## 📝 Summary
@@ -654,6 +662,3 @@ In this final part, we covered **real-world features** aligned with the actual p
654662

655663
**Start from beginning:** [Part 1: Foundation →](01-foundation.md)
656664

657-
---
658-
659-
**📌 Tags:** #crud #repository #valueobjects #domainevents #result-wrapper #fieldshaping #pagination #cleanarchitecture #angular #dotnet #typescript #csharp #guid #baseservice #production

‎docs/TUTORIAL.md‎

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -117,87 +117,11 @@ Learn how to build secure, scalable enterprise applications using the **CAT Patt
117117
2. Continue with **[Part 2: Token Service](02-token-service-deep-dive.md)** to understand authentication
118118
3. Follow the series sequentially for best results
119119

120-
### For Reference
121-
* Jump to specific topics using the table of contents in each document
122-
* Use the search function to find specific concepts
123-
* Refer back to examples and code snippets
124-
125120
---
126121

127122
## 🔗 Navigation
128123

129124
* **[Repository README](../README.md)** — Project overview and setup
130-
* **[Developer Guide (CLAUDE.md)](../CLAUDE.md)** — Technical reference for contributors
131125
* **[Setup Submodules Guide](../SETUP-SUBMODULES.md)** — Git submodules setup instructions
132126

133-
---
134-
135-
## 📝 Documentation Format
136-
137-
### Main Tutorial (TUTORIAL.md)
138-
* **Format:** Comprehensive reference with tables
139-
* **Purpose:** Complete technical documentation
140-
* **Audience:** Developers working with the codebase
141-
* **Best for:** Reference, copy-paste examples, technical details
142-
143-
### Tutorial Series (docs/*.md)
144-
* **Format:** Reader-friendly, no tables
145-
* **Purpose:** Step-by-step learning and publishing
146-
* **Audience:** Learners, blog readers, tutorial followers
147-
* **Best for:** Learning flow, Medium.com publishing, sharing
148-
149-
---
150-
151-
## 🚀 Quick Links
152-
153-
**Getting Started:**
154-
* [Prerequisites](01-foundation.md#-getting-started)
155-
* [Quick Start Guide](01-foundation.md#quick-start-running-all-components)
156-
* [First Login](01-foundation.md#first-login)
157-
158-
**Understanding Architecture:**
159-
* [CAT Pattern Overview](01-foundation.md#-what-is-the-cat-pattern)
160-
* [High-Level Architecture](01-foundation.md#-high-level-architecture)
161-
* [Authentication Flow](01-foundation.md#authentication-flow)
162-
163-
**Component Details:**
164-
* [Component Deep Dive](01-foundation.md#-component-deep-dive)
165-
* [Angular Client](01-foundation.md#1-angular-client-presentation-tier)
166-
* [API Resource](01-foundation.md#2-api-resource-business-logic-tier)
167-
* [Token Service](01-foundation.md#3-token-service-authentication-tier)
168-
169-
**Authentication Deep Dive:**
170-
* [OAuth 2.0 Fundamentals](02-token-service-deep-dive.md#-oauth-20-fundamentals)
171-
* [OpenID Connect](02-token-service-deep-dive.md#-openid-connect-oidc)
172-
* [Understanding Tokens](02-token-service-deep-dive.md#-understanding-tokens)
173-
* [Security Best Practices](02-token-service-deep-dive.md#-security-best-practices)
174-
175-
**API Development:**
176-
* [Clean Architecture](03-api-resource-deep-dive.md#-clean-architecture-fundamentals)
177-
* [CQRS with MediatR](03-api-resource-deep-dive.md#-application-layer)
178-
* [Entity Framework Core](03-api-resource-deep-dive.md#-infrastructure-layer)
179-
180-
**Angular Development:**
181-
* [OIDC Authentication](04-angular-client-deep-dive.md#-oidc-authentication)
182-
* [API Communication](04-angular-client-deep-dive.md#-api-communication)
183-
184-
**Advanced Topics:**
185-
* [Git Submodules Workflow](05-advanced-topics.md#-git-submodules-deep-dive)
186-
* [Docker & Docker Compose](05-advanced-topics.md#-docker-containerization)
187-
* [CI/CD with GitHub Actions](05-advanced-topics.md#-cicd-pipelines)
188-
* [Azure Deployment](05-advanced-topics.md#-production-deployment)
189-
190-
**Real-World Features:**
191-
* [Complete CRUD](06-real-world-features.md#-complete-crud-implementation)
192-
* [Result Wrapper Handling](06-real-world-features.md#-result-wrapper-handling)
193-
* [Advanced Search with Field Shaping](06-real-world-features.md#-advanced-search-with-field-shaping)
194-
195-
---
196-
197-
## 📌 Tags
198-
199-
`#angular` `#dotnet` `#oauth2` `#openidconnect` `#identityserver` `#webdevelopment` `#authentication` `#security` `#cleanarchitecture` `#typescript` `#csharp` `#enterpriseapplications` `#fullstack` `#spa` `#jwt`
200-
201-
---
202127

203-
*Updated: February 2026*

0 commit comments

Comments
 (0)