Skip to content

Containers

C4 Level 2 - Containers

This page zooms into the PetFolio system and shows the deployable units it is made up of, how they communicate, and what technology each one uses. For the higher-level view, see System Context. For internal component detail, see Components.

Container Technology Responsibility
PetFolio Business Next.js 16, App Router Web application - the interface for pet owners and professionals
PetFolio API .NET 9, ASP.NET Core REST API - manages pet portfolios, health records, and accounts. Clean Architecture + CQRS
MySQL Database MySQL 8.0+ Persistent data store for accounts, users, animals, and weight records
System Purpose
Google (OAuth) User authentication - PetFolio uses OAuth-only sign-in
Microsoft (OAuth, planned) Alternative OAuth provider
Facebook (OAuth, planned) Alternative OAuth provider

Container Diagram

graph TD
    PO["<b>Pet Owner</b><br/><i>Manages their pets' portfolios</i>"]
    PP["<b>Pet Professional</b><br/><i>Manages client animals and records</i>"]
    PS["<b>Pet Specialist</b><br/><i>Manages multiple animals and records</i>"]

    subgraph petfolio ["PetFolio System"]
        FE["<b>PetFolio Business</b><br/><i>Next.js 16, App Router</i><br/><br/>Web application for pet owners and professionals"]

        API["<b>PetFolio API</b><br/><i>.NET 9, ASP.NET Core<br/>Clean Architecture + CQRS</i><br/><br/>REST API - manages pet portfolios, health records, and accounts"]

        DB[("<b>MySQL Database</b><br/><i>MySQL 8.0+</i><br/><br/>Stores accounts, users, animals, and weight records")]
    end

    OAUTH["<b>OAuth Providers</b><br/><i>Google, Microsoft, Facebook authentication (Planned)</i>"]

    PO -->|"HTTPS"| FE
    PP -->|"HTTPS"| FE
    PS -->|"HTTPS"| FE
    FE -->|"HTTPS/JSON"| API
    API -->|"MySQL Protocol"| DB
    API -.->|"OAuth 2.0"| OAUTH

    classDef c4-person fill:#08427b26,stroke:#08427B,stroke-width:2px
    classDef c4-container fill:#438dd526,stroke:#438DD5,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 PO,PP,PS c4-person
    class FE,API c4-container
    class DB c4-database
    class OAUTH c4-system-ext
    class petfolio c4-boundary
Diagram key
Class Style Meaning
c4-person Light blue fill, dark blue border Person / Actor
c4-container Blue fill, blue border Container (application or service)
c4-database Blue fill, blue border (cylinder) Database
c4-system-ext Grey fill, grey border External system
c4-boundary Dashed border, no fill System boundary
- Dashed line Planned / future integration