diff --git a/asset/system_architecture.svg b/asset/system_architecture.svg
index a16820360..bab8f5e8f 100644
--- a/asset/system_architecture.svg
+++ b/asset/system_architecture.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Do not edit this file with editors other than draw.io -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="965px" height="511px" viewBox="-0.5 -0.5 965 511" class="ge-export-svg-dark" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2023-10-18T23:38:10.194Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36&quot; etag=&quot;CRh3N2Z2cIlO4ekOo15Q&quot; version=&quot;22.0.4&quot; type=&quot;google&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;Fbg1lRs-0zUBhhGidyA8&quot;&gt;5Vtbe6o4FP01PupHCOHyaGt7Lp+dcaZn5syctwhR8xUJJ8RWz6+fIKBAQqUX1Kn6YNgJAdZa7OydxB68Xq4/cRwv7lhAwp5pBOseHPVM0zQcS/6klk1mAcBEmWXOaZDb9oZ7+otkRi83rmhAkko7wVgoaFw1+iyKiC8qNsw5e6o2m7GwetEYz4liuPdxqFq/00AscquNrH3FZ0Lni/zSJoR2VrPERWsjMyQLHLCnkgne9OA1Z0xkpeX6moQpegUu2Xm3DbW7O+MkEm1O+Pnjrv8jjoa/WN8Mf3sEJv7i9WHWyyMOV/kT5zcrNgUEnK2igKSdGD149bSggtzH2E9rnyTp0rYQy1AeAVlUbyq/z0fCBVmXTPlNfiJsSQTfyCZ5LYL5KYVkrBzrpz0BLshBXZSwR0ZuxDnp813fe1hkIUfmBShZL0EJHEZpRsPwmoWMb8+FASbuzJf2RHD2QEo1tu+S6UzWzDkOqMS0VOcQbBPjnTC3api7KuamjVTMLdQV5uijY+7Wda7BfCfp42BuH8ZcerE4LfqbkErwOTyM/DSjaTzdGbD/MN+S9/tKyG5Ibk8y7w+QShfZfnR0QRt6MHgfSgDwqpxABAZIYQXoWAEAdcSK0+2bcCJopV9vC2xXcnc/JLCWd3Jgi46fQ/YAljiJs3huRtcp/qcB1637A1ODraPD1ukMW51q7VCkEDH5oGWQ7Z8rVlT0M+86lA2AG6+3+BT1sjRPf2+5bEiioOhQ3mDWZ1atcChRFFXaqmxELPXtFepyEw7pPEqHEckNkfarlBMq4+5hXrGkQZBeRvvOVUPSd+DZbjEWe7qhuDOWve5YvpLD7yWSDIwiNzsXlnfP0CLgmoVkPUwzWgmGZC8vjvwQJwnNAlnMhWou8VZFlKyp+CevScv/pvYByo9G61Kz0SY/qDnhmYGhgXVO+GrkGMazvCVsxX3SYhCRjzUn4nDUSoJKKq/K4OB4WBg5CbGgj9UpAB35+TUmjG5fyZ3O7NqIXIwaRR/Zs+enlVP2ek/Abhh/ip4ycJSetmrcPfobBGqeUqCRvPlUoX1jYMDCkMnUskBh2Ct1e7QpH00IpxKD1Pm8t34PytI5d1lC971kadZ76lqWLaatTiJL5KHXyLJwxcaZumL33KQMgDUwgOdZBnA8ywbVcR0Z7gChV2pbcd5QXqr8sY8r9RZzj91L3ajJ/JDIzzy0sFq68CIEORvhu0ZV6RZ4pQv3ah3Bekddy1o3vZvlI9N9JvKyhMe0GhKeCYt9xqMJ9R+SxqxnZ55+/EzILdaknlliMeFRM6G3z2o00n8rHd2DbDCcfNlpjGuI1+kh5qRJjsVSZXE5qBHeRixYdFhylat8VNF5Zi38dFTRAd26XmdTaVCXfiu8/0l8tlySdLGjiTLlnPtNIsjy0hgGkr9qXoBUim0Nw7AzhnX5q8LWzRLTsDW3ERN0JkEWtPJqXybDSLOKo2O4u3dYlwoqnE04iTnzSZKQQB0DRljgKU7IxbMJNUtHOjbtzth80U6LFvtRTrJqhBAsVo0LR6hZN9oFUxVP6HYGbXPE/UyQc3CRoSno+vztbtwz5a0a1/f3WeGFcdB7BGBf8SNOfE5jkYJnGl//WJEUy7cEZOe/JIxst6Y/y9boTxdrge6G4habS97yas9Q+u1pt+1Mt18d7Pb20xXs0qEqsHvmQLOPyjS62j0CX7R95P+Iu+2Cw6g7R0a9OZ8t+ZYxjgIazVt7wEm6W/XCghRUYxeatmZL1nGziubF+XIOSDD3F625jS+QW9vzBg46Ib3BbX/0DXrj5O+r737fDB5upuO+mjP+laS5f42FYtZ9tQyHvmBlNMd4SsIJS+g2R4SjKROCLTVwC6bdP60gqMG5EVToOjVE1bHfMXVDv9MRoKdcrcuuVJvAbwXnseb0rWKSYpeE1VaY2s7p1zfOKx01zOlLNPGm1CxOGyQK68/O+svD/T8Zsub7P4TAm/8A&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(18, 18, 18);"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-dae8fc-1-7ea6e0-1-s-0"><stop offset="0%" style="stop-color: rgb(218, 232, 252); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(126, 166, 224); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-f5f5f5-1-b3b3b3-1-s-0"><stop offset="0%" style="stop-color: rgb(245, 245, 245); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(179, 179, 179); stop-opacity: 1;"/></linearGradient><style type="text/css">svg.ge-export-svg-dark &gt; * { filter: invert(100%) hue-rotate(180deg); }&#xa;svg.ge-export-svg-dark image { filter: invert(100%) hue-rotate(180deg) }</style></defs><g><rect x="149" y="5" width="810" height="500" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="159" y="45" width="265" height="450" rx="39.75" ry="39.75" fill="url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)" stroke="#6c8ebf" pointer-events="all"/><rect x="449" y="45" width="500" height="450" rx="67.5" ry="67.5" fill="url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)" stroke="#6c8ebf" pointer-events="all"/><path d="M 809 227.5 C 809 219.22 831.39 212.5 859 212.5 C 872.26 212.5 884.98 214.08 894.36 216.89 C 903.73 219.71 909 223.52 909 227.5 L 909 312.5 C 909 320.78 886.61 327.5 859 327.5 C 831.39 327.5 809 320.78 809 312.5 Z" fill="#eeeeee" stroke="#36393d" stroke-miterlimit="10" pointer-events="all"/><path d="M 909 227.5 C 909 235.78 886.61 242.5 859 242.5 C 831.39 242.5 809 235.78 809 227.5" fill="none" stroke="#36393d" stroke-miterlimit="10" pointer-events="all"/><rect x="809" y="75" width="100" height="110" rx="15" ry="15" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="809" y="355" width="100" height="110" rx="15" ry="15" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="509" y="185" width="170" height="170" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="249" y="45" width="90" height="40" 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: 88px; height: 1px; padding-top: 65px; margin-left: 250px;"><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: 18px;">Frontend</font></div></div></div></foreignObject><text x="294" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Frontend</text></switch></g><rect x="654" y="45" width="90" height="40" 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: 88px; height: 1px; padding-top: 65px; margin-left: 655px;"><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: 18px;">Backend</font></div></div></div></foreignObject><text x="699" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Backend</text></switch></g><path d="M 698.5 275 L 698.5 285.5 L 679.5 270 L 698.5 254.5 L 698.5 265 L 789.5 265 L 789.5 254.5 L 808.5 270 L 789.5 285.5 L 789.5 275 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><path d="M 696.55 235.13 L 703.81 242.72 L 679.36 244.65 L 682.38 220.32 L 689.63 227.91 L 788.45 133.38 L 781.19 125.79 L 805.64 123.86 L 802.62 148.19 L 795.37 140.6 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><path d="M 797.71 393.33 L 804.66 385.47 L 808.63 409.67 L 784.12 408.69 L 791.08 400.82 L 690.29 311.67 L 683.34 319.53 L 679.37 295.33 L 703.88 296.31 L 696.92 304.18 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><path d="M 443.5 275 L 443.5 285.5 L 424.5 270 L 443.5 254.5 L 443.5 265 L 489.5 265 L 489.5 254.5 L 508.5 270 L 489.5 285.5 L 489.5 275 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><rect x="438" y="5" width="230" height="40" 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: 228px; height: 1px; padding-top: 25px; margin-left: 439px;"><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;"><b><font style="font-size: 24px;">PopcornPicks</font></b></div></div></div></foreignObject><text x="553" y="29" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">PopcornPicks</text></switch></g><rect x="539" y="235" width="110" height="70" 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: 108px; height: 1px; padding-top: 270px; margin-left: 540px;"><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: 24px;">Flask API<br /></font><pre><font size="3">Python</font></pre></div></div></div></foreignObject><text x="594" y="274" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Flask API...</text></switch></g><rect x="829" y="115" 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: 130px; margin-left: 830px;"><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;"><pre>Recommender</pre><pre>System</pre></div></div></div></foreignObject><text x="859" y="134" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Recommende...</text></switch></g><rect x="829" y="375" width="60" height="70" 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: 410px; margin-left: 830px;"><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;"><pre>Email</pre><pre>notification</pre></div></div></div></foreignObject><text x="859" y="414" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Email...</text></switch></g><rect x="829" y="255" width="60" height="60" 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: 285px; margin-left: 830px;"><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;"><pre>Preprocessed<br />Database</pre></div></div></div></foreignObject><text x="859" y="289" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Preprocess...</text></switch></g><rect x="171.5" y="85" width="240" height="380" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="186.5" y="325" width="210" height="130" rx="19.5" ry="19.5" fill="#eeeeee" stroke="#36393d" 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: 208px; height: 1px; padding-top: 390px; margin-left: 188px;"><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;"><pre><font style="font-size: 14px;">HTML, CSS, </font></pre><pre><font size="3">Javascript/ JQuery</font></pre></div></div></div></foreignObject><text x="292" y="394" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">HTML, CSS,...</text></switch></g><rect x="186.5" y="100" width="92.5" height="205" fill="url(#mx-gradient-f5f5f5-1-b3b3b3-1-s-0)" stroke="#666666" pointer-events="all"/><rect x="299" y="100" width="97.5" height="205" fill="url(#mx-gradient-f5f5f5-1-b3b3b3-1-s-0)" stroke="#666666" pointer-events="all"/><rect x="199" y="187.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: 203px; margin-left: 200px;"><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;"><pre>Landing</pre><pre>Page</pre></div></div></div></foreignObject><text x="229" y="206" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Landing...</text></switch></g><rect x="317.75" y="187.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: 203px; 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;"><pre>Search</pre><pre>page</pre></div></div></div></foreignObject><text x="348" y="206" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Search...</text></switch></g><ellipse cx="41" cy="202.13" rx="18" ry="17.125" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 41 219.25 L 41 276.33 M 41 230.67 L 5 230.67 M 41 230.67 L 77 230.67 M 41 276.33 L 5 322 M 41 276.33 L 77 322" 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: 329px; margin-left: 41px;"><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: nowrap;">User</div></div></div></foreignObject><text x="41" y="341" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">User</text></switch></g><path d="M 69.5 262 L 69.5 272.5 L 50.5 257 L 69.5 241.5 L 69.5 252 L 129.5 252 L 129.5 241.5 L 148.5 257 L 129.5 272.5 L 129.5 262 Z" fill="none" 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.drawio.com/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>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1118px" height="535px" viewBox="-0.5 -0.5 1118 535" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2023-10-19T16:50:52.799Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36&quot; etag=&quot;ITWKwzfvl2MTquaElupz&quot; version=&quot;22.0.5&quot; type=&quot;google&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;Fbg1lRs-0zUBhhGidyA8&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-dae8fc-1-7ea6e0-1-s-0"><stop offset="0%" style="stop-color: rgb(218, 232, 252); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(126, 166, 224); stop-opacity: 1;"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-f5f5f5-1-b3b3b3-1-s-0"><stop offset="0%" style="stop-color: rgb(245, 245, 245); stop-opacity: 1;"/><stop offset="100%" style="stop-color: rgb(179, 179, 179); stop-opacity: 1;"/></linearGradient></defs><g><rect x="149" y="5.5" width="963" height="523.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="161.5" y="47" width="401.5" height="455" rx="60.22" ry="60.22" fill="url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)" stroke="#6c8ebf" pointer-events="all"/><rect x="585.5" y="47" width="499.5" height="455" rx="68.25" ry="68.25" fill="url(#mx-gradient-dae8fc-1-7ea6e0-1-s-0)" stroke="#6c8ebf" pointer-events="all"/><path d="M 945.5 229.5 C 945.5 221.22 967.89 214.5 995.5 214.5 C 1008.76 214.5 1021.48 216.08 1030.86 218.89 C 1040.23 221.71 1045.5 225.52 1045.5 229.5 L 1045.5 314.5 C 1045.5 322.78 1023.11 329.5 995.5 329.5 C 967.89 329.5 945.5 322.78 945.5 314.5 Z" fill="#eeeeee" stroke="#36393d" stroke-miterlimit="10" pointer-events="all"/><path d="M 1045.5 229.5 C 1045.5 237.78 1023.11 244.5 995.5 244.5 C 967.89 244.5 945.5 237.78 945.5 229.5" fill="none" stroke="#36393d" stroke-miterlimit="10" pointer-events="all"/><rect x="945.5" y="77" width="100" height="110" rx="15" ry="15" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="945.5" y="357" width="100" height="110" rx="15" ry="15" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="645.5" y="187" width="170" height="170" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="315" y="47" width="90" height="40" 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: 88px; height: 1px; padding-top: 67px; margin-left: 316px;"><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: 18px;">Frontend</font></div></div></div></foreignObject><text x="360" y="71" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Frontend</text></switch></g><rect x="790.5" y="47" width="90" height="40" 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: 88px; height: 1px; padding-top: 67px; margin-left: 792px;"><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: 18px;">Backend</font></div></div></div></foreignObject><text x="836" y="71" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Backend</text></switch></g><path d="M 835 277 L 835 287.5 L 816 272 L 835 256.5 L 835 267 L 926 267 L 926 256.5 L 945 272 L 926 287.5 L 926 277 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><path d="M 833.05 237.13 L 840.31 244.72 L 815.86 246.65 L 818.88 222.32 L 826.13 229.91 L 924.95 135.38 L 917.69 127.79 L 942.14 125.86 L 939.12 150.19 L 931.87 142.6 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><path d="M 934.21 395.33 L 941.16 387.47 L 945.13 411.67 L 920.62 410.69 L 927.58 402.82 L 826.79 313.67 L 819.84 321.53 L 815.87 297.33 L 840.38 298.31 L 833.42 306.18 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><path d="M 582.5 277 L 582.5 287.5 L 563.5 272 L 582.5 256.5 L 582.5 267 L 626 267 L 626 256.5 L 645 272 L 626 287.5 L 626 277 Z" fill="#f0a30a" stroke="#bd7000" stroke-miterlimit="10" pointer-events="all"/><rect x="515.5" y="7" width="230" height="40" 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: 228px; height: 1px; padding-top: 27px; margin-left: 517px;"><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;"><b><font style="font-size: 24px;">PopcornPicks</font></b></div></div></div></foreignObject><text x="631" y="31" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">PopcornPicks</text></switch></g><rect x="675.5" y="237" width="110" height="70" 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: 108px; height: 1px; padding-top: 272px; margin-left: 677px;"><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: 24px;">Flask API<br /></font><pre><font size="3">Python</font></pre></div></div></div></foreignObject><text x="731" y="276" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Flask API...</text></switch></g><rect x="965.5" y="117" 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: 132px; margin-left: 967px;"><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;"><pre>Recommender</pre><pre>System</pre></div></div></div></foreignObject><text x="996" y="136" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Recommende...</text></switch></g><rect x="965.5" y="377" width="60" height="70" 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: 412px; margin-left: 967px;"><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;"><pre>Email</pre><pre>notification</pre></div></div></div></foreignObject><text x="996" y="416" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Email...</text></switch></g><rect x="965.5" y="257" width="60" height="60" 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: 287px; margin-left: 967px;"><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;"><pre>Preprocessed<br />Database</pre></div></div></div></foreignObject><text x="996" y="291" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Preprocess...</text></switch></g><rect x="177.75" y="87" width="364.5" height="380" fill="#eeeeee" stroke="#36393d" pointer-events="all"/><rect x="195" y="324" width="331.5" height="130" rx="19.5" ry="19.5" fill="#eeeeee" stroke="#36393d" 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: 330px; height: 1px; padding-top: 389px; margin-left: 196px;"><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;"><pre><font style="font-size: 14px;">HTML, CSS, JQuery, Bootstrap 5 </font></pre><pre><font size="3">Javascript</font></pre></div></div></div></foreignObject><text x="361" y="393" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">HTML, CSS, JQuery, Bootstrap 5...</text></switch></g><rect x="195" y="102" width="92.5" height="205" fill="url(#mx-gradient-f5f5f5-1-b3b3b3-1-s-0)" stroke="#666666" pointer-events="all"/><rect x="307.5" y="102" width="97.5" height="205" fill="url(#mx-gradient-f5f5f5-1-b3b3b3-1-s-0)" stroke="#666666" pointer-events="all"/><rect x="207.5" y="189.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: 205px; margin-left: 209px;"><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;"><pre>Landing</pre><pre>Page</pre></div></div></div></foreignObject><text x="238" y="208" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Landing...</text></switch></g><rect x="326.25" y="189.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: 205px; margin-left: 327px;"><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;"><pre>Search</pre><pre>page</pre></div></div></div></foreignObject><text x="356" y="208" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Search...</text></switch></g><ellipse cx="41" cy="204.13" rx="18" ry="17.125" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><path d="M 41 221.25 L 41 278.33 M 41 232.67 L 5 232.67 M 41 232.67 L 77 232.67 M 41 278.33 L 5 324 M 41 278.33 L 77 324" 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: 331px; margin-left: 41px;"><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: nowrap;">User</div></div></div></foreignObject><text x="41" y="343" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">User</text></switch></g><path d="M 69.5 264 L 69.5 274.5 L 50.5 259 L 69.5 243.5 L 69.5 254 L 129.5 254 L 129.5 243.5 L 148.5 259 L 129.5 274.5 L 129.5 264 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="426.75" y="102" width="97.5" height="205" fill="url(#mx-gradient-f5f5f5-1-b3b3b3-1-s-0)" stroke="#666666" pointer-events="all"/><rect x="445.5" y="189.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: 205px; margin-left: 447px;"><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;"><pre>Success</pre><pre>page</pre></div></div></div></foreignObject><text x="476" y="208" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Success...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/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>
\ No newline at end of file