{
  "id": "stack-profile:backend-for-frontend",
  "_kind": "StackProfile",
  "_file": "domain/stack-profiles/deep-stacks-7.yaml",
  "_cluster": "domain",
  "attributes": {
    "displayName": "Backend for Frontend — BFF (TypeScript, Express, GraphQL, React, Docker)",
    "description": "A Backend for Frontend pattern where a thin TypeScript/Express server\naggregates and reshapes data from multiple downstream microservices into\na single GraphQL API tailored to the React frontend's exact needs. The\nBFF eliminates over-fetching by composing precisely the data shapes each\npage component requires, using GraphQL resolvers that fan out to REST\nor gRPC backends. Apollo Client on the frontend provides normalized\ncaching and optimistic updates. Docker containers deploy the BFF\nalongside the frontend. The tradeoff is an additional service to\nmaintain and the risk of the BFF becoming a \"god layer\" if not\nscoped carefully, but the pattern dramatically improves frontend\nperformance and developer experience.\n",
    "composes": [
      "language:typescript",
      "library:express",
      "library:graphql-tools",
      "library:apollo-client",
      "framework:react",
      "library:zod",
      "tool:docker",
      "tool:graphql-codegen"
    ]
  },
  "outgoingEdges": [
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "language:typescript",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "library:express",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "library:graphql-tools",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "library:apollo-client",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "framework:react",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "library:zod",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "tool:docker",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "tool:graphql-codegen",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "role:fullstack-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "role:frontend-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "role:backend-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "workflow:graphql-schema-review",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "workflow:api-design-review",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "domain:fullstack",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "domain:web-development",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "skill-area:graphql-schema-design",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "skill-area:backend-api-design",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "skill-area:data-fetching-caching",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "skill-area:middleware-design",
      "kind": "requires_skill_area"
    }
  ],
  "incomingEdges": []
}