Initial commit

skills/ln-115-presentation-creator/references/tabs/tab_architecture.html

@@ -0,0 +1,177 @@
+<!-- SCOPE: System Structure Visualization (Diagrams Only) -->
+<!-- INCLUDES: C4 diagrams (Context/Container/Component), Deployment diagram, brief captions -->
+<!-- EXCLUDES: Decision rationale → ADRs, Requirements → Requirements tab, API details → Technical Spec, Non-Functional Requirements (forbidden; keep quality topics as architecture narrative only) -->
+
+<h2>Architecture</h2>
+
+<!-- PLACEHOLDER: {{C4_CONTEXT}} -->
+<!-- EXAMPLE START: Remove this block after replacing placeholder -->
+<section class="c4-diagrams">
+    <h3>System Context (C4 Level 1)</h3>
+    <p>High-level view of the e-commerce platform and its external dependencies.</p>
+    <div class="mermaid">
+graph TD
+    Customer[Customer]
+    Admin[Administrator]
+    PaymentGateway[Payment Gateway<br/>Stripe]
+    EmailService[Email Service<br/>SendGrid]
+
+    System[E-Commerce Platform]
+
+    Customer -->|Browse products,<br/>Place orders| System
+    Admin -->|Manage products,<br/>View analytics| System
+    System -->|Process payments| PaymentGateway
+    System -->|Send notifications| EmailService
+    </div>
+<!-- EXAMPLE END -->
+
+<!-- PLACEHOLDER: {{C4_CONTAINER}} -->
+<!-- EXAMPLE START: Remove this block after replacing placeholder -->
+    <h3>Container Diagram (C4 Level 2)</h3>
+    <p>Containers within the e-commerce platform showing technologies and communication.</p>
+    <div class="mermaid">
+graph TD
+    Customer[Customer<br/>Web Browser]
+    Admin[Administrator<br/>Web Browser]
+
+    WebApp[Web Application<br/>React 18 SPA]
+    API[REST API<br/>Node.js + Express]
+    Database[(Database<br/>PostgreSQL 15)]
+    Cache[(Cache<br/>Redis)]
+
+    Customer -->|HTTPS| WebApp
+    Admin -->|HTTPS| WebApp
+    WebApp -->|JSON/HTTPS| API
+    API -->|SQL| Database
+    API -->|Cache queries| Cache
+    </div>
+<!-- EXAMPLE END -->
+
+<!-- PLACEHOLDER: {{C4_COMPONENT}} -->
+<!-- EXAMPLE START: Remove this block after replacing placeholder -->
+    <h3>Component Diagram (C4 Level 3) - Optional for Technical Audiences</h3>
+    <p>Components within the REST API container showing internal structure.</p>
+    <div class="mermaid">
+graph TD
+    API[REST API Container]
+
+    AuthController[Authentication<br/>Controller]
+    ProductController[Product Catalog<br/>Controller]
+    CartController[Shopping Cart<br/>Controller]
+    OrderController[Order<br/>Controller]
+
+    AuthService[Auth Service]
+    ProductService[Product Service]
+    CartService[Cart Service]
+    OrderService[Order Service]
+
+    ProductRepo[Product<br/>Repository]
+    UserRepo[User<br/>Repository]
+    CartRepo[Cart<br/>Repository]
+    OrderRepo[Order<br/>Repository]
+
+    Database[(PostgreSQL)]
+    Cache[(Redis)]
+
+    ProductController --> ProductService
+    CartController --> CartService
+    OrderController --> OrderService
+    AuthController --> AuthService
+
+    ProductService --> ProductRepo
+    CartService --> CartRepo
+    OrderService --> OrderRepo
+    AuthService --> UserRepo
+
+    ProductRepo --> Database
+    UserRepo --> Database
+    CartRepo --> Cache
+    OrderRepo --> Database
+    </div>
+<!-- EXAMPLE END -->
+
+<!-- PLACEHOLDER: {{DEPLOYMENT_DIAGRAM}} -->
+<!-- EXAMPLE START: Remove this block after replacing placeholder -->
+    <h3>Deployment Diagram</h3>
+    <p>Infrastructure and deployment architecture on AWS.</p>
+    <div class="mermaid">
+graph TD
+    subgraph "AWS Cloud"
+        subgraph "Public Subnet"
+            ALB[Application Load<br/>Balancer]
+            CloudFront[CloudFront CDN]
+        end
+
+        subgraph "Private Subnet"
+            ECS1[ECS Container 1<br/>Node.js API]
+            ECS2[ECS Container 2<br/>Node.js API]
+
+            RDS[(RDS PostgreSQL<br/>Primary)]
+            RDSReplica[(RDS PostgreSQL<br/>Read Replica)]
+
+            ElastiCache[(ElastiCache<br/>Redis)]
+        end
+
+        subgraph "Storage"
+            S3[S3 Bucket<br/>Static Assets]
+        end
+    end
+
+    CloudFront --> S3
+    ALB --> ECS1
+    ALB --> ECS2
+    ECS1 --> RDS
+    ECS2 --> RDS
+    ECS1 --> RDSReplica
+    ECS2 --> RDSReplica
+    ECS1 --> ElastiCache
+    ECS2 --> ElastiCache
+    </div>
+</section>
+<!-- EXAMPLE END -->
+
+<!-- PLACEHOLDER: {{ARCHITECTURE_NOTES}} -->
+<!-- EXAMPLE START: Remove this block after replacing placeholder -->
+<section class="architecture-notes">
+    <h3>Key Architecture Highlights</h3>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Aspect</th>
+                <th>Approach</th>
+                <th>Rationale</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Architecture Pattern</td>
+                <td>Modular Monolith</td>
+                <td>Clear domain boundaries (Auth, Catalog, Cart, Orders) - see ADR-001 in Requirements</td>
+            </tr>
+            <tr>
+                <td>API Design</td>
+                <td>Stateless API</td>
+                <td>Enables horizontal scaling without session affinity</td>
+            </tr>
+            <tr>
+                <td>Database Strategy</td>
+                <td>PostgreSQL with read replicas</td>
+                <td>ACID transactions + scalability through read replicas</td>
+            </tr>
+            <tr>
+                <td>Caching</td>
+                <td>Redis</td>
+                <td>Session/cart data and frequently accessed product catalog</td>
+            </tr>
+            <tr>
+                <td>Infrastructure</td>
+                <td>Docker containers</td>
+                <td>Cloud-native orchestration with Kubernetes</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <p><em>For detailed quality attributes (Performance, Security, Scalability, Maintainability), see requirements.md in docs/project/.</em></p>
+</section>
+<!-- EXAMPLE END -->