{
  "id": "stack-profile:micro-frontend",
  "_kind": "StackProfile",
  "_file": "domain/stack-profiles/deep-stacks-7.yaml",
  "_cluster": "domain",
  "attributes": {
    "displayName": "Micro-Frontend (React, Webpack, TypeScript, Docker)",
    "description": "A frontend architecture decomposing a large web application into\nindependently deployable micro-frontends, each owned by a separate team.\nWebpack Module Federation enables runtime composition, allowing shell\nand remote applications to share dependencies and expose components\nwithout build-time coupling. Each micro-frontend is a React + TypeScript\napplication with its own CI/CD pipeline and Docker container. Shared\ndesign tokens and a component library maintain visual consistency.\nThe shell application handles routing and authentication, loading\nremotes on demand. The tradeoff is increased operational complexity,\nbundle size management challenges, and the need for strict interface\ncontracts between teams, but the architecture enables true team\nautonomy at scale.\n",
    "composes": [
      "language:typescript",
      "framework:react",
      "tool:webpack",
      "library:tailwindcss",
      "library:zustand",
      "tool:docker",
      "tool:vitest",
      "tool:eslint"
    ]
  },
  "outgoingEdges": [
    {
      "from": "stack-profile:micro-frontend",
      "to": "language:typescript",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "framework:react",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "tool:webpack",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "library:tailwindcss",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "library:zustand",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "tool:docker",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "tool:vitest",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "tool:eslint",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "role:frontend-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "role:architect",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "role:tech-lead",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "workflow:design-sprint",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "workflow:release-management",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "domain:frontend",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "domain:web-development",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "skill-area:frontend-development",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "skill-area:web-performance",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "skill-area:ci-cd",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "skill-area:frontend-performance",
      "kind": "requires_skill_area"
    }
  ],
  "incomingEdges": []
}