Skip to content

Generated SaaS UI

Target Architecture — Final-State Design

This page describes the generated user experience of a SaaS Product. Portals are Blazor microfrontend compositions generated from ConnectSoft.Blazor.ShellTemplate and ConnectSoft.Blazor.MicrofrontendLibraryTemplate, using the shared ConnectSoft.Blazor.UIKit, produced by the Frontend Developer Agent. An optional mobile client is generated from ConnectSoft.MauiBaseTemplate.

A generated product ships two web portals — an Admin Portal for tenant administrators and platform operators, and a Customer Portal for end users — plus an optional mobile app. Both portals are microfrontend (MFE) compositions: a host shell owns routing, layout, theming, and the authenticated session, and feature areas are loaded as independently generated microfrontends. This mirrors the factory's own Factory Studio experience model.

Experience architecture

flowchart TB
    subgraph AdminPortal["Admin Portal"]
        AdminShell["ShellTemplate Host<br/>routing + layout + auth"]
        AdminMfes["MFEs: Tenants, Users & Roles,<br/>Subscriptions & Billing, Feature Flags,<br/>Audit, Reports, Configuration"]
    end
    subgraph CustomerPortal["Customer Portal"]
        CustShell["ShellTemplate Host<br/>routing + layout + auth"]
        CustMfes["MFEs: Dashboard, Domain Features,<br/>Profile & Account, Notifications,<br/>Subscription Self-Service, Reports"]
    end
    UIKit["Blazor.UIKit<br/>shared components"]
    Mobile["MAUI Mobile Client"]
    Gateway["API Gateway"]
    Auth["Authorization Server (OpenIddict)"]

    AdminMfes --> AdminShell
    CustMfes --> CustShell
    AdminShell --> UIKit
    CustShell --> UIKit
    AdminShell -->|"REST/gRPC"| Gateway
    CustShell -->|"REST/gRPC"| Gateway
    Mobile -->|"REST"| Gateway
    AdminShell -->|"OIDC"| Auth
    CustShell -->|"OIDC"| Auth
    Mobile -->|"OIDC"| Auth
Hold "Alt" / "Option" to enable pan & zoom

Admin Portal surfaces

Surface Purpose Backing Service
Tenant Administration Manage tenant profile, status, provisioning Tenant Management
Users & Roles Invite users, assign roles, manage permissions Identity Service
Subscriptions & Billing View/change edition, billing, invoices Subscription & Billing
Feature Flags Toggle flags, manage rollout Configuration Service
Configuration Manage tenant settings Configuration Service
Audit Log Search and review the audit trail Audit Trail Service
Reports & Analytics Define, run, and download reports Reporting & Analytics
Integrations Configure connections and webhooks Integration Service

Customer Portal surfaces

Surface Purpose Backing Service
Dashboard Overview of the user's workspace and key metrics Domain + Reporting
Domain Features The product's specific end-user functionality Domain microservices
Profile & Account Manage own profile, security, preferences Identity Service
Notifications In-app notification center and preferences Notification Service
Subscription Self-Service View plan, upgrade, manage payment Subscription & Billing
Reports Run and download permitted reports Reporting & Analytics

Design system & composition

  • Shared UI Kit. Both portals consume ConnectSoft.Blazor.UIKit for a consistent component system (forms, tables, dialogs, navigation), so generated products look and behave consistently.
  • Microfrontend isolation. Each feature area is an independently generated and deployable MFE; adding a surface does not require a monolithic portal redeploy.
  • Theming & branding. Per-tenant branding (logo, palette) is applied by the shell from ConfigurationSetting values, enabling white-labeling.
  • Tenant-aware navigation. Menus and surfaces are gated by the user's permissions and the tenant's edition entitlements, so users see only what their role and plan allow.
  • Responsive + accessible. Generated UI follows responsive layout and accessibility conventions baked into the UI Kit.

Real-time & state

  • Live updates. Portals subscribe to product events (e.g. NotificationSent, ReportGenerated) over SignalR (ConnectSoft.Extensions.Saas.AspNetCore.SignalR) for live notification badges and report-ready toasts, scoped per tenant and user.
  • Session. The shell owns the OIDC session; tokens are validated at the gateway and per-service.
  • Workspace state. User preferences, saved filters, and layouts persist per user and tenant.

Implemented

The experience foundation is real today: ConnectSoft.Blazor.ShellTemplate, ConnectSoft.Blazor.MicrofrontendLibraryTemplate, ConnectSoft.Blazor.UIKit, shipped Blazor.Mfe.* microfrontends (including Identity.Admin, Identity.SelfService, AuthorizationServer.Admin), the SignalR substrate, and ConnectSoft.MauiBaseTemplate. The generated portals are compositions of these proven building blocks.

Mobile client

The optional mobile app is generated from ConnectSoft.MauiBaseTemplate, sharing the OIDC auth flow and API contracts with the web portals. It targets the Customer Portal surfaces most relevant on mobile (dashboard, notifications, key domain features).

How the UI contributes to the pillars

  • Traceability — every user action emits an enveloped, audited event carrying traceId.
  • Reusability — portals are compositions of shared shell, MFE library, and UI Kit, generated identically across products.
  • Autonomy — the Frontend Developer Agent generates portals and MFEs from the blueprint UI definition.
  • Governance — surfaces are gated by RBAC permissions and edition entitlements; admin actions are audited.
  • Observability — client telemetry (page views, errors, latency) feeds the product's observability dashboards.
  • Multi-tenant scale — branding, navigation, and data are tenant-scoped; the shell isolates tenants on every request and SignalR group.