# WebClientBase - Blazor Web App .NET 10

Base frontend web application cho GoodGo Platform được xây dựng với Blazor WebAssembly + BFF Pattern.

## Architecture / Kiến trúc

```
┌─────────────────────────────────────────────────────────────────────┐
│                           Browser                                    │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │              Blazor WebAssembly Client                        │   │
│  └─────────────────────────────────────────────────────────────┘   │
└────────────────────────────────┬────────────────────────────────────┘
                                 │ /api/*
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│                    BFF (Backend for Frontend)                        │
│                   WebClientBase.Server + YARP                        │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Routes:  /api/iam/**    → iam-service                        │   │
│  │          /api/merchants/** → merchant-service                │   │
│  │          /api/catalog/**   → catalog-service                 │   │
│  │          /api/orders/**    → order-service                   │   │
│  └─────────────────────────────────────────────────────────────┘   │
└────────────────────────────────┬────────────────────────────────────┘
                                 │ Internal Network
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        Microservices                                 │
│   ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐        │
│   │   IAM    │   │ Merchant │   │ Catalog  │   │  Order   │        │
│   │ :5101    │   │  :5102   │   │  :5103   │   │  :5104   │        │
│   └──────────┘   └──────────┘   └──────────┘   └──────────┘        │
└─────────────────────────────────────────────────────────────────────┘
```

## Tech Stack

| Layer | Technology |
|-------|------------|
| Client | Blazor WebAssembly (.NET 10) |
| BFF | ASP.NET Core + YARP Reverse Proxy |
| Shared | Class Library với Data Annotations |
| Styling | CSS Variables, Dark Mode |

## Project Structure / Cấu trúc dự án

```
web-client-base-net/
├── WebClientBase.slnx              # Solution file
├── src/
│   ├── WebClientBase.Client/       # Blazor WebAssembly
│   │   ├── Layout/                 # MainLayout, NavMenu
│   │   ├── Pages/                  # Razor pages
│   │   └── wwwroot/css/            # Design System CSS
│   ├── WebClientBase.Server/       # BFF with YARP Proxy
│   │   ├── Program.cs              # YARP configuration
│   │   └── yarp.json               # Routes configuration
│   └── WebClientBase.Shared/       # Shared Library
│       └── DTOs/                   # Data Transfer Objects
└── Dockerfile
```

## Getting Started / Bắt đầu

```bash
# Navigate to project
cd apps/web-client-base-net

# Restore packages
dotnet restore

# Run BFF Server (hosts Blazor client + YARP proxy)
dotnet run --project src/WebClientBase.Server

# Open browser
# http://localhost:5091
```

## BFF Routes Configuration

Routes được cấu hình trong `yarp.json`:

| Client Route | Proxied To | Description |
|--------------|------------|-------------|
| `/api/iam/**` | `http://localhost:5101/` | Identity & Access Management |
| `/api/merchants/**` | `http://localhost:5102/` | Merchant Service |
| `/api/catalog/**` | `http://localhost:5103/` | Catalog Service |
| `/api/orders/**` | `http://localhost:5104/` | Order Service |

> **Note:** Addresses có thể override qua environment variables trong production.

## Related Skills

- [API Aggregation](../../.agent/skills/api-aggregation/SKILL.md) - BFF Pattern
- [Project Rules](../../.agent/skills/project-rules/SKILL.md)