<?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 21 Project Structure" id="project-setup">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="Angular 21 — Feature-Based Clean Architecture Folder Structure" style="text;html=1;strokeColor=none;fillColor=none;align=center;fontSize=16;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="20" width="900" height="40" as="geometry" />
        </mxCell>

        <!-- Root -->
        <mxCell id="root" value="📁 techshop/ (Nx Monorepo Root)" style="rounded=1;fillColor=#1a1a2e;fontColor=#ffffff;strokeColor=#0f3460;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="380" y="80" width="320" height="40" as="geometry" />
        </mxCell>

        <!-- Apps -->
        <mxCell id="apps" value="📁 apps/" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="160" width="280" height="220" as="geometry" />
        </mxCell>
        <mxCell id="app-shell" value="📁 shell/  (Angular 21 App Shell)&lt;br/&gt;app.config.ts&lt;br/&gt;app.routes.ts&lt;br/&gt;main.ts (zoneless)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;" vertex="1" parent="apps">
          <mxGeometry x="20" y="40" width="240" height="70" as="geometry" />
        </mxCell>
        <mxCell id="app-e2e" value="📁 shell-e2e/  (Playwright E2E)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;" vertex="1" parent="apps">
          <mxGeometry x="20" y="130" width="240" height="50" as="geometry" />
        </mxCell>

        <!-- Libs -->
        <mxCell id="libs" value="📁 libs/ (Feature Libraries)" style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="400" y="160" width="680" height="320" as="geometry" />
        </mxCell>

        <mxCell id="lib-catalog" value="📁 catalog/&lt;br/&gt;feature-product-list/&lt;br/&gt;feature-product-detail/&lt;br/&gt;data-access/ (signals + API)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=11;" vertex="1" parent="libs">
          <mxGeometry x="20" y="50" width="190" height="80" as="geometry" />
        </mxCell>

        <mxCell id="lib-cart" value="📁 cart/&lt;br/&gt;feature-cart/&lt;br/&gt;feature-checkout/&lt;br/&gt;data-access/" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=11;" vertex="1" parent="libs">
          <mxGeometry x="230" y="50" width="190" height="80" as="geometry" />
        </mxCell>

        <mxCell id="lib-orders" value="📁 orders/&lt;br/&gt;feature-order-list/&lt;br/&gt;feature-order-detail/&lt;br/&gt;data-access/" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=11;" vertex="1" parent="libs">
          <mxGeometry x="440" y="50" width="190" height="80" as="geometry" />
        </mxCell>

        <mxCell id="lib-shared-ui" value="📁 shared/ui/&lt;br/&gt;buttons, cards, modals&lt;br/&gt;tables, forms&lt;br/&gt;Storybook" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFF8E1;strokeColor=#F9A825;fontSize=11;" vertex="1" parent="libs">
          <mxGeometry x="20" y="160" width="190" height="80" as="geometry" />
        </mxCell>

        <mxCell id="lib-api-client" value="📁 shared/api-client/&lt;br/&gt;Kiota-generated&lt;br/&gt;TypeScript client&lt;br/&gt;(auto-updated in CI)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FCE4EC;strokeColor=#C62828;fontSize=11;" vertex="1" parent="libs">
          <mxGeometry x="230" y="160" width="190" height="80" as="geometry" />
        </mxCell>

        <mxCell id="lib-auth" value="📁 shared/auth/&lt;br/&gt;JWT interceptor&lt;br/&gt;auth guards&lt;br/&gt;auth signal store" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F3E5F5;strokeColor=#7B1FA2;fontSize=11;" vertex="1" parent="libs">
          <mxGeometry x="440" y="160" width="190" height="80" as="geometry" />
        </mxCell>

        <!-- CI / Tooling -->
        <mxCell id="tooling" value="📁 .github/workflows/ + nx.json + eslint.config.mjs + vitest.config.ts" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="200" y="520" width="680" height="40" as="geometry" />
        </mxCell>

        <!-- Arrows -->
        <mxCell id="a1" edge="1" source="root" target="apps" style="edgeStyle=orthogonalEdgeStyle;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a2" edge="1" source="root" target="libs" style="edgeStyle=orthogonalEdgeStyle;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a3" edge="1" source="app-shell" target="lib-catalog" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#1565C0;dashed=1;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>

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