code-structure.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="781px" height="1323px" viewBox="-0.5 -0.5 781 1323" content="&lt;mxfile&gt;&lt;diagram id=&quot;MpSz7faAn4CP3FlPUGvn&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <ellipse cx="385" cy="275" rx="275" ry="275" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <ellipse cx="385" cy="270" rx="190" ry="190" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <ellipse cx="385" cy="270" rx="105" ry="105" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <ellipse cx="385" cy="905" rx="275" ry="275" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <ellipse cx="385" cy="900" rx="190" ry="190" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <ellipse cx="385" cy="900" rx="105" ry="105" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <rect x="350" y="510" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 525px; margin-left: 351px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 21px;">
                                    Express
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="529" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Express
                </text>
            </switch>
        </g>
        <rect x="337.5" y="630" width="85" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 83px; height: 1px; padding-top: 645px; margin-left: 339px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 21px;">
                                    fetch
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="649" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    fetch
                </text>
            </switch>
        </g>
        <rect x="280" y="570" width="92.5" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 91px; height: 1px; padding-top: 585px; margin-left: 281px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 20px;">
                                    HTTP
                                    <br/>
                                    Rest API
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="326" y="589" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    HTTP...
                </text>
            </switch>
        </g>
        <rect x="318" y="862.5" width="135" height="85" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 133px; height: 1px; padding-top: 905px; margin-left: 319px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 32px;">
                                    Web
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="386" y="909" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Web
                </text>
            </switch>
        </g>
        <rect x="312.5" y="232.5" width="135" height="85" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 133px; height: 1px; padding-top: 275px; margin-left: 314px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 32px;">
                                    Server
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="279" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Server
                </text>
            </switch>
        </g>
        <rect x="350" y="317.5" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 333px; margin-left: 351px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 31px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 21px;">
                                    /router
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="342" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="31px" text-anchor="middle">
                    /rou...
                </text>
            </switch>
        </g>
        <ellipse cx="695" cy="585" rx="85" ry="85" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 585px; margin-left: 611px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 20px;">
                                    Firebase
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="695" y="589" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Firebase
                </text>
            </switch>
        </g>
        <ellipse cx="85" cy="585" rx="85" ry="85" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 585px; margin-left: 1px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <span style="font-size: 20px;">
                                    Supabase
                                </span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="85" y="589" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Supabase
                </text>
            </switch>
        </g>
        <rect x="198" y="430" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 445px; margin-left: 199px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Prisma
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="228" y="451" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="20px" text-anchor="middle">
                    Prisma
                </text>
            </switch>
        </g>
        <rect x="337.5" y="720" width="85" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 83px; height: 1px; padding-top: 735px; margin-left: 339px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 21px;">
                                    /api
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="739" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    /api
                </text>
            </switch>
        </g>
        <rect x="258" y="370" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 385px; margin-left: 259px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                /database
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="288" y="391" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    /datab...
                </text>
            </switch>
        </g>
        <rect x="460" y="370" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 385px; margin-left: 461px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                /firebase/auth
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="490" y="391" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    /fireb...
                </text>
            </switch>
        </g>
        <path d="M 319.82 366.84 L 348.18 350.66" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 315.26 369.45 L 319.6 362.94 L 319.82 366.84 L 323.07 369.02 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 352.74 348.05 L 348.4 354.56 L 348.18 350.66 L 344.93 348.48 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 503.63 L 380 353.87" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 380 508.88 L 376.5 501.88 L 380 503.63 L 383.5 501.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 348.62 L 383.5 355.62 L 380 353.87 L 376.5 355.62 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 454.25 367.94 L 415.75 349.56" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 458.99 370.2 L 451.17 370.34 L 454.25 367.94 L 454.18 364.03 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 411.01 347.3 L 418.83 347.16 L 415.75 349.56 L 415.82 353.47 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 150.33 521.12 L 208.13 464.46" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 146.58 524.8 L 149.13 517.4 L 150.33 521.12 L 154.03 522.4 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 211.88 460.78 L 209.33 468.18 L 208.13 464.46 L 204.43 463.18 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 247.5 425.5 L 268.5 404.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 243.79 429.21 L 246.27 421.78 L 247.5 425.5 L 251.22 426.73 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 272.21 400.79 L 269.73 408.22 L 268.5 404.5 L 264.78 403.27 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="540" y="440" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 455px; margin-left: 541px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                firebase-admin
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="570" y="461" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    fireba...
                </text>
            </switch>
        </g>
        <path d="M 548.06 435.81 L 511.94 404.19" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 552.02 439.26 L 544.44 437.29 L 548.06 435.81 L 549.05 432.02 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 507.98 400.74 L 515.56 402.71 L 511.94 404.19 L 510.95 407.98 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 631.64 519.17 L 588.83 474.59" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 635.28 522.95 L 627.91 520.33 L 631.64 519.17 L 632.96 515.48 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 585.2 470.81 L 592.57 473.43 L 588.83 474.59 L 587.52 478.28 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 623.63 L 380 546.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 380 628.88 L 376.5 621.88 L 380 623.63 L 383.5 621.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 541.12 L 383.5 548.12 L 380 546.37 L 376.5 548.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 713.63 L 380 666.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 380 718.88 L 376.5 711.88 L 380 713.63 L 383.5 711.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 661.12 L 383.5 668.12 L 380 666.37 L 376.5 668.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="100" y="620" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 635px; margin-left: 101px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                RLS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="130" y="641" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    RLS
                </text>
            </switch>
        </g>
        <path d="M 306.39 815.45 L 149.11 654.55" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 310.06 819.2 L 302.66 816.64 L 306.39 815.45 L 307.67 811.75 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 145.44 650.8 L 152.84 653.36 L 149.11 654.55 L 147.83 658.25 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="295.5" y="820" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 835px; margin-left: 297px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                uploadImage
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="326" y="841" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    upload...
                </text>
            </switch>
        </g>
        <path d="M 380 793.63 L 380 756.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 380 798.88 L 376.5 791.88 L 380 793.63 L 383.5 791.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 751.12 L 383.5 758.12 L 380 756.37 L 376.5 758.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="355" y="1140" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 1155px; margin-left: 356px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                UI
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="385" y="1161" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    UI
                </text>
            </switch>
        </g>
        <rect x="355.5" y="1180" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 1195px; margin-left: 357px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Browser
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="386" y="1201" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    Browser
                </text>
            </switch>
        </g>
        <rect x="355.5" y="960" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 975px; margin-left: 357px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                React
                                <br/>
                                Components
                                <br/>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="386" y="981" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    React...
                </text>
            </switch>
        </g>
        <path d="M 385.44 996.37 L 385.06 1133.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 385.46 991.12 L 388.94 998.13 L 385.44 996.37 L 381.94 998.11 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 385.04 1138.88 L 381.56 1131.87 L 385.06 1133.63 L 388.56 1131.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <ellipse cx="385" cy="1237.5" rx="7.500000000000001" ry="7.500000000000001" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <path d="M 385 1245 L 385 1270 M 385 1250 L 370 1250 M 385 1250 L 400 1250 M 385 1270 L 370 1290 M 385 1270 L 400 1290" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1297px; margin-left: 385px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                User
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="385" y="1318" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    User
                </text>
            </switch>
        </g>
        <path d="M 584.31 705.31 L 633.15 652.25" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 580.76 709.18 L 582.92 701.66 L 584.31 705.31 L 588.07 706.4 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 636.71 648.39 L 634.54 655.91 L 633.15 652.25 L 629.39 651.17 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="530" y="710" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 725px; margin-left: 531px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 21px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                firebase.getAuth
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="560" y="731" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="21px" text-anchor="middle">
                    fireba...
                </text>
            </switch>
        </g>
        <path d="M 463.43 820.94 L 540.48 744.49" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 459.71 824.63 L 462.21 817.22 L 463.43 820.94 L 467.14 822.19 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 544.21 740.79 L 541.7 748.2 L 540.48 744.49 L 536.77 743.23 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="490" y="850" width="85" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 83px; height: 1px; padding-top: 865px; margin-left: 491px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <font style="font-size: 21px;">
                                    /hooks
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="533" y="869" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    /hooks
                </text>
            </switch>
        </g>
        <path d="M 510.06 845.87 L 402.44 754.13" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 514.05 849.27 L 506.46 847.4 L 510.06 845.87 L 511 842.07 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 398.45 750.73 L 406.04 752.6 L 402.44 754.13 L 401.5 757.93 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 410.64 956.18 L 507.36 883.82" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 406.44 959.33 L 409.95 952.33 L 410.64 956.18 L 414.14 957.94 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 511.56 880.67 L 508.05 887.67 L 507.36 883.82 L 503.86 882.06 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>