images/flashcard-app-infrastructure-and-architecture.svg

<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 611.2890625 394"
  style="max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
    '
  </style>
  <style>
    #graph-div {
      font-family: "trebuchet ms", verdana, arial, sans-serif;
      font-size: 16px;
      fill: #ccc;
    }

    #graph-div .error-icon {
      fill: #a44141;
    }

    #graph-div .error-text {
      fill: #ddd;
      stroke: #ddd;
    }

    #graph-div .edge-thickness-normal {
      stroke-width: 2px;
    }

    #graph-div .edge-thickness-thick {
      stroke-width: 3.5px;
    }

    #graph-div .edge-pattern-solid {
      stroke-dasharray: 0;
    }

    #graph-div .edge-pattern-dashed {
      stroke-dasharray: 3;
    }

    #graph-div .edge-pattern-dotted {
      stroke-dasharray: 2;
    }

    #graph-div .marker {
      fill: lightgrey;
      stroke: lightgrey;
    }

    #graph-div .marker.cross {
      stroke: lightgrey;
    }

    #graph-div svg {
      font-family: "trebuchet ms", verdana, arial, sans-serif;
      font-size: 16px;
    }

    #graph-div .label {
      font-family: "trebuchet ms", verdana, arial, sans-serif;
      color: #ccc;
    }

    #graph-div .cluster-label text {
      fill: #F9FFFE;
    }

    #graph-div .cluster-label span,
    #graph-div p {
      color: #F9FFFE;
    }

    #graph-div .label text,
    #graph-div span,
    #graph-div p {
      fill: #ccc;
      color: #ccc;
    }

    #graph-div .node rect,
    #graph-div .node circle,
    #graph-div .node ellipse,
    #graph-div .node polygon,
    #graph-div .node path {
      fill: #1f2020;
      stroke: #81B1DB;
      stroke-width: 1px;
    }

    #graph-div .flowchart-label text {
      text-anchor: middle;
    }

    #graph-div .node .label {
      text-align: center;
    }

    #graph-div .node.clickable {
      cursor: pointer;
    }

    #graph-div .arrowheadPath {
      fill: lightgrey;
    }

    #graph-div .edgePath .path {
      stroke: lightgrey;
      stroke-width: 2.0px;
    }

    #graph-div .flowchart-link {
      stroke: lightgrey;
      fill: none;
    }

    #graph-div .edgeLabel {
      background-color: hsl(0, 0%, 34.4117647059%);
      text-align: center;
    }

    #graph-div .edgeLabel rect {
      opacity: 0.5;
      background-color: hsl(0, 0%, 34.4117647059%);
      fill: hsl(0, 0%, 34.4117647059%);
    }

    #graph-div .cluster rect {
      fill: hsl(180, 1.5873015873%, 28.3529411765%);
      stroke: rgba(255, 255, 255, 0.25);
      stroke-width: 1px;
    }

    #graph-div .cluster text {
      fill: #F9FFFE;
    }

    #graph-div .cluster span,
    #graph-div p {
      color: #F9FFFE;
    }

    #graph-div div.mermaidTooltip {
      position: absolute;
      text-align: center;
      max-width: 200px;
      padding: 2px;
      font-family: "trebuchet ms", verdana, arial, sans-serif;
      font-size: 12px;
      background: hsl(20, 1.5873015873%, 12.3529411765%);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 2px;
      pointer-events: none;
      z-index: 100;
    }

    #graph-div .flowchartTitleText {
      text-anchor: middle;
      font-size: 18px;
      fill: #ccc;
    }

    #graph-div :root {
      --mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
    }
  </style>
  <g>
    <marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10"
      viewBox="0 0 12 20" class="marker flowchart" id="flowchart-pointEnd">
      <path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
    <marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0"
      viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart">
      <path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11"
      viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd">
      <circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1"
      viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart">
      <circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12"
      viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd">
      <path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9">
      </path>
    </marker>
    <marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1"
      viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart">
      <path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9">
      </path>
    </marker>
    <g class="root">
      <g class="clusters"></g>
      <g class="edgePaths">
        <path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;"
          class="edge-thickness-normal edge-pattern-solid flowchart-link LS-LTF LE-React" id="L-LTF-React-0"
          d="M201.7561532079646,39L179.57934642330383,45.166666666666664C157.40253963864305,51.333333333333336,113.04892606932152,63.666666666666664,90.87211928466077,76C68.6953125,88.33333333333333,68.6953125,100.66666666666667,68.6953125,106.83333333333333L68.6953125,113">
        </path>
        <path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;"
          class="edge-thickness-normal edge-pattern-solid flowchart-link LS-React LE-CF" id="L-React-CF-0"
          d="M68.6953125,152L68.6953125,158.16666666666666C68.6953125,164.33333333333334,68.6953125,176.66666666666666,68.6953125,189C68.6953125,201.33333333333334,68.6953125,213.66666666666666,68.6953125,219.83333333333334L68.6953125,226">
        </path>
        <path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;"
          class="edge-thickness-normal edge-pattern-solid flowchart-link LS-LTF LE-CMS" id="L-LTF-CMS-0"
          d="M271.8828125,39L271.8828125,45.166666666666664C271.8828125,51.333333333333336,271.8828125,63.666666666666664,271.8828125,76C271.8828125,88.33333333333333,271.8828125,100.66666666666667,271.8828125,106.83333333333333L271.8828125,113">
        </path>
        <path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;"
          class="edge-thickness-normal edge-pattern-solid flowchart-link LS-CMS LE-DO" id="L-CMS-DO-0"
          d="M271.8828125,152L271.8828125,158.16666666666666C271.8828125,164.33333333333334,271.8828125,176.66666666666666,271.8828125,189C271.8828125,201.33333333333334,271.8828125,213.66666666666666,271.8828125,219.83333333333334L271.8828125,226">
        </path>
        <path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;"
          class="edge-thickness-normal edge-pattern-solid flowchart-link LS-DO LE-LF" id="L-DO-LF-0"
          d="M271.8828125,265L271.8828125,271.1666666666667C271.8828125,277.3333333333333,271.8828125,289.6666666666667,271.8828125,302C271.8828125,314.3333333333333,271.8828125,326.6666666666667,271.8828125,332.8333333333333L271.8828125,339">
        </path>
        <path marker-end="url(#flowchart-pointEnd)" style="stroke:#2ecd71;stroke-width:2px;fill:none;"
          class="edge-thickness-normal edge-pattern-solid flowchart-link LS-LTF LE-Sentry" id="L-LTF-Sentry-0"
          d="M346.02972898230087,39L369.4778991519174,45.166666666666664C392.92606932153393,51.333333333333336,439.82240966076694,63.666666666666664,463.2705798303835,76C486.71875,88.33333333333333,486.71875,100.66666666666667,486.71875,106.83333333333333L486.71875,113">
        </path>
      </g>
      <g class="edgeLabels">
        <g transform="translate(68.6953125, 76)" class="edgeLabel">
          <g transform="translate(-55.671875, -12)" class="label">
            <foreignObject height="24" width="111.34375">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="edgeLabel">Developed with</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(68.6953125, 189)" class="edgeLabel">
          <g transform="translate(-43.0234375, -12)" class="label">
            <foreignObject height="24" width="86.046875">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="edgeLabel">Deployed to</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(271.8828125, 76)" class="edgeLabel">
          <g transform="translate(-77.1953125, -12)" class="label">
            <foreignObject height="24" width="154.390625">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="edgeLabel">Fetches content from</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(271.8828125, 189)" class="edgeLabel">
          <g transform="translate(-35.8359375, -12)" class="label">
            <foreignObject height="24" width="71.671875">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="edgeLabel">Hosted on</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(271.8828125, 302)" class="edgeLabel">
          <g transform="translate(-42.1015625, -12)" class="label">
            <foreignObject height="24" width="84.203125">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="edgeLabel">Managed by</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(486.71875, 76)" class="edgeLabel">
          <g transform="translate(-16.03125, -12)" class="label">
            <foreignObject height="24" width="32.0625">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="edgeLabel">Uses</span></div>
            </foreignObject>
          </g>
        </g>
      </g>
      <g class="nodes">
        <g transform="translate(271.8828125, 19.5)" id="flowchart-LTF-222" class="node default default flowchart-label">
          <rect height="39" width="256.78125" y="-19.5" x="-128.390625" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-120.890625, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="241.78125">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">Language Together Flashcard App</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(68.6953125, 132.5)" id="flowchart-React-223"
          class="node default default flowchart-label">
          <rect height="39" width="55.71875" y="-19.5" x="-27.859375" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-20.359375, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="40.71875">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">React</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(68.6953125, 245.5)" id="flowchart-CF-225" class="node default default flowchart-label">
          <rect height="39" width="137.390625" y="-19.5" x="-68.6953125" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-61.1953125, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="122.390625">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">CloudFlare Pages</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(271.8828125, 132.5)" id="flowchart-CMS-227"
          class="node default default flowchart-label">
          <rect height="39" width="112.53125" y="-19.5" x="-56.265625" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-48.765625, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="97.53125">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">Craft CMS API</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(271.8828125, 245.5)" id="flowchart-DO-229" class="node default default flowchart-label">
          <rect height="39" width="168.984375" y="-19.5" x="-84.4921875" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-76.9921875, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="153.984375">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">Digital Ocean Droplet</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(271.8828125, 358.5)" id="flowchart-LF-231" class="node default default flowchart-label">
          <rect height="39" width="112.203125" y="-19.5" x="-56.1015625" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-48.6015625, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="97.203125">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">Laravel Forge</span></div>
            </foreignObject>
          </g>
        </g>
        <g transform="translate(486.71875, 132.5)" id="flowchart-Sentry-233"
          class="node default default flowchart-label">
          <rect height="39" width="217.140625" y="-19.5" x="-108.5703125" ry="0" rx="0" style=""
            class="basic label-container"></rect>
          <g transform="translate(-101.0703125, -12)" style="" class="label">
            <rect></rect>
            <foreignObject height="24" width="202.140625">
              <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span
                  class="nodeLabel">Sentry.io for error reporting</span></div>
            </foreignObject>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>