# WebClientBase Architecture

Base frontend architecture for GoodGo Platform using Blazor WebAssembly with BFF Pattern.

## Overview

This application implements the **Backend for Frontend (BFF)** pattern with YARP reverse proxy:

- **Client**: Blazor WebAssembly running in browser
- **BFF**: ASP.NET Core server proxying requests to microservices
- **Shared**: Common DTOs with validation (shared between Client/BFF)

## Architecture Diagram

```mermaid
flowchart TD
    subgraph Browser["🌐 Browser"]
        C[Blazor WASM Client]
    end
    
    subgraph BFF["⚙️ BFF Layer"]
        Y[YARP Reverse Proxy]
        SA[Static Assets]
    end
    
    subgraph MS["🔧 Microservices"]
        IAM[IAM Service]
        MER[Merchant Service]
        CAT[Catalog Service]
        ORD[Order Service]
    end
    
    C -->|Static Files| SA
    C -->|/api/*| Y
    Y -->|/api/iam/**| IAM
    Y -->|/api/merchants/**| MER
    Y -->|/api/catalog/**| CAT
    Y -->|/api/orders/**| ORD
    
    style C fill:#3498DB,color:#ECF0F1,stroke:#2980B9,stroke-width:3px
    style Y fill:#8E44AD,color:#ECF0F1,stroke:#7D3C98,stroke-width:2px
    style SA fill:#34495E,color:#ECF0F1,stroke:#2C3E50,stroke-width:2px
    style IAM fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
    style MER fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
    style CAT fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
    style ORD fill:#27AE60,color:#ECF0F1,stroke:#229954,stroke-width:2px
```

## Project Structure

```
web-client-base-net/
├── src/
│   ├── WebClientBase.Client/    # Blazor WebAssembly
│   │   ├── Layout/              # MainLayout, NavMenu
│   │   ├── Pages/               # Razor pages
│   │   └── wwwroot/             # Static assets, CSS
│   ├── WebClientBase.Server/    # BFF + YARP Proxy
│   │   ├── Program.cs           # App configuration
│   │   └── yarp.json            # Proxy routes
│   └── WebClientBase.Shared/    # Shared DTOs
│       └── DTOs/                # ProductDto, UserDto
└── docs/
```

## Shared DTOs

| DTO | Purpose | Validation |
|-----|---------|------------|
| `ProductDto` | Product data | Name (3-100 chars), Price (0.01-1B) |
| `RegisterDto` | User registration | Email, Password (8+ chars, complexity) |
| `LoginDto` | User login | Email, Password |
| `ApiResponse<T>` | Standard response wrapper | Success, Data, Error |

## YARP Routes

| Route | Target Service | Port |
|-------|---------------|------|
| `/api/iam/**` | IAM Service | 5101 |
| `/api/merchants/**` | Merchant Service | 5102 |
| `/api/catalog/**` | Catalog Service | 5103 |
| `/api/orders/**` | Order Service | 5104 |

## Blazor Pages

| Page | Route | Description |
|------|-------|-------------|
| Home | `/` | Landing page |
| Products | `/products` | Product management |
| Auth | `/auth` | Login/Register |
| Counter | `/counter` | Demo component |
| Weather | `/weather` | Demo data fetch |

## Key Technologies

- **.NET 10** - Latest framework
- **Blazor WebAssembly** - Client-side SPA
- **YARP** - Reverse proxy for microservices
- **Data Annotations** - Shared validation