Components¶

C4 Level 3 - Components

This page zooms into each container and shows its significant internal components. Each diagram is scoped to a single container - external containers and systems appear as single boxes outside the boundary. For the higher-level view, see Containers.

Components¶

Component	Container	Responsibility
Pages and Features	PetFolio Business	UI pages and server components for pet management
PetFolio API Client (planned)	PetFolio Business	Manages all HTTP requests to PetFolio Service
OAuth Client (planned)	PetFolio Business	Handles OAuth sign-in flow and session management
Controllers / API Layer	PetFolio Service	HTTP entry point, dispatches commands and queries
Auth and Multi-Tenancy	PetFolio Service	Validates tokens, extracts claims, provides tenant isolation
CQRS Handlers	PetFolio Service	Commands, queries, and validation via MediatR
Domain	PetFolio Service	Entities, value objects, and business rules
Infrastructure	PetFolio Service	Repositories and DB context via EF Core

PetFolio Business (Next.js)¶

graph TD
    USER["👤 User"]

    subgraph frontend ["PetFolio Business (Next.js)"]
        PAGES["<b>Pages and Features</b><br/><i>Next.js App Router</i><br/><br/>UI pages and server components<br/>for pet management"]
        APICLIENT["<b>PetFolio API Client</b><br/><i>Planned - shared library</i><br/><br/>Manages all HTTP requests<br/>to PetFolio Service"]
        OAUTHCLIENT["<b>OAuth Client</b><br/><i>Planned - shared library</i><br/><br/>Handles OAuth sign-in flow<br/>and session management"]
    end

    PETFOLIO_API["<b>PetFolio Service</b><br/><i>.NET 9</i>"]
    OAUTH["<b>OAuth Providers</b><br/><i>Google, Microsoft, Facebook</i>"]

    USER -->|"navigates"| PAGES
    PAGES -->|"fetch / mutate data"| APICLIENT
    PAGES -.->|"initiates sign-in"| OAUTHCLIENT
    OAUTHCLIENT -.->|"Google ID token"| APICLIENT
    OAUTHCLIENT -.->|"authorisation request"| OAUTH
    APICLIENT -->|"HTTP requests + JWT"| PETFOLIO_API

    classDef c4-person fill:#08427b26,stroke:#08427B,stroke-width:2px
    classDef c4-component fill:#85bbf026,stroke:#85BBF0,stroke-width:2px
    classDef c4-component-planned fill:#85bbf012,stroke:#85BBF0,stroke-width:2px,stroke-dasharray:5 5
    classDef c4-container-ext fill:#438dd526,stroke:#438DD5,stroke-width:2px
    classDef c4-system-ext fill:#9999992e,stroke:#999999,stroke-width:2px
    classDef c4-boundary fill:none,stroke:#444444,stroke-width:2px,stroke-dasharray:5 5

    class USER c4-person
    class PAGES c4-component
    class APICLIENT,OAUTHCLIENT c4-component-planned
    class PETFOLIO_API c4-container-ext
    class OAUTH c4-system-ext
    class frontend c4-boundary

Diagram key

Class	Style	Meaning
`c4-person`	Light blue fill, dark blue border	Person / Actor
`c4-component`	Light blue fill, blue border	Component within this container
`c4-component-planned`	Faint blue fill, dashed blue border	Planned component
`c4-container-ext`	Blue fill, blue border	External container
`c4-system-ext`	Grey fill, grey border	External system
`c4-boundary`	Dashed border, no fill	Container boundary
-	Dashed line	Planned / future interaction

PetFolio Service (.NET)¶

graph TD
    FE["<b>PetFolio Business</b><br/><i>Next.js</i>"]

    subgraph backend ["PetFolio Service (.NET)"]
        AUTH["<b>Auth and Multi-Tenancy</b><br/><i>Claims-based identity + tenant isolation</i><br/><br/>Extracts claims from HttpContext,<br/>provides user identity and account scoping"]
        API["<b>Controllers / API Layer</b><br/><i>ASP.NET Core</i><br/><br/>HTTP entry point,<br/>dispatches commands and queries"]
        CQRS["<b>CQRS Handlers</b><br/><i>MediatR + FluentValidation</i><br/><br/>Commands, queries, validation"]
        DOMAIN["<b>Domain</b><br/><br/>Entities, value objects,<br/>business rules"]
        INFRA["<b>Infrastructure</b><br/><i>EF Core</i><br/><br/>Repositories, DB context"]
    end

    DB[("MySQL Database")]
    OAUTH["<b>OAuth Providers</b><br/><i>Google, Microsoft, Facebook</i>"]

    FE -->|"HTTP requests + JWT"| AUTH
    AUTH -->|"authenticated request"| API
    AUTH -.->|"validates tokens with"| OAUTH
    API -->|"dispatches commands / queries"| CQRS
    CQRS -.->|"reads identity from"| AUTH
    CQRS -->|"enforces business rules"| DOMAIN
    CQRS -->|"persists via"| INFRA
    INFRA -.->|"scopes queries via"| AUTH
    INFRA -->|"reads / writes"| DB

    classDef c4-container-ext fill:#438dd526,stroke:#438DD5,stroke-width:2px
    classDef c4-component fill:#85bbf026,stroke:#85BBF0,stroke-width:2px
    classDef c4-database fill:#438dd51f,stroke:#438DD5,stroke-width:2px
    classDef c4-system-ext fill:#9999992e,stroke:#999999,stroke-width:2px
    classDef c4-boundary fill:none,stroke:#444444,stroke-width:2px,stroke-dasharray:5 5

    class FE c4-container-ext
    class AUTH,API,CQRS,DOMAIN,INFRA c4-component
    class DB c4-database
    class OAUTH c4-system-ext
    class backend c4-boundary

Diagram key

Class	Style	Meaning
`c4-container-ext`	Blue fill, blue border	External container
`c4-component`	Light blue fill, blue border	Component within this container
`c4-database`	Light blue fill, blue border (cylinder)	Database
`c4-system-ext`	Grey fill, grey border	External system
`c4-boundary`	Dashed border, no fill	Container boundary
-	Dashed line	Planned / future interaction

Simplified representation

Domain and Infrastructure represent architectural layers, not individual components. Each contains multiple components - for example, Infrastructure includes AnimalRepository, AccountRepository, UserRepository, UnitOfWork, and PetfolioDbContext. This diagram is an overview; see PetFolio Service for the full breakdown.