Container View: Frontend A

The delivery application, built on the Gesso Next package. NextJS renders the pages from the Gesso CMS, Commerce, ERP and AI layers (see the System Landscape); React renders the design system components. The API middleware is a set of Next.js API routes (/api/middleware/<provider>) that make the server-side calls needing secret credentials.

flowchart LR
    bigCommerce("BigCommerce<br/>[Software System]")
    shopify("Shopify<br/>[Software System]")
    shopware("Shopware<br/>[Software System]")
    acumatica("Acumatica<br/>[Software System]")
    gemini("Google Gemini<br/>[Software System]")
    vertex("Google Vertex AI<br/>[Software System]")

    subgraph frontend["Frontend A [Software System]"]
        apiMiddleware("API Middleware<br/>[Container]<br/>Next.js API routes")
        nextjs("NextJS<br/>[Container]")
        react("React<br/>[Container]<br/>Component Framework")
    end

    bigCommerce -.-> apiMiddleware
    shopify -.-> apiMiddleware
    shopware -.-> apiMiddleware
    acumatica -.-> apiMiddleware
    gemini -.-> apiMiddleware
    vertex -.-> apiMiddleware
    apiMiddleware -.-> nextjs

    classDef external fill:#64748b,stroke:#475569,color:#ffffff
    classDef container fill:#dbeafe,stroke:#2563eb,color:#1e3a8a
    class bigCommerce,shopify,shopware,acumatica,gemini,vertex external
    class apiMiddleware,nextjs,react container
    style frontend fill:none,stroke:#7d8794,stroke-width:2px,stroke-dasharray:6 4