Structuring a Blazor WASM project well from the start saves significant refactoring effort later.

Recommended Folder Structure

Client/
├── Pages/           # Routable page components
├── Shared/          # Layout, nav, reusable UI
├── Components/      # Business-domain components
├── Services/        # HttpClient wrappers, logic
├── State/           # AppState, Fluxor stores
└── wwwroot/         # Static assets, CSS, JS

Server/
├── Controllers/     # REST API controllers
├── Services/        # Business logic, EF Core
└── Program.cs

Shared/
├── Models/          # Shared domain models
└── Interfaces/      # Shared service contracts

Service Layer Pattern

Never call HttpClient directly from components. Always create a service:

public class ProductService : IProductService
{
    private readonly HttpClient _http;
    public ProductService(HttpClient http) => _http = http;

    public Task<List<Product>> GetAllAsync() =>
        _http.GetFromJsonAsync<List<Product>>("/api/products")!;
}

Component Size Rule

• Split components that exceed ~150 lines
• Move all business logic to services
• Keep @code blocks to orchestration only

Reference:

Wikipedia: Software Architecture

https://en.wikipedia.org/wiki/Software_architecture