assets/components-api.svg

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!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="1171px" height="651px" viewBox="-0.5 -0.5 1171 651" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2022-01-08T03:14:25.561Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/15.4.0 Chrome/91.0.4472.164 Electron/13.5.0 Safari/537.36&quot; version=&quot;15.4.0&quot; etag=&quot;nETOKx5B725auZ3936YD&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;7dZlZMIH8eYIHBHYLmAI&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="0" y="0" width="1170" height="650" fill="#fcfcfc" stroke="#666666" pointer-events="none"/><rect x="350" y="270" width="480" height="360" fill="none" stroke="#000000" stroke-dasharray="3 3" pointer-events="none"/><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-end; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 267px; margin-left: 631px;"><div 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: none; white-space: normal; overflow-wrap: normal;">API APP + RESOURCE SERVER</div></div></div></foreignObject><text x="730" y="267" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">API APP + RESOURCE SERVER</text></switch></g><rect x="370" y="470" width="200" height="140" fill="#e1d5e7" stroke="#9673a6" pointer-events="none"/><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: 198px; height: 1px; padding-top: 540px; margin-left: 371px;"><div 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: none; white-space: normal; overflow-wrap: normal;">ROUTER<br />[component: Express Router]<br /><br />Receive the request and depending on the endpoint which it targets, it performs an action.</div></div></div></foreignObject><text x="470" y="544" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">ROUTER...</text></switch></g><path d="M 470 430 L 470 463.63" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 470 468.88 L 466.5 461.88 L 470 463.63 L 473.5 461.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><rect x="370" y="290" width="200" height="140" fill="#e1d5e7" stroke="#9673a6" pointer-events="none"/><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: 198px; height: 1px; padding-top: 360px; margin-left: 371px;"><div 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: none; white-space: normal; overflow-wrap: normal;">AUTH MIDDLEWARE<br />[component: Express function]<br /><br />Verify if request comes from authenticated and authorized user.</div></div></div></foreignObject><text x="470" y="364" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">AUTH MIDDLEWARE...</text></switch></g><rect x="615" y="470" width="200" height="140" fill="#e1d5e7" stroke="#9673a6" pointer-events="none"/><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: 198px; height: 1px; padding-top: 540px; margin-left: 616px;"><div 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: none; white-space: normal; overflow-wrap: normal;">RESOURCE<br />[component: JavaScript class]<br /><br />Class containing crud operations and the business logic.</div></div></div></foreignObject><text x="715" y="544" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">RESOURCE...</text></switch></g><path d="M 570 540 L 608.63 540" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 613.88 540 L 606.88 543.5 L 608.63 540 L 606.88 536.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 715 470 L 715 436.37" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 715 431.12 L 718.5 438.12 L 715 436.37 L 711.5 438.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><rect x="615" y="290" width="200" height="140" fill="#e1d5e7" stroke="#9673a6" pointer-events="none"/><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: 198px; height: 1px; padding-top: 360px; margin-left: 616px;"><div 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: none; white-space: normal; overflow-wrap: normal;">MODEL<br />[component: Sequelize class]<br /><br />Abstraction of a database table.</div></div></div></foreignObject><text x="715" y="364" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">MODEL...</text></switch></g><path d="M 910 413.33 L 910 306.67 C 910 291.94 963.73 280 1030 280 C 1096.27 280 1150 291.94 1150 306.67 L 1150 413.33 C 1150 428.06 1096.27 440 1030 440 C 963.73 440 910 428.06 910 413.33 Z" fill="#f5f5f5" stroke="#666666" stroke-miterlimit="10" pointer-events="none"/><path d="M 910 306.67 C 910 321.39 963.73 333.33 1030 333.33 C 1096.27 333.33 1150 321.39 1150 306.67" fill="none" stroke="#666666" stroke-miterlimit="10" pointer-events="none"/><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: 238px; height: 1px; padding-top: 375px; margin-left: 911px;"><div 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: none; white-space: normal; overflow-wrap: normal;">DATABASE<br />[container: PostgreSQL]<br />[deployment: Amazon RDS]<br /><br />Stores customer profile, shopping history, inventory, etc.</div></div></div></foreignObject><text x="1030" y="379" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">DATABASE...</text></switch></g><path d="M 815 360 L 903.63 360" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 908.88 360 L 901.88 363.5 L 903.63 360 L 901.88 356.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><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: 1px; height: 1px; padding-top: 360px; margin-left: 863px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; background-color: rgb(255, 255, 255); white-space: nowrap;">store</div></div></div></foreignObject><text x="863" y="363" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">store</text></switch></g><path d="M 210 360 L 363.63 360" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 368.88 360 L 361.88 363.5 L 363.63 360 L 361.88 356.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><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: 1px; height: 1px; padding-top: 360px; margin-left: 290px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; background-color: rgb(255, 255, 255); white-space: nowrap;"><span style="background-color: rgb(252 , 252 , 252)">call API</span><br /><span style="background-color: rgb(252 , 252 , 252)">[HTTPS/JSON]</span></div></div></div></foreignObject><text x="290" y="363" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">call API...</text></switch></g><rect x="20" y="290" width="190" height="140" fill="#ffe6cc" stroke="#d79b00" pointer-events="none"/><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: 188px; height: 1px; padding-top: 360px; margin-left: 21px;"><div 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: none; white-space: normal; overflow-wrap: normal;">CLIENT<br /><br />Web app || Mobile app</div></div></div></foreignObject><text x="115" y="364" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">CLIENT...</text></switch></g><rect x="370" y="20" width="200" height="140" fill="#fff2cc" stroke="#d6b656" pointer-events="none"/><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: 198px; height: 1px; padding-top: 90px; margin-left: 371px;"><div 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: none; white-space: normal; overflow-wrap: normal;">AUTH SERVER<br />[container: Auth0]<br /><br />Authentication and authorization services.<br />Roles and persmissions management.</div></div></div></foreignObject><text x="470" y="94" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">AUTH SERVER...</text></switch></g><path d="M 420 290 L 420 166.37" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 420 161.12 L 423.5 168.12 L 420 166.37 L 416.5 168.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><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: 1px; height: 1px; padding-top: 218px; margin-left: 420px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; background-color: rgb(255, 255, 255); white-space: nowrap;"><span style="background-color: rgb(252 , 252 , 252)">redirect</span></div></div></div></foreignObject><text x="420" y="221" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">redirect</text></switch></g><path d="M 520 160 L 520 240 L 520 283.63" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 520 288.88 L 516.5 281.88 L 520 283.63 L 523.5 281.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><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: 1px; height: 1px; padding-top: 218px; margin-left: 520px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; background-color: rgb(255, 255, 255); white-space: nowrap;"><span style="background-color: rgb(252 , 252 , 252)">access token</span></div></div></div></foreignObject><text x="520" y="221" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">access token</text></switch></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%">Viewer does not support full SVG 1.1</text></a></switch></svg>