<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="Electron" modified="2026-02-23T08:00:00.000Z" agent="draw.io" version="24.0.0">
  <diagram name="Angular Ecommerce Stack" id="series-overview">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="TechShop — Angular 21 + .NET 10 Ecommerce Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#1a1a2e;" vertex="1" parent="1">
          <mxGeometry x="100" y="20" width="970" height="40" as="geometry" />
        </mxCell>

        <!-- CLIENT LAYER -->
        <mxCell id="client-bg" value="Client Layer" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;fontSize=13;" vertex="1" parent="1">
          <mxGeometry x="100" y="80" width="970" height="140" as="geometry" />
        </mxCell>

        <!-- Angular 21 App -->
        <mxCell id="angular-app" value="&lt;b&gt;Angular 21 App&lt;/b&gt;&lt;br/&gt;Storefront (SSR) + Admin (CSR)&lt;br/&gt;Signals · Zoneless · @defer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=12;" vertex="1" parent="client-bg">
          <mxGeometry x="30" y="50" width="280" height="70" as="geometry" />
        </mxCell>

        <!-- Mobile App -->
        <mxCell id="mobile-app" value="&lt;b&gt;Mobile App&lt;/b&gt;&lt;br/&gt;iOS / Android&lt;br/&gt;Shared .NET 10 API" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=12;" vertex="1" parent="client-bg">
          <mxGeometry x="350" y="50" width="240" height="70" as="geometry" />
        </mxCell>

        <!-- B2B Admin -->
        <mxCell id="admin-portal" value="&lt;b&gt;GitHub Copilot&lt;/b&gt;&lt;br/&gt;Team AI Acceleration&lt;br/&gt;Workspace Instructions" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F5E9;strokeColor=#388E3C;fontSize=12;" vertex="1" parent="client-bg">
          <mxGeometry x="630" y="50" width="280" height="70" as="geometry" />
        </mxCell>

        <!-- API LAYER -->
        <mxCell id="api-bg" value="API Layer — .NET 10 Minimal APIs" style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;fontSize=13;" vertex="1" parent="1">
          <mxGeometry x="100" y="260" width="970" height="140" as="geometry" />
        </mxCell>

        <!-- OpenAPI -->
        <mxCell id="openapi" value="&lt;b&gt;OpenAPI 3.1&lt;/b&gt;&lt;br/&gt;Auto-generated TypeScript&lt;br/&gt;client via Kiota" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=12;" vertex="1" parent="api-bg">
          <mxGeometry x="30" y="50" width="200" height="70" as="geometry" />
        </mxCell>

        <!-- JWT Auth -->
        <mxCell id="auth" value="&lt;b&gt;Auth — JWT + Refresh&lt;/b&gt;&lt;br/&gt;Angular Interceptors&lt;br/&gt;.NET Identity / Keycloak" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=12;" vertex="1" parent="api-bg">
          <mxGeometry x="260" y="50" width="200" height="70" as="geometry" />
        </mxCell>

        <!-- SignalR -->
        <mxCell id="signalr" value="&lt;b&gt;SignalR&lt;/b&gt;&lt;br/&gt;Real-time inventory&lt;br/&gt;Order status push" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=12;" vertex="1" parent="api-bg">
          <mxGeometry x="490" y="50" width="200" height="70" as="geometry" />
        </mxCell>

        <!-- Problem Details -->
        <mxCell id="errors" value="&lt;b&gt;Problem Details RFC 9457&lt;/b&gt;&lt;br/&gt;Standardised errors&lt;br/&gt;Angular error interceptor" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=12;" vertex="1" parent="api-bg">
          <mxGeometry x="720" y="50" width="220" height="70" as="geometry" />
        </mxCell>

        <!-- APPLICATION LAYER -->
        <mxCell id="app-bg" value="Application Layer — Clean Architecture (.NET 10)" style="swimlane;startSize=30;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;fontSize=13;" vertex="1" parent="1">
          <mxGeometry x="100" y="440" width="970" height="140" as="geometry" />
        </mxCell>

        <mxCell id="domain" value="&lt;b&gt;Domain&lt;/b&gt;&lt;br/&gt;Entities · Value Objects&lt;br/&gt;Domain Events" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=12;" vertex="1" parent="app-bg">
          <mxGeometry x="30" y="50" width="200" height="70" as="geometry" />
        </mxCell>

        <mxCell id="application" value="&lt;b&gt;Application&lt;/b&gt;&lt;br/&gt;CQRS / MediatR&lt;br/&gt;FluentValidation" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=12;" vertex="1" parent="app-bg">
          <mxGeometry x="260" y="50" width="200" height="70" as="geometry" />
        </mxCell>

        <mxCell id="infrastructure" value="&lt;b&gt;Infrastructure&lt;/b&gt;&lt;br/&gt;EF Core 10 · PostgreSQL&lt;br/&gt;Redis · Payment Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=12;" vertex="1" parent="app-bg">
          <mxGeometry x="490" y="50" width="200" height="70" as="geometry" />
        </mxCell>

        <mxCell id="cicd" value="&lt;b&gt;CI/CD&lt;/b&gt;&lt;br/&gt;GitHub Actions&lt;br/&gt;Docker · Azure Container Apps" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFDE7;strokeColor=#F9A825;fontSize=12;" vertex="1" parent="app-bg">
          <mxGeometry x="720" y="50" width="220" height="70" as="geometry" />
        </mxCell>

        <!-- Arrows -->
        <mxCell id="arrow1" edge="1" source="angular-app" target="api-bg" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#1565C0;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="arrow2" edge="1" source="mobile-app" target="api-bg" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#1565C0;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="arrow3" edge="1" source="api-bg" target="app-bg" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;strokeColor=#558B2F;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- Legend -->
        <mxCell id="legend" value="&lt;b&gt;Version Reference (Feb 2026)&lt;/b&gt;&lt;br/&gt;Angular 21 (Nov 2025) · .NET 10.0.3 LTS (Feb 2026) · EF Core 10 · C# 14" style="text;html=1;strokeColor=#grey;fillColor=#f5f5f5;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontSize=11;fontColor=#333333;" vertex="1" parent="1">
          <mxGeometry x="280" y="620" width="620" height="40" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
