pos-system/apps/web-client-base-net/docs/en/ARCHITECTURE.md

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

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