docs/diagrams/out/Architecture.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="812px" preserveAspectRatio="none" style="width:819px;height:812px;background:#FFFFFF;" version="1.1" viewBox="0 0 819 812" width="819px" zoomAndPan="magnify"><defs/><g><!--MD5=[a7d08569755d27db7d73341e10a19ec9]
entity reactapp--><g id="elem_reactapp"><rect fill="#438DD5" height="156.0469" rx="2.5" ry="2.5" style="stroke:#3C7FC0;stroke-width:0.5;" width="215" x="104" y="7"/><image height="48" width="48" x="187.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACwklEQVR42u2YTUodQRSFe28uwA24ADeQBbgAHWUkzjLIIMM3cyTOAplkEEQhIARBEBQVFCGgHxw4XOqvu1/qJRK6KZru6rpVp+7Pubd62Nr/8a7asABaAC2A3hWgg+Orz19vuO9++tkeyQAP3gignaOLh+ffr+E6v34qwqKTT3Hk1d3L9sezzoC0xuHpNcg+fLlcfb/VYuggDnM/DwxjMCK8frt87AmIefNJ2bRQqt+v3BkfR56c39M/UUmTAO2tfjFj0RvQkIxCk2Jq4iisGyCgNGYUptx8bgjW9rMRQHZhHmoR1xmQdM49/yT/wFJy56LzNsTXBKQtEi9JfxJBPDSGjVLXvLBnRpThoMN8sqP6pSFpS5hY3mHVP8poYsWE8UYvpBDhTuvDQ2hChogEjTIU5IQV2qKxe5qeTQQMQ9b8zgM9CUXNAASUGD7yWQW2eJIla7KCK6eRAyHu2UDZ8KehTS1xT2xRIKQzT4puQE+zlygIxAKI2F5M5dyS+34VkGTyDGAlRQcHRzSKuUqOrMEJfTOttFUk0qEY4UWKk6V0CSsqSUoAXqWnfHAxD+afhqKxaqQsY3nHygnJZdkGVVo2N9w8QNrWLEC1fCLZ3GozTKZPiRVyk9XsW9xbHm5Do6JIRq/h1I75olMXa5Vy2GsiLWxYJlx5UjSrwj4xh7wnCXunl1qtMjQSqjmaSR3G04lRltLeEI802yjWhtHiFcVGR0lSB7iVMdR4tcUjCHP0aN04I7nSYm6aeHVOruax6Mg+djm9oBWa04IObkn50RNQjcSEKSnQ8lK1f4E2vYSNWtxgCfuHRf7fPnX8g2NQY0ZZqn1QbO9n/ShL8rYzgI/Scuq8kFL/aPE6j4d8xNGRo5YBYqkZfzbU3Gt9QChARom0O/F3DKw4UT2zf1jpOEYAjy6w8R9Wyz/GBdAC6L8B9AbFCetiU5P5qQAAAABJRU5ErkJggg==" y="17"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="79" x="172" y="81.6094">React App</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="33" x="195" y="97.582">[react]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="209.5" y="114.752"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="191" x="114" y="132.3613">Creates web app for the users</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="91" x="166" y="149.9707">to interact with</text></g><!--MD5=[e2307af040e3f87d22824e7603ca28ec]
entity api--><g id="elem_api"><rect fill="#438DD5" height="156.0469" rx="2.5" ry="2.5" style="stroke:#3C7FC0;stroke-width:0.5;" width="199" x="7" y="255"/><image height="48" width="48" x="82.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAABg0lEQVR42u2WQUoDQRBF524ewAt4AC/gATyArlyJOxcuXGaXlbgT3LgQiSAEJBAIKFFQBKF9+MO37ZlpZiWDVNOEnvyuqldT1Z00Wwe3o5pNAAVQAAVQAAVQAAVQAP1foNnybXLztH10NyKglNLFbB1AfwNE7fcnj337dk7ud08fKirmfUAYVhrrcLrAvAQ6vlym74HTduCzq5XU6/lrblyoGjkQmzHR94QoDMmfQ0A4PDA3QNi8vH+m34N9kvfO523VrvHYVg3kJD0Wzx/OlhA4z9EF1/DG/G7yXDuzt1+pzp6F1wYyK05UTSdDBbXgExUUJkzA/ACpzCYYDkSwzqYWkGgUxbeUgYTC5LEEKgiGA/FIAKYICiD2qG3z5suBCKFWo14dQC58BcivxGXKO8lAgFolSt7OAKlN1TcEpZ+YG6DiZCHjonKIfIZZ8Nin5kcsT8N3ATS6aMQn6EEXowJ33ghyjdSnknflN04nn5ytxt+PAAqgAAqgAAqgAAqgkQF9ARCF0j1kxVCQAAAAAElFTkSuQmCC" y="265"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="26" x="93.5" y="329.6094">API</text><text fill="#FFFFFF" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="46" x="83.5" y="345.582">[node.js]</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="104.5" y="362.752"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="175" x="17" y="380.3613">Backend logic to serve data</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="130" x="41.5" y="397.9707">and handle requests</text></g><!--MD5=[5f2f9dbbee692058d60489180693f774]
entity users--><g id="elem_users"><rect fill="#686868" height="140.9531" rx="2.5" ry="2.5" style="stroke:#8A8A8A;stroke-width:0.5;" width="204" x="354.5" y="14.5"/><image height="48" width="48" x="432.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAB+UlEQVR42u2YoZLDMAxE/bmHi4uDi4uDg4uDi4uLi8Nzb84zPo1sy0rSuR7w0sTyeleSlYSvf4bQCXVCnVAntBnn8/lyuQzDcDqdPkmI7W+327Isq8Dz+YTcBwihh6IiMc/znxLCI4PNQU57COHL6sA+7wqExnF8vV5ERAayRD1lm9UHeOdrH49HjHy/31G6TQip7bj5CwZk3V2vV/UUWjmnoFK1GFfqFI/oBAFTSTpVDJ7T4+DWBFJplMtTVFETwtfiGrRtvlNEcoS8bL5TIDRNU1NYI7RxDKMULMtqTiN48x0780Cs3Ga7Cs2qziu/JqSSRyUH1ihO1IerDxGILeEOlVQmCs1Mqi3E8fkHtba5/3I1Eq7Y8XZ2auQh3CBgDBU84sSoBQn0N86dXJORG52a6LWmh/c1C5zA/VqqcaQyoWIVpGUHpxw75ySn0CwciCbXWImKcfaIV6/0FAtoEElmFmKipzfKbhTsCyFVb160fqTGYRw7ORBsv2LqwGY9Biyz7+bUey1CqXE150MPYqLUBgpNqGhZlNHTlzddbcZev4SKGdesvq2IMuQtQI43QU5nk0BU2H+VehCvUjJSbSR7b2h+YLyRUPE23XaX1XKwExJ4I6F8tNpDaNN3j3PEPvrlSi1QmcsBYJZzSOo/rDqhTqgT6oQUvgFL1wh8yb9bnQAAAABJRU5ErkJggg==" y="24.5"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="45" x="434" y="89.1094">Users</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="454.5" y="107.1582"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="176" x="368.5" y="124.7676">People who visit the website</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="144" x="384.5" y="142.377">and want a nice UI / UX</text></g><!--MD5=[79a439086b036a57b90a01d7b2f8bbd1]
entity admin--><g id="elem_admin"><rect fill="#08427B" height="140.9531" rx="2.5" ry="2.5" style="stroke:#073B6F;stroke-width:0.5;" width="219" x="594" y="14.5"/><image height="48" width="48" x="679.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAABuUlEQVR42u2Yv0oEMRDGp/QRfIR7BVs7Gx9AH0CwtrtKLNXSRsRSG8HCxkbQVrSykoOrzlILC9v4gwMRNptMMsnu3nHDFMcSLh/f/PsmsrY5HpTLUgHaOri8uHt+eJm8vs/wm8e38fn9aPekB0D7p7df3z+uxYC4sXfWEaD17SPIcAqDreqAQBMgpmnHV091ASm5+W8EtxYgQuCyDF7LA+JPXa5RieUBwbwzWHlAVLIFEB2rMKCk4rK0AC0gZzN9/S8soOnHpwWQvhtpATE4h5XUlrKnIKp06uxCS5poCzs6stvjzuF1XfmRVG4ZkihHMSp5SuXGJGG5LEAVPSIpb4qJfIQzQeF6OMORGXSHbCjLuAb1CYhti7whQHQ5PLrlcHh+kiAyN/RxFE0/9OYvH+dJw33gw/nB4bYa5Ltmokl4MTXqMi+sMFtSfFBEDWoD67bUkPSa+d/Gk3i7i6tvxE4LyLhgGOeu9ELPXzLFAVHJrkNrZreUFfN28S9l1x27upVSLwp5hlIYFqBm8a8ADRxQJIfszy72ZxrpeKxGR6xnltEbupkbXtkpbQsh6ozhV8kDCni1dcT8F2bsoAKLcdt7AAAAAElFTkSuQmCC" y="24.5"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="49" x="679" y="89.1094">Admin</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="701.5" y="107.1582"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="191" x="608" y="124.7676">Person who edits content over</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="82" x="662.5" y="142.377">the Web App</text></g><!--MD5=[93c709146f93ed26a8c4a4622e873365]
entity githubpages--><g id="elem_githubpages"><rect fill="#1168BD" height="123.3438" rx="2.5" ry="2.5" style="stroke:#3C7FC0;stroke-width:0.5;" width="220" x="346.5" y="271.5"/><image height="48" width="48" x="432.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACGklEQVR42u2YMUoGMRCFcwVv4BE8gkfwCJaWYm1hZau1jY21tjYiCjYiWghaWPgXNgoigljYrB+uhCWTTCbZVRQSUuxmM5OXybw3Yd3cytGf6q4BaoAaoAbI1OfXTpZ3rndPH65mry9vH91X44FXBvnEhF8CtLh5fnDx2Bka05j8g4DYtBFKAKsoWlZAS9uX/mhKG4aYTwlode+2G91wMg2gSdDYMbnsSXWTtuzZOT2Lg7xhcGH9bGP/LptPTGBan87BuJ7jGiAUZegLjRli3Tqc9ZLDpkFJ54FDYZBPw1UxHPphQg0gFpAErtO645vnwBXOiwEF4QkiVNSDCOlBSgKSWXL/9F4HCEOZYWWAkHyZpxV1oMJbHBAECezJgzE1XKYRSxQAkjXLqLOpLneYoogzpqG9GBkFNkWRfwto5JHJglgGSOYg4jsGEOZGlrifVsWUFKW00dmvHNVpFL0yUAQLAMlC1it1xdUdExkepZw5e5D7g1PqYnRjkh96FXJZXmCMrA39cvzZMsIEmYgWzmr3IV9fe3u5QJR6klD2ypoBNEztPgeD+EePL5p/lnQ23ak9Ar8t4sQzXbnTKBfcbJF2WY5473ZtjBLCyFNnYYrHRFT8MSmuo8zCiYWhzsheuWlFu+VkRox64ez6FhQ4RUsCQBjaFbXs7wcE8YtZAPFQWnBq/g8Bi00rOc4nJuj0br/0GqAGqAH67p8/EkVSrYjGTgAAAABJRU5ErkJggg==" y="281.5"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="103" x="405" y="346.1094">Github Pages</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="454.5" y="364.1582"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="196" x="360.5" y="381.7676">Service to host website content</text></g><!--MD5=[920f55dacc69cbaf43b0aa823f7e1721]
entity mongodb--><g id="elem_mongodb"><rect fill="#1168BD" height="140.9531" rx="2.5" ry="2.5" style="stroke:#3C7FC0;stroke-width:0.5;" width="190" x="293.5" y="503"/><image height="48" width="48" x="364.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAABl0lEQVR42tWZPUoDURSF3xbcgUvIElyCS7C0FGsLK1utbWysTWsjomAjooUQCwtT2CiEIIiFzfXigzDEyeSd8+6dXA/TJvPlvXN/k9a2L0I9yeRb1nevYgHtnD5tHt1HARrs3Uw/vx/GHyGAlObl/Ut+pee0YqB8NtJQ/cWlGiPP0WRtHNyuBuhyNJE2KaWeXN9AahdZLHVVr0CLLqupw/Nxf0DDuzcpEGemRESWlInLTMnKy63aOn70BSo/HtrdGJBaVUChTsKAlgbXX2kEeAHpbxVKXkD7Z88cEFTgklN8NXVy/eoCNGszUEGxBgBJheyBtH7VAJXX/+SUEuls9G+B6CQU9ITsPVRpapewJwrZrMuOlan1gy5A3Y19h7QIugDRNoJaouTXvxIGgoG0kXC9L/cmX4WujmAgKGVDnRA/KOprCt1DbNbI2b6kWSOGMh5oaWkjLqt2HdMRcVBqttygtTLV0BjsGOeY0LHQZQuriSA3ArRv7PfUORHUbPLsF+foyOwLlJ0UCCjXk0BAOU8GAjL8Q+gHdXHWxbmG3wEAAAAASUVORK5CYII=" y="513"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="73" x="352" y="577.6094">Mongodb</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="386.5" y="595.6582"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="162" x="307.5" y="613.2676">Database to hold views of</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="79" x="349" y="630.877">website data</text></g><!--MD5=[fb96cda1e54d33aeb4c1270b4462e657]
entity dropbox--><g id="elem_dropbox"><rect fill="#1168BD" height="140.9531" rx="2.5" ry="2.5" style="stroke:#3C7FC0;stroke-width:0.5;" width="220" x="518.5" y="503"/><image height="48" width="48" x="604.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACCElEQVR42u1YPUoFMRDOFbyBR/AIHsEjWFqKtYWVrdY2Ntba2ogo2IhoIWhh4StsFEQEsbCJHwyGkOz85e3CExJSLPsmyZeZb76Zt2Fp42yhZuiAOqAOqAP6V4BWtq/uZp/Pb9/LWxeyJQzIcnX3eipAO8dP8W98fP0IJ+EnGCTjvdPZyIBwAO4aq7F+cF8b42VtieVr+7fjAML9Ij+K2+derMfh5ctcgDjHFOPk5pXs8aAaI5SyqwJHSdwmmgegWNDkruLSYhjQ5tGjffcUNTm4xcARvpDBseqmSGwIQaEL5w/v6sLBbNA5hN05DoEKwqa4TJ72RboVd3BnWU0OvFGFEbNmIZynLgwuSUSMXMoLYyxxyaNVqREgl+AWSibEtwUQFSbQgksN+SZYqFLHAagoTHVmCTmRZ5wqiSZAnCCpRYDTJNCxHZAsvly9xEu54KRS4ysdKTvkkWcyHowFRKBU4JgYPQORdVUbQayDkFmWIpB2t5QaizwGS9LK7QScD6pi4kE1VgUpWESIYwZ4ljcqVFI48lnqhkOp63o5eDypVHEBi2NamvzcVUKAqP9P5c9YiVsAYWuAgKtoWmiOSXo9CSDyB/HX2EmSJRZOAkjNuObMmuuvtKtx9hKo8b+9pXH2tnIjfGzgGue2tmm0rx9FBBtiNP7nGIpgc4z6B6sOqAPqgBYM0C99U2pHvVNTrAAAAABJRU5ErkJggg==" y="513"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="67" x="595" y="577.6094">Dropbox</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="626.5" y="595.6582"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="192" x="532.5" y="613.2676">Service to upload pictures and</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="197" x="530" y="630.877">serve over URL for blog/project</text></g><!--MD5=[445cfa41227a61a4289e86eeedbe0656]
entity deta--><g id="elem_deta"><rect fill="#1168BD" height="140.9531" rx="2.5" ry="2.5" style="stroke:#3C7FC0;stroke-width:0.5;" width="171" x="21" y="503"/><image height="48" width="48" x="82.5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACFklEQVR42u2ZPUoEQRCF5wrewCN4BI/gEQwNxdjAyFRjExNjTU1EFExENBDWwMANTBREBDEwGT8YGNbu2qr+mbYH3KKDxe2dfl393quatlnaOBvVaBaA/hug5a2LnePHk5sXxvrBfX1Ad9OPdiYOL59rAlrZvmq9qAmIMxoXoL3TqQ+ItBUEtHn0AEvOJ2+ru9cmgbqA4/5M/vj0+sX8tf3bdEBOApxnienpwpEbTJ/9lk2mACIl/kqkir0C5f3zu1WDfICDwQf/W8wiGhALt8VCJEBKhgYJsjsMh4YKndeGyiBNyI4hisgVP3RG24DYjfJ0Uui4DgftaCr8sIIAicWhk5uiFH4lWhRZzAUkFgcKe0LdNQWfyCGWCe9MfLsy2wENkGhFioUEJlisLXMBoQI2waGIqglPTz/meTrP73xfAwQOXbT65sShiE5k5C9AposkNKkhJSgdUBSBeg4UBFQiQ4451ecQdm+ojBnwX1THUCpj56zC8AttdLXP9yH9CYZT+4eY6dTmoRuAxDYtsJaJrUtuLZsnvbRqH/LWlth+pPVDAwAyRRvbMWZxSNRIzZ7afPlKDuV1u0nrpsslqYmiM9qByBDLTB4zoQu+Hyv+iI7RKTpKGXeY68zMei+D1+yVfIjqEGuLg7sngHKLUvYGzfTigoBYe1w3aGJhqQzIsfLAulv24hzid93WKO6pF/9a+PPxAzl9xRwkeOXhAAAAAElFTkSuQmCC" y="513"/><text fill="#FFFFFF" font-family="sans-serif" font-size="16" font-weight="bold" lengthAdjust="spacing" textLength="35" x="89" y="577.6094">Deta</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="104.5" y="595.6582"> </text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="143" x="35" y="613.2676">Service to host the API</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="139" x="37" y="630.877">backend server / logic</text></g><!--MD5=[4c42a3aa510e8f9838da82158a4358b3]
link users to githubpages--><g id="link_users_githubpages"><path d="M456.5,155.51 C456.5,189.17 456.5,229.47 456.5,263.06 " fill="none" id="users-to-githubpages" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="456.5,271.44,459.5,263.44,453.5,263.44,456.5,271.44" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="28" x="459.5" y="206.457">uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="32" x="457.5" y="221.5508">[https]</text></g><!--MD5=[97f7df892904bd81dc7ac94a7921b1c9]
link admin to githubpages--><g id="link_admin_githubpages"><path d="M633.71,155.51 C599.05,190.03 557.39,231.52 523.16,265.61 " fill="none" id="admin-to-githubpages" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="517.3,271.44,525.0871,267.9241,520.8552,263.6708,517.3,271.44" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="28" x="612.5" y="206.457">uses</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="62" x="595.5" y="221.5508">[https, auth]</text></g><!--MD5=[e24912bb040aee399d002f326bbd2f6b]
link reactapp to githubpages--><g id="link_reactapp_githubpages"><path d="M288.35,163.16 C321.11,196.06 358.96,234.06 390.44,265.67 " fill="none" id="reactapp-to-githubpages" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="396.24,271.5,392.7241,263.7129,388.4708,267.9448,396.24,271.5" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="93" x="350.5" y="206.457">gets deployed to</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="89" x="352.5" y="221.5508">[node gh-pages]</text></g><!--MD5=[37101c3b049428e0eda76e732a4cc678]
link githubpages to dropbox--><g id="link_githubpages_dropbox"><path d="M500.35,394.8 C522.65,425.72 549.97,463.61 573.65,496.45 " fill="none" id="githubpages-to-dropbox" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="578.34,502.95,576.0868,494.7085,571.2233,498.2222,578.34,502.95" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="75" x="553.5" y="454.457">gets pictures</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="28" x="577" y="469.5508">[URI]</text></g><!--MD5=[777381e2370812674bb2bb4ab32362dd]
link deta to mongodb--><g id="link_deta_mongodb"><path d="M192.26,573.5 C221.56,573.5 254.65,573.5 285.19,573.5 " fill="none" id="deta-to-mongodb" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="293.31,573.5,285.31,570.5,285.31,576.5,293.31,573.5" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="53" x="216.25" y="551.957">gets data</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="65" x="210.25" y="567.0508">[mongoose]</text></g><!--MD5=[90a9681e0292b15bab0f6a749c0ca081]
link api to deta--><g id="link_api_deta"><path d="M106.5,411.1 C106.5,437.87 106.5,467.88 106.5,494.7 " fill="none" id="api-to-deta" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="106.5,502.92,109.5,494.92,103.5,494.92,106.5,502.92" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="93" x="107.5" y="454.457">gets deployed to</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="53" x="127.5" y="469.5508">[deta CLI]</text></g><!--MD5=[97291174c3311c29521583611d20b4a2]
link githubpages to deta--><g id="link_githubpages_deta"><path d="M367.27,394.8 C315.71,429.94 250.94,474.07 198.85,509.57 " fill="none" id="githubpages-to-deta" style="stroke:#666666;stroke-width:1.0;"/><polygon fill="#666666" points="192.24,514.07,200.5419,512.0503,197.1668,507.0896,192.24,514.07" style="stroke:#666666;stroke-width:1.0;"/><text fill="#666666" font-family="sans-serif" font-size="12" font-weight="bold" lengthAdjust="spacing" textLength="93" x="293.5" y="454.457">makes requests</text><text fill="#666666" font-family="sans-serif" font-size="12" font-style="italic" lengthAdjust="spacing" textLength="32" x="324" y="469.5508">[https]</text></g><rect fill="#FFFFFF" height="139.2656" id="_legend" rx="7.5" ry="7.5" style="stroke:none;stroke-width:1.0;" width="133" x="664" y="656.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacing" textLength="53" x="670" y="679.4863">Legend</text><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="4" x="723" y="679.4863"> </text><rect fill="#08427B" height="17.6094" style="stroke:none;stroke-width:1.0;" width="121" x="670" y="682.5625"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="44" x="674" y="697.0957">person</text><rect fill="#1168BD" height="17.6094" style="stroke:none;stroke-width:1.0;" width="121" x="670" y="700.1719"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="44" x="674" y="714.7051">system</text><rect fill="#438DD5" height="17.6094" style="stroke:none;stroke-width:1.0;" width="121" x="670" y="717.7813"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="59" x="674" y="732.3145">container</text><rect fill="#686868" height="17.6094" style="stroke:none;stroke-width:1.0;" width="121" x="670" y="735.3906"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="98" x="674" y="749.9238">external person</text><rect fill="#999999" height="17.6094" style="stroke:none;stroke-width:1.0;" width="121" x="670" y="753"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="98" x="674" y="767.5332">external system</text><rect fill="#B3B3B3" height="17.6094" style="stroke:none;stroke-width:1.0;" width="121" x="670" y="770.6094"/><text fill="#FFFFFF" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="113" x="674" y="785.1426">external container</text><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="664.9531" y2="664.9531"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="682.5625" y2="682.5625"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="700.1719" y2="700.1719"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="717.7813" y2="717.7813"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="735.3906" y2="735.3906"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="753" y2="753"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="770.6094" y2="770.6094"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="791" y1="788.2188" y2="788.2188"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="670" x2="670" y1="664.9531" y2="788.2188"/><line style="stroke:#FFFFFF;stroke-width:1.0;" x1="791" x2="791" y1="664.9531" y2="788.2188"/><!--MD5=[2b3b549264f48e78dedbc7c509ce164d]
@startuml Architecture
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
!define FONTAWESOMEOLD https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome

!include DEVICONS/nodejs.puml
!include DEVICONS/react.puml
!include DEVICONS/mongodb.puml
!include DEVICONS/dropbox.puml
!include DEVICONS/aptana.puml
!include DEVICONS/github_badge.puml
!include FONTAWESOME/users.puml
!include FONTAWESOME/user.puml

skinparam backgroundColor #fff

LAYOUT_WITH_LEGEND()

  Container(reactapp, "React App", "react", "Creates web app for the users to interact with", "react")
  Container(api, "API", "node.js", "Backend logic to serve data and handle requests", "nodejs")

  Person_Ext(users, "Users", "People who visit the website and want a nice UI / UX", "users")
  Person(admin, "Admin", "Person who edits content over the Web App", "user")
 
  System(githubpages, "Github Pages", "Service to host website content", "github_badge")
  System(mongodb, "Mongodb", "Database to hold views of website data", "mongodb")
  System(dropbox, "Dropbox", "Service to upload pictures and serve over URL for blog/project", "dropbox")
  System(deta, "Deta", "Service to host the API backend server / logic", "aptana")


Rel(users, githubpages, "uses", "https")
Rel(admin, githubpages, "uses", "https, auth")
Rel(reactapp, githubpages, "gets deployed to", "node gh-pages")
Rel(githubpages, dropbox, "gets pictures", "URI")

Rel_R(deta, mongodb, "gets data", "mongoose")
Rel(api, deta, "gets deployed to", "deta CLI")
Rel(githubpages, deta, "makes requests", "https")


@enduml

@startuml Architecture
















skinparam defaultTextAlignment center

skinparam wrapWidth 200
skinparam maxMessageSize 150

skinparam LegendBorderColor transparent
skinparam LegendBackgroundColor transparent
skinparam LegendFontColor #FFFFFF

skinparam shadowing<<legendArea>> false
skinparam rectangle<<legendArea>> {
    backgroundcolor #00000000
    bordercolor #00000000
}

skinparam rectangle {
    StereotypeFontSize 12
    shadowing false
}

skinparam database {
    StereotypeFontSize 12
    shadowing false
}

skinparam queue {
    StereotypeFontSize 12
    shadowing false
}

skinparam arrow {
    Color #666666
    FontColor #666666
    FontSize 12
}

skinparam actor {
    StereotypeFontSize 12
    shadowing false
    style awesome
}

skinparam person {
    StereotypeFontSize 12
    shadowing false
}

skinparam rectangle<<boundary>> {
    Shadowing false
    StereotypeFontSize 6
    StereotypeFontColor transparent
    BorderStyle dashed
}

skinparam package {
    StereotypeFontSize 6
    StereotypeFontColor transparent
    FontStyle plain
    BackgroundColor transparent
}
















































































skinparam rectangle<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<boundary>>StereotypeFontColor transparent
skinparam rectangle<<boundary>>StereotypeFontColor transparent


skinparam rectangle<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<enterprise_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<enterprise_boundary>>StereotypeFontColor transparent
skinparam rectangle<<enterprise_boundary>>StereotypeFontColor transparent



skinparam rectangle<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<system_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<system_boundary>>StereotypeFontColor transparent
skinparam rectangle<<system_boundary>>StereotypeFontColor transparent



skinparam rectangle<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<container_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<container_boundary>>StereotypeFontColor transparent
skinparam rectangle<<container_boundary>>StereotypeFontColor transparent
































skinparam rectangle<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam database<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam queue<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam actor<<person>> {
    StereotypeFontColor #08427B
    FontColor #08427B
    BackgroundColor #08427B
    BorderColor #073B6F
}
skinparam person<<person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #08427B
    BorderColor #073B6F
}


skinparam rectangle<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam database<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam queue<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam actor<<external_person>> {
    StereotypeFontColor #686868
    FontColor #686868
    BackgroundColor #686868
    BorderColor #8A8A8A
}
skinparam person<<external_person>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #686868
    BorderColor #8A8A8A
}


skinparam rectangle<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam database<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam queue<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam actor<<system>> {
    StereotypeFontColor #1168BD
    FontColor #1168BD
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}
skinparam person<<system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #1168BD
    BorderColor #3C7FC0
}


skinparam rectangle<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam database<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam queue<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam actor<<external_system>> {
    StereotypeFontColor #999999
    FontColor #999999
    BackgroundColor #999999
    BorderColor #8A8A8A
}
skinparam person<<external_system>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #999999
    BorderColor #8A8A8A
}



skinparam rectangle<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<enterprise_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<enterprise_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<enterprise_boundary>>StereotypeFontColor transparent
skinparam rectangle<<enterprise_boundary>>StereotypeFontColor transparent



skinparam rectangle<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<system_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<system_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<system_boundary>>StereotypeFontColor transparent
skinparam rectangle<<system_boundary>>StereotypeFontColor transparent







sprite $person [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
0000000000000000000049BCCA7200000000000000000000
0000000000000000006EFFFFFFFFB3000000000000000000
00000000000000001CFFFFFFFFFFFF700000000000000000
0000000000000001EFFFFFFFFFFFFFF80000000000000000
000000000000000CFFFFFFFFFFFFFFFF6000000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
00000000000001FFFFFFFFFFFFFFFFFFF900000000000000
00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000
0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000
0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000
0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000
00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000EFFFFFFFFFFFFFFFFFF800000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
000000000000000BFFFFFFFFFFFFFFFF5000000000000000
0000000000000001DFFFFFFFFFFFFFF70000000000000000
00000000000000000BFFFFFFFFFFFF500000000000000000
0000000000000000005DFFFFFFFFA1000000000000000000
0000000000000000000037ABB96100000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000025788300000000005886410000000000000
000000000007DFFFFFFD9643347BFFFFFFFB400000000000
0000000004EFFFFFFFFFFFFFFFFFFFFFFFFFFB1000000000
000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFD200000000
00000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE10000000
0000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB0000000
000000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5000000
000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD000000
000009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF200000
00000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF600000
00000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF800000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000
00000EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF700000
000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000
0000008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD3000000
000000014555555555555555555555555555555300000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}

sprite $person2 [48x48/16] {
0000000000000000000049BCCA7200000000000000000000
0000000000000000006EFFFFFFFFB3000000000000000000
00000000000000001CFFFFFFFFFFFF700000000000000000
0000000000000001EFFFFFFFFFFFFFF80000000000000000
000000000000000CFFFFFFFFFFFFFFFF6000000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
00000000000001FFFFFFFFFFFFFFFFFFF900000000000000
00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000
0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000
0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000
0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000
00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000EFFFFFFFFFFFFFFFFFF800000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
000000000000000BFFFFFFFFFFFFFFFF5000000000000000
0000000000000001DFFFFFFFFFFFFFF70000000000000000
00000000000000000BFFFFFFFFFFFF500000000000000000
0000000000000000005DFFFFFFFFA1000000000000000000
0000000000000000000037ABB96100000000000000000000
000000000002578888300000000005888864100000000000
0000000007DFFFFFFFFD9643347BFFFFFFFFFB4000000000
00000004EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB10000000
0000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD2000000
000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000
00003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
0000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF50000
0003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD0000
0009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF2000
000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000
000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB000
001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA000
000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF8000
000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6000
0009FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFF2000
0003FFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFFD0000
0000BFFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFF50000
00003FFFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFFB00000
000006FFFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFFE100000
0000007FFFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFFD2000000
00000004EFFF8FFFFFFFFFFFFFFFFFFFFFF8FFFB10000000
0000000007DF8FFFFFFFFFFFFFFFFFFFFFF8FB4000000000
000000000002578888888888888888888864100000000000
}


























skinparam rectangle<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam database<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam queue<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam actor<<container>> {
    StereotypeFontColor #438DD5
    FontColor #438DD5
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}
skinparam person<<container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #438DD5
    BorderColor #3C7FC0
}


skinparam rectangle<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam database<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam queue<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam actor<<external_container>> {
    StereotypeFontColor #B3B3B3
    FontColor #B3B3B3
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}
skinparam person<<external_container>> {
    StereotypeFontColor #FFFFFF
    FontColor #FFFFFF
    BackgroundColor #B3B3B3
    BorderColor #A6A6A6
}



skinparam rectangle<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam database<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam queue<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam actor<<container_boundary>> {
    FontColor transparent
    BackgroundColor transparent
    BorderColor #444444
}
skinparam person<<container_boundary>> {
    FontColor #444444
    BackgroundColor transparent
    BorderColor #444444
}
skinparam package<<container_boundary>>StereotypeFontColor transparent
skinparam rectangle<<container_boundary>>StereotypeFontColor transparent




















sprite $nodejs [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
0000000000000000000000000C9100000000000000000000
0000000000000000000000000CFA00000000000000000000
0000000000000000000000000CFA00000000000000000000
0000000000000000000000000CFA00000000000000000000
0001500000000230000000021CFA00000310000000062000
007FFC3000008FFB2000008FFFFA0002BFF7000005938800
2EFFFFF9004EFFFFF7005EFFFFFA007FFFFFD30094000293
6FFC8FFF008FFFFFFD00BFFBBFFA00EFF8CFF70170789926
6FF108FF008FFFFFFD00BFC00CFA00EF8C6F910170999726
6FF008FF008FFFFFFD00BFD11EFA00EFB622000170982B36
6FF007FF008FFFFFFC00BFFEFFFA00DFFE60000190937446
6C30007E0008FFFFA1001AFFFFA1002BFFFC000039501960
0000000000001AC30000003CC30000004C91000000598100
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<DEV NODEJS>> White
sprite $react [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000686300000000003686000000000000000
00000000000002EFFFFC30000003CFFFFD10000000000000
0000000000000CF7249FF800009FF9427FB0000000000000
0000000000002FB00001CFB01CFC20000AF1000000000000
0000000000005F60000008FDDF90000005F4000000000000
0000000000006F400000008FF800000004F6000000000000
0000000000006F40000000CFFC00000003F6000000000000
0000000000005F5000000AF99FB0000005F5000000000000
0000000000003F7000007FB00BF7000007F3000000000000
0000000000000FA00246FFA99AFF73100AF1000000000000
0000000000000EFCFFFFFFFFFFFFFFFECEE0000000000000
00000000004BFFFFC9DF82211228FD9BEFFE920000000000
000000004CFFC9F802FD00000000DF307F9CFFB300000000
00000008FF9200ED0BF3001441003FC0DE0029FF70000000
0000009FC200009F8FA004EFFE400AF8F900002CF8000000
000003FC0000002FFF201EFFFFE102FFF2000001CF200000
000008F40000000BF9004FFFFFF4009FB00000004F700000
000008F40000000CF9004FFFFFF4009FC00000004F800000
000003FC0000003FFF200EFFFFE002FFF2000000CF300000
0000008FD300009F8FA004EFFE400AF7F900002CF9000000
00000007FFA300EE0BF4000440004FB0DE002AFF80000000
000000003BFFDAF802FD00000000DF207FACFFC400000000
000000000029EFFFC9DF83222238FDACFFFFB40000000000
0000000000000EEBEFFFFFFFFFFFFFFFCEE0000000000000
0000000000001FA00036FF9889FF63100AF0000000000000
0000000000004F7000006FB00BF6000007F3000000000000
0000000000005F5000000AF99FA0000005F5000000000000
0000000000006F40000000CFFC00000004F6000000000000
0000000000006F400000008FF800000004F6000000000000
0000000000004F60000009FDDF90000006F4000000000000
0000000000001FB00002CFB01BFC20000BF2000000000000
0000000000000BF724AFF800008FF9427FC0000000000000
00000000000001DFFFFB30000003CFFFFE20000000000000
000000000000000465200000000003686000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<DEV REACT>> White
sprite $mongodb [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000001000000000000000000000000
000000000000000000000006400000000000000000000000
00000000000000000000002EC00000000000000000000000
0000000000000000000002DFF60000000000000000000000
000000000000000000002EFFFF4000000000000000000000
00000000000000000001EFFFFFF300000000000000000000
0000000000000000000BFFFFFFFE20000000000000000000
0000000000000000006FFFFFFFFFD0000000000000000000
000000000000000001EFFFFFFFFFF8000000000000000000
00000000000000000AFFFFFFFFFFFF300000000000000000
00000000000000002FFFFFFFFFFFFFC00000000000000000
0000000000000000BFFFFFFFFFFFFFF50000000000000000
0000000000000002FFFFFFFFFFFFFFFD0000000000000000
0000000000000008FFFFFFFFFFFFFFFF3000000000000000
000000000000000EFFFFFFFFFFFFFFFFA000000000000000
000000000000003FFFFFFFFFFFFFFFFFF000000000000000
000000000000007FFFFFFFFFFFFFFFFFF400000000000000
00000000000000BFFFFFFFFFFFFFFFFFF900000000000000
00000000000000DFFFFFFFFFFFFFFFFFFD00000000000000
00000000000000FFFFFFFFFFFFFFFFFFFF00000000000000
00000000000001FFFFFFFFFFFFFFFFFFFF20000000000000
00000000000002FFFFFFFFFFFFFFFFFFFF30000000000000
00000000000002FFFFFFFFFFFFFFFFFFFF30000000000000
00000000000003FFFFFFFFFFFFFFFFFFFF30000000000000
00000000000002FFFFFFFFFFFFFFFFFFFF20000000000000
00000000000001FFFFFFFFFFFFFFFFFFFF00000000000000
00000000000000EFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000BFFFFFFFFFFFFFFFFFFB00000000000000
000000000000006FFFFFFFFFFFFFFFFFF700000000000000
000000000000001FFFFFFFFFFFFFFFFFF300000000000000
000000000000000BFFFFFFFFFFFFFFFFE000000000000000
0000000000000004FFFFFFFFFFFFFFFF7000000000000000
0000000000000000BFFFFFFFFFFFFFFF1000000000000000
00000000000000003FFFFFFFFFFFFFF90000000000000000
000000000000000009FFFFFFFFFFFFE10000000000000000
000000000000000000DFFFFFFFFFFF500000000000000000
0000000000000000002FFFFFFFFFF9000000000000000000
00000000000000000004FFFFFFFFB0000000000000000000
000000000000000000004FFFFFFB00000000000000000000
0000000000000000000004FFFFA000000000000000000000
00000000000000000000003EF90000000000000000000000
000000000000000000000009F20000000000000000000000
000000000000000000000006F00000000000000000000000
000000000000000000000004F00000000000000000000000
000000000000000000000003F00000000000000000000000
000000000000000000000002F00000000000000000000000
000000000000000000000000100000000000000000000000
}


skinparam folderBackgroundColor<<DEV MONGODB>> White
sprite $dropbox [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
0000000000000002CD100000000001CD3000000000000000
000000000000007FFFE3000000003EFFF800000000000000
0000000000003DFFFFFF50000005FFFFFFD4000000000000
000000000008FFFFFFFFF800007FFFFFFFFF900000000000
0000000003DFFFFFFFFFFFA00AFFFFFFFFFFFE4000000000
000000019FFFFFFFFFFFFFFAAFFFFFFFFFFFFFF910000000
00000006FFFFFFFFFFFFFF8008FFFFFFFFFFFFFF60000000
000000004FFFFFFFFFFFC200002BFFFFFFFFFFF500000000
0000000002DFFFFFFFE5000000004EFFFFFFFD2000000000
00000000000AFFFFFA1000000000009FFFFFB10000000000
0000000000007FFC3000000000000003CFF8000000000000
000000000000058000000000000000000850000000000000
0000000000001CE600000000000000005ED2000000000000
000000000003EFFFC20000000000002BFFFE400000000000
00000000006FFFFFFF900000000008FFFFFFF70000000000
000000000AFFFFFFFFFD40000004DFFFFFFFFFA000000000
00000001CFFFFFFFFFFFFB1001AFFFFFFFFFFFFD20000000
00000005FFFFFFFFFFFFFFF66FFFFFFFFFFFFFFF50000000
000000001BFFFFFFFFFFFFF54FFFFFFFFFFFFFB100000000
00000000005EFFFFFFFFFE2772EFFFFFFFFFE50000000000
000000000001AFFFFFFFC19FFA1CFFFFFFFB100000000000
00000000000004EFFFFA1CFFFFC2AFFFFE50000000000000
000000000000001AFF72EFFFFFFE37FFA100000000000000
00000000000000A2444FFFFFFFFFF5442B00000000000000
00000000000000EF77FFFFFFFFFFFF87FE00000000000000
000000000000005EFFFFFFFFFFFFFFFFE500000000000000
00000000000000008FFFFFFFFFFFFFFA1000000000000000
000000000000000002BFFFFFFFFFFC300000000000000000
00000000000000000004EFFFFFFE60000000000000000000
0000000000000000000008FFFFA100000000000000000000
00000000000000000000002BC30000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<DEV DROPBOX>> White
sprite $aptana [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
00000000000000000000017AA50000000000000000000000
000000000000000000000CFFFF9000000000000000000000
000000000000000000002FFFFFF000000000000000000000
000000000000000000005FFFFFF000000000000000000000
000000000000000000008FFFFFF200000000000000000000
00000000006CB3000000CFFFFFF70000007DC40000000000
0000000008FFFF400008FFFFFFFF500009FFFF6000000000
000000003FFFFFFB78EFFFFFFFFFFD99DFFFFFF100000000
000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF300000000
000000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFE000000000
0000000008FFFFFFFFFFFFFFFFFFFFFFFFFFFF4000000000
0000000000BFFFFFFFFFFFEDDFFFFFFFFFFFF60000000000
00000000004FFFFFFFFF82000039FFFFFFFFE00000000000
00000000002FFFFFFFB1000000002CFFFFFFD00000000000
00000000005FFFFFFA000000000000CFFFFFF10000000000
0000000000BFFFFFC00000000000001EFFFFF90000000000
0000000007FFFFFF3000000000000005FFFFFF7000000000
0000069ADFFFFFFC0000000000000000EFFFFFFFDB700000
0000AFFFFFFFFFF700000000000000009FFFFFFFFFFA0000
0000FFFFFFFFFFF500000000000000007FFFFFFFFFFF0000
0000FFFFFFFFFFF300000000000000006FFFFFFFFFFF0000
0000FFFFFFFFFFF500000000000000007FFFFFFFFFFD0000
0000AFFFFFFFFFF700000000000000009FFFFFFFFFF80000
0000068BEFFFFFFC0000000000000000EFFFFFFA88400000
0000000008FFFFFF3000000000000005FFFFFF3000000000
0000000000AFFFFFC00000000000001EFFFFF70000000000
00000000003FFFFFFA000000000000BFFFFFF10000000000
00000000000FFFFFFFB1000000002CFFFFFFF00000000000
00000000002FFFFFFFFF82000039FFFFFFFFF00000000000
00000000009FFFFFFFFFFFEDDFFFFFFFFFFFF70000000000
0000000005FFFFFFFFFFFFFFFFFFFFFFFFFFFF4000000000
000000000EFFFFFFFFFFFFFFFFFFFFFFFFFFFFF200000000
000000004FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF400000000
000000002FFFFFFC89EFFFFFFFFFFC76BFFFFFF100000000
0000000007FFFF800006FFFFFFFF700006FFFF4000000000
00000000005CE70000008FFFFFF80000004CB30000000000
000000000000000000002FFFFFF100000000000000000000
000000000000000000001FFFFFF000000000000000000000
000000000000000000000FFFFFF000000000000000000000
0000000000000000000009FFFFA000000000000000000000
000000000000000000000058850000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<DEV APTANA>> White
sprite $github_badge [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000159CEFFEC951000000000000000000
00000000000000003AFFFFFFFFFFFFA30000000000000000
000000000000001AFFFFFFFFFFFFFFFFA100000000000000
00000000000004EFFFFFFFFFFFFFFFFFFE40000000000000
0000000000006FFFFFFFFFFFFFFFFFFFFFF6000000000000
000000000006FFFFFFFFFFFFFFFFFFFFFFFF600000000000
00000000004FFFFFFFFFFFFFFFFFFFFFFFFFF40000000000
0000000001EFFFF027EFFFFFFFFFFE710FFFFE1000000000
0000000009FFFFC000189542246981000CFFFF9000000000
000000002FFFFFA000000000000000000BFFFFF200000000
000000009FFFFFC000000000000000000CFFFFF900000000
00000000EFFFFFD000000000000000000DFFFFFE00000000
00000003FFFFFF30000000000000000003FFFFFF30000000
00000007FFFFFB00000000000000000000BFFFFF70000000
0000000AFFFFF6000000000000000000007FFFFFA0000000
0000000CFFFFF4000000000000000000004FFFFFC0000000
0000000CFFFFF4000000000000000000004FFFFFC0000000
0000000CFFFFF6000000000000000000006FFFFFC0000000
0000000BFFFFF8000000000000000000008FFFFFB0000000
00000009FFFFFC00000000000000000000DFFFFF90000000
00000006FFFFFF40000000000000000004FFFFFF50000000
00000002FFFFFFD100000000000000001DFFFFFF20000000
00000000DFFFFFFC2000000000000002CFFFFFFD00000000
000000006FFD7CFFF93000000000039FFFFFFFF600000000
000000000EFF609FFFFF80000008FFFFFFFFFFE000000000
0000000006FFF50CFFFF20000002FFFFFFFFFF5000000000
0000000000CFFE009EE900000000EFFFFFFFFB0000000000
00000000001EFF80000000000000DFFFFFFFD10000000000
000000000002EFF9200100000000CFFFFFFE200000000000
0000000000002DFFFFFC00000000DFFFFFD2000000000000
00000000000001BFFFFD00000000DFFFFB10000000000000
0000000000000005DFFD00000000DFFD4000000000000000
000000000000000005B8000000008B500000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<DEV GITHUB_BADGE>> White
sprite $users [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000024310000000000000000000000
000000000000000000018EFFFFC400000000000000000000
0000000000000000003EFFFFFFFF90000000000000000000
000000000000000002EFFFFFFFFFF9000000000000000000
00000000000000000CFFFFFFFFFFFF400000000000000000
0000006DFE8000004FFFFFFFFFFFFFC000004BFEA2000000
000009FFFFFC00009FFFFFFFFFFFFFF10005FFFFFE200000
00003FFFFFFF8000BFFFFFFFFFFFFFF3001FFFFFFFC00000
00009FFFFFFFD000CFFFFFFFFFFFFFF4005FFFFFFFF10000
0000AFFFFFFFE000AFFFFFFFFFFFFFF2006FFFFFFFF20000
00007FFFFFFFC0006FFFFFFFFFFFFFE0004FFFFFFFF00000
00001FFFFFFF50001FFFFFFFFFFFFF80000DFFFFFF900000
000004FFFFF8000007FFFFFFFFFFFE100002DFFFFB000000
000000179830000000AFFFFFFFFFF3000000069940000000
00000000000000000007FFFFFFFC20000000000000000000
0000012333310000000016ACB94000000000233332000000
0001BFFFFFFFD3000000000000000000008FFFFFFFE60000
000DFFFFFFFFE400000000000000000000AFFFFFFFFF6000
007FFFFFFFFD1006BEFE8310025BFFD92006FFFFFFFFF000
00CFFFFFFFE102DFFFFFFFFFFFFFFFFFF8007FFFFFFFF400
00DFFFFFFF302FFFFFFFFFFFFFFFFFFFFFA00BFFFFFFF500
00DFFFFFFB00EFFFFFFFFFFFFFFFFFFFFFF603FFFFFFF500
00CFFFFFF407FFFFFFFFFFFFFFFFFFFFFFFE00CFFFFFF400
006FFFFFF00DFFFFFFFFFFFFFFFFFFFFFFFF508FFFFFD000
00037777601FFFFFFFFFFFFFFFFFFFFFFFFF902777761000
00000000002FFFFFFFFFFFFFFFFFFFFFFFFFB00000000000
00000000003FFFFFFFFFFFFFFFFFFFFFFFFFB00000000000
00000000003FFFFFFFFFFFFFFFFFFFFFFFFFB00000000000
00000000000FFFFFFFFFFFFFFFFFFFFFFFFF800000000000
000000000009FFFFFFFFFFFFFFFFFFFFFFFF200000000000
0000000000007DEEEEEEEEEEEEEEEEEEEEB2000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<FA5 USERS>> White
sprite $user [48x48/16] {
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
0000000000000000000049BCCA7200000000000000000000
0000000000000000006EFFFFFFFFB3000000000000000000
00000000000000001CFFFFFFFFFFFF700000000000000000
0000000000000001EFFFFFFFFFFFFFF80000000000000000
000000000000000CFFFFFFFFFFFFFFFF6000000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
00000000000001FFFFFFFFFFFFFFFFFFF900000000000000
00000000000006FFFFFFFFFFFFFFFFFFFF00000000000000
0000000000000BFFFFFFFFFFFFFFFFFFFF40000000000000
0000000000000EFFFFFFFFFFFFFFFFFFFF70000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000FFFFFFFFFFFFFFFFFFFFF80000000000000
0000000000000DFFFFFFFFFFFFFFFFFFFF60000000000000
0000000000000AFFFFFFFFFFFFFFFFFFFF40000000000000
00000000000006FFFFFFFFFFFFFFFFFFFE00000000000000
00000000000000EFFFFFFFFFFFFFFFFFF800000000000000
000000000000007FFFFFFFFFFFFFFFFFF100000000000000
000000000000000BFFFFFFFFFFFFFFFF5000000000000000
0000000000000001DFFFFFFFFFFFFFF70000000000000000
00000000000000000BFFFFFFFFFFFF500000000000000000
0000000000000000005DFFFFFFFFA1000000000000000000
0000000000000000000037ABB96100000000000000000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
000000000000025788300000000005886410000000000000
000000000007DFFFFFFD9643347BFFFFFFFB400000000000
0000000004EFFFFFFFFFFFFFFFFFFFFFFFFFFB1000000000
000000007FFFFFFFFFFFFFFFFFFFFFFFFFFFFFD200000000
00000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE10000000
0000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB0000000
000000BFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5000000
000003FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD000000
000009FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF200000
00000DFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF600000
00000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF800000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFB00000
00001FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFA00000
00000EFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF700000
000006FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE100000
0000008FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFD3000000
000000014555555555555555555555555555555300000000
000000000000000000000000000000000000000000000000
000000000000000000000000000000000000000000000000
}


skinparam folderBackgroundColor<<FA5 USER>> White

skinparam backgroundColor #fff

hide stereotype
legend right
|<color:#000000>**Legend**</color> |
|<#08427B> person |
|<#1168BD> system |
|<#438DD5> container |
|<#686868> external person |
|<#999999> external system |
|<#B3B3B3> external container |
endlegend

  rectangle "<$react>\n==React App\n//<size:12>[react]</size>//\n\nCreates web app for the users to interact with" <<container>> as reactapp 
  rectangle "<$nodejs>\n==API\n//<size:12>[node.js]</size>//\n\nBackend logic to serve data and handle requests" <<container>> as api 

  rectangle "<$users>\n==Users\n\n People who visit the website and want a nice UI / UX" <<external_person>> as users 
  rectangle "<$user>\n==Admin\n\n Person who edits content over the Web App" <<person>> as admin 
 
  rectangle "<$github_badge>\n==Github Pages\n\n Service to host website content" <<system>> as githubpages 
  rectangle "<$mongodb>\n==Mongodb\n\n Database to hold views of website data" <<system>> as mongodb 
  rectangle "<$dropbox>\n==Dropbox\n\n Service to upload pictures and serve over URL for blog/project" <<system>> as dropbox 
  rectangle "<$aptana>\n==Deta\n\n Service to host the API backend server / logic" <<system>> as deta 


users - ->> githubpages : **uses**\n//<size:12>[https]</size>//
admin - ->> githubpages : **uses**\n//<size:12>[https, auth]</size>//
reactapp - ->> githubpages : **gets deployed to**\n//<size:12>[node gh-pages]</size>//
githubpages - ->> dropbox : **gets pictures**\n//<size:12>[URI]</size>//

deta -RIGHT->> mongodb : **gets data**\n//<size:12>[mongoose]</size>//
api - ->> deta : **gets deployed to**\n//<size:12>[deta CLI]</size>//
githubpages - ->> deta : **makes requests**\n//<size:12>[https]</size>//


@enduml

PlantUML version 1.2022.7(Mon Aug 22 19:01:30 CEST 2022)
(GPL source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Default Encoding: Cp1252
Language: de
Country: DE
--></g></svg>