Mid_Level_Design.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="902px" height="365px" viewBox="-0.5 -0.5 902 365" content="&lt;mxfile&gt;&lt;diagram id=&quot;WfbcbNrQGSfDdmIAcsLB&quot; name=&quot;Page-1&quot;&gt;7Vxtb+I4EP41SHcfQHmHfiyw7FVqT9W2u3tf3cQE7yYx5ziF7q+/ceJAgpM2bUm2JzmqgEz8Mp5nZjwzNYzsRbz/zNB2c0MDHI0sI9iP7OXIsi5sG14F4akgOCUhZCQoSOaRcEd+YUk0JDUjAU5rDTmlESfbOtGnSYJ9XqMhxuiu3mxNo/qsWxRihXDno0ilficB3xRU1zCO9L8wCTdyZqd88ID8nyGjWSKnG1n2Or+KxzEqh5Lt0w0K6K5Csj+N7AWjlBef4v0CR0KypdSKfquWpwe2GU54lw7WRdHjEUUZLln2Iug7D8ijYJA/SZl4/2aCq3ntUyjf8x7pFiWNXdY04eM0B/kSGtjWdp93q4hr7NOIsuI5SQgnKGqc6wY4t4xr/Jjr2zeCd/C2xCkJxdRLgkKG4pIhWHfBU51PIOeLK6lWjWmL472gb3gMLCxNsTDO6E+8KDhcJjTBYlEkik5IKBJs2EsfpI+BPn/EjBPQqkv5ICZBIKaZ7zaE47st8sWcOzAhoOVywAIYQ8pM2sVM3pazgVIZ+SXpKxSTSBjaPYnBaCzj71wqX2gMay8XWNUJqSaCO7yvkKSOfMY0xpw9QZPyqekWXaQ5267U393ROKZTSdtUDMOWNCTtMTwMfVRK+CD1sllHS9dR09ETzHAA5itvJRgV/CqyND24x0lwKZzEsTFQVkRwkMu+jndV3K2yTGnGfMmMLY2KIxZi2cz1Cppg9FmJMxwhTh7rfqhJfLLrLSXAygEpxzNqSJlTtz5EwajsVfUMJwO51slApjOZGZXrhLViscq4ObiH5XXD230v3u34vVYTOuFdYlvF23GGwdtzjEkVFet50KZvUwZvdjG5qFyz53XsjLow+5/pgvMbbd+d1U32YEmvtv3Z80p10RvcajhymfENCBx2UU5oooCf7kgcoWJDFnjKJ2aX3ZhTse36GxIF1+iJZgKulENIUt7NN5SRXzAsOmoTYqXSWF6txZ3oKVWFYRHt3JaqYp6QbtC+1vAapVwSIAyK0DYlD4dlxCBdkswp5zQu9ye56JUagrTs7A1627rZnzh+S93qTa9hqzdN6/17vWMoCrAiDD+gFAP18vYKXhdIdGkO2p6x9vZwLcJr3qoeEED6JAmv8zZL50j5IpcuSBT6rqPcdWwgxMNJHs5xxFGBo2BgK+wjF407hz9Y6MKYuCMXuFzAvXm8hz/RnEHAl8CCEMlxw6AkO5yW8XR7dPIC+IWNqeiXcHvd4C7bvQttU0FbATYiOVYFsGUuZp4AWhXCC6geQnAJ471AeTk2FahtFWq7AdYIPeDolqYkd0/2khVtT+B+CdG63pJkgxnhZ0LUtbohOjsDoJYCKN6Ldf+Btluh5zA8+PM/tfn2Zb5eR299FvNtSMwW1ujSUF+/ESQ8N03WJJz8SDX+feE/G9J9Owr+NwjM3LiCgCtkOmAbKGCbnuT8TkcdOE/E1pCtO5DJIJ+PQ0rDCI9jkA8Mg7ZE2/2b7b4wto8Rtnk6bDtD2PYCokOGbdMWR37LqDBdYzKZyN1cG3BPBjxo4NZQVXs2cAMPPuHpXqPfF/qDhm1qkW2eCSu/E7IX0dua6rCt/7DttFxrdnUBpue8XwtctdKm47Y+DP/jlNtcXW47S9z2Ycpt5VQ6bvt9Bjxk3Oa+tuD2kKUpwJJC8KY1oC8NGDJ2c9WSW4j5PUMJeMQlYdgXflGD3RvYh5rZIGirtbV1lvhiJpTAtso0zr3hXJ48GQLnqbqPK8i+fMKtSRTtitDttMvJkZU3HYXyWlLfzqddOpuLWpf8egWdvv6jSFOns2dPZ22jns52PjdycYYzoq5awfRpvIXFCWdjrTKdwr7dVRZ29TFS2A7nAXUK+15Eh0xhm4qR4LMSXW/u02aHzFo9tdK4QCzQAPcJ8JBJqafWFa8pCkC4tyjEGuc+cR40H/Ua6405wGoZSkPeF+RDpqaeWnLMQiSO5KfjhyzVxt0r0uU/+gZBWi0tCvet1hJ17tz+RdAAr1EWNejFKr/Ok2m79UTb7LrXn+X/xp4+/HWODKytKPbKnPoMGdhUjd7E19snP7Rnf4dnfwFfe0DHPlXzr4Ty8Vp83Vyj3CfKg2bZagU0zs8CjI8/dGBow+4b8kHzbrUYKn4HY0ySNth1ljaYIgybmKtV1FwTMu0ABse9x+wcbo8/DVR8vf7460v2p/8A&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
    <defs>
        <clipPath id="mx-clip-4-31-152-26-0">
            <rect x="4" y="31" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-4-65-152-26-0">
            <rect x="4" y="65" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-4-91-152-26-0">
            <rect x="4" y="91" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-744-57-152-26-0">
            <rect x="744" y="57" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-744-91-152-26-0">
            <rect x="744" y="91" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-744-117-152-26-0">
            <rect x="744" y="117" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-564-171-152-26-0">
            <rect x="564" y="171" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-564-205-152-26-0">
            <rect x="564" y="205" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-564-231-152-26-0">
            <rect x="564" y="231" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-564-257-152-26-0">
            <rect x="564" y="257" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-564-283-152-26-0">
            <rect x="564" y="283" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-284-31-152-26-0">
            <rect x="284" y="31" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-284-65-152-26-0">
            <rect x="284" y="65" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-284-91-152-26-0">
            <rect x="284" y="91" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-284-117-152-26-0">
            <rect x="284" y="117" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-284-143-152-26-0">
            <rect x="284" y="143" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-284-169-152-26-0">
            <rect x="284" y="169" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-34-205-152-26-0">
            <rect x="34" y="205" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-34-231-152-26-0">
            <rect x="34" y="231" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-34-257-152-26-0">
            <rect x="34" y="257" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-34-283-152-26-0">
            <rect x="34" y="283" width="152" height="26"/>
        </clipPath>
        <clipPath id="mx-clip-34-309-152-26-0">
            <rect x="34" y="309" width="152" height="26"/>
        </clipPath>
    </defs>
    <g>
        <rect x="95" y="330" width="770" 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: 768px; height: 1px; padding-top: 345px; margin-left: 96px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 8px; font-family: &quot;Times New Roman&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <div style="">
                                    <span style="font-size: 32px; background-color: initial;">
                                        Mid Level View Design Diagram
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="480" y="347" fill="#000000" font-family="Times New Roman" font-size="8px" text-anchor="middle">
                    Mid Level View Design Diagram
                </text>
            </switch>
        </g>
        <path d="M 160 67.14 L 280 83.86" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 440 92.74 L 740 84.26" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 560 185.71 L 440 131.29" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 0 26 L 0 0 L 160 0 L 160 26" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 0 26 L 0 112 L 160 112 L 160 26" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 0 26 L 160 26" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="rgb(0, 0, 0)" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="79.5" y="17.5">
                Authentication
            </text>
        </g>
        <rect x="0" y="26" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-4-31-152-26-0)" font-size="12px">
            <text x="5.5" y="43.5">
                Firebase API Call
            </text>
        </g>
        <path d="M 0 56 L 160 56" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="0" y="60" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-4-65-152-26-0)" font-size="12px">
            <text x="5.5" y="77.5">
                export(app, auth)
            </text>
        </g>
        <rect x="0" y="86" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-4-91-152-26-0)" font-size="12px">
            <text x="5.5" y="103.5">
                Via Config.js
            </text>
        </g>
        <path d="M 740 52 L 740 26 L 900 26 L 900 52" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 740 52 L 740 138 L 900 138 L 900 52" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 740 52 L 900 52" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="rgb(0, 0, 0)" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="819.5" y="43.5">
                Map Integration
            </text>
        </g>
        <rect x="740" y="52" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-744-57-152-26-0)" font-size="12px">
            <text x="745.5" y="69.5">
                @react-google-maps/api
            </text>
        </g>
        <path d="M 740 82 L 900 82" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="740" y="86" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-744-91-152-26-0)" font-size="12px">
            <text x="745.5" y="103.5">
                Map Props ...
            </text>
        </g>
        <rect x="740" y="112" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-744-117-152-26-0)" font-size="12px">
            <text x="745.5" y="129.5">
                Via map.tsx
            </text>
        </g>
        <path d="M 560 166 L 560 140 L 720 140 L 720 166" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 560 166 L 560 304 L 720 304 L 720 166" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 560 166 L 720 166" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="rgb(0, 0, 0)" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="639.5" y="157.5">
                Bus Stop Info
            </text>
        </g>
        <rect x="560" y="166" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-564-171-152-26-0)" font-size="12px">
            <text x="565.5" y="183.5">
                @react-google-maps/api
            </text>
        </g>
        <path d="M 560 196 L 720 196" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="560" y="200" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-564-205-152-26-0)" font-size="12px">
            <text x="565.5" y="217.5">
                Map Props ...
            </text>
        </g>
        <rect x="560" y="226" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-564-231-152-26-0)" font-size="12px">
            <text x="565.5" y="243.5">
                Via busstops.ts
            </text>
        </g>
        <rect x="560" y="252" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-564-257-152-26-0)" font-size="12px">
            <text x="565.5" y="269.5">
                getTransitDirections
            </text>
        </g>
        <rect x="560" y="278" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-564-283-152-26-0)" font-size="12px">
            <text x="565.5" y="295.5">
                func handler
            </text>
        </g>
        <path d="M 280 143.96 L 190 199.04" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 280 26 L 280 0 L 440 0 L 440 26" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 280 26 L 280 190 L 440 190 L 440 26" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 280 26 L 440 26" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="rgb(0, 0, 0)" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="359.5" y="17.5">
                UI/UX
            </text>
        </g>
        <rect x="280" y="26" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-284-31-152-26-0)" font-size="12px">
            <text x="285.5" y="43.5">
                components/ui
            </text>
        </g>
        <path d="M 280 56 L 440 56" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="280" y="60" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-284-65-152-26-0)" font-size="12px">
            <text x="285.5" y="77.5">
                Button.tsx
            </text>
        </g>
        <rect x="280" y="86" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-284-91-152-26-0)" font-size="12px">
            <text x="285.5" y="103.5">
                Card.tsx
            </text>
        </g>
        <rect x="280" y="112" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-284-117-152-26-0)" font-size="12px">
            <text x="285.5" y="129.5">
                LoadingPage.tsx
            </text>
        </g>
        <rect x="280" y="138" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-284-143-152-26-0)" font-size="12px">
            <text x="285.5" y="155.5">
                Map.tsx
            </text>
        </g>
        <rect x="280" y="164" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-284-169-152-26-0)" font-size="12px">
            <text x="285.5" y="181.5">
                ugathens-bus.tsx
            </text>
        </g>
        <path d="M 30 192 L 30 166 L 190 166 L 190 192" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 30 192 L 30 330 L 190 330 L 190 192" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 30 192 L 190 192" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#FFFFFF" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="109.5" y="183.5">
                Pages
            </text>
        </g>
        <path d="M 30 196 L 190 196" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="30" y="200" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-34-205-152-26-0)" font-size="12px">
            <text x="35.5" y="217.5">
                page.jsx
            </text>
        </g>
        <rect x="30" y="226" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-34-231-152-26-0)" font-size="12px">
            <text x="35.5" y="243.5">
                not-found.jsx
            </text>
        </g>
        <rect x="30" y="252" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-34-257-152-26-0)" font-size="12px">
            <text x="35.5" y="269.5">
                map -&gt; page.jsx
            </text>
        </g>
        <rect x="30" y="278" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-34-283-152-26-0)" font-size="12px">
            <text x="35.5" y="295.5">
                sign-in -&gt; page.jsx
            </text>
        </g>
        <rect x="30" y="304" width="160" height="26" fill="none" stroke="#000000" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" clip-path="url(#mx-clip-34-309-152-26-0)" font-size="12px">
            <text x="35.5" y="321.5">
                sign-up -&gt; page.jsx
            </text>
        </g>
    </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>