Technology Used:
Figma, HTML, Sass, Angular, Angular Material UI, TypeScript, Python, and Azure Scripts
Technical Interface Component Details:
I documented the following details about each interface component for a technical design document prior to the development of the tool.
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/1888ec10-8d32-4a29-82ef-a5a87223dca0_rw_1200.png?h=984e73698f179832517593da8b7d6a98)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/b558ca91-acea-4b9c-a203-f126777c0f8d_rw_1200.png?h=a0ad5012b997122f54661f453e41fe9e)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/174c06f3-1754-4aa3-9bec-74d53d91fc09_rw_1200.png?h=bdcc38346957f96beaec8969d63a27b5)
Wireframes:
The wireframes below served as the visual and technical guidelines for the project in the Technical Design Document visually showcasing the components detailed in the above table.
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/7636c21f-34fb-4e4c-a004-fb4803db6a42_rw_3840.png?h=3e6d0f37d61c530f2c4014a334a69984)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/245cd383-4df1-48dc-8042-e068fad62bb8_rw_3840.png?h=9ad840504f0e0ed9ee3f847ce206f520)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/f37235a6-8a5c-490d-9743-58f26fc3a428_rw_3840.png?h=bcdfbd0d5040e8c4e0b23b4ffa786ab1)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/f3c7f532-feb4-4610-99a3-4923a829eb8d_rw_3840.png?h=42f40468d8430bb4364a9cb6521c8592)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/3b3fbc83-a9da-4d80-a601-878104826d92_rw_3840.png?h=917fadff07496942777cde776b52af17)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/3f565684-de10-4f0a-b4fd-d33ab85938e0_rw_3840.png?h=8a11fa94e366ebc8a47bb36d0b1ddae3)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/63fbdb23-1eff-42b6-8d74-e2c99639df44_rw_3840.png?h=b258bce5ae6acf05d1fae9e7c371a8a7)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/bde3c0f9-3c2c-4d8b-aa67-3e6fc0bf555c_rw_3840.png?h=02d71de51fe1faa83f2daaa173dea000)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/da5c908a-1fb7-458c-bd8c-ec520f7df9db_rw_3840.png?h=720f32b740e3eba47a2c2c177cc83b47)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/55932b9d-f288-4992-bf60-0d68b8a35fc2_rw_3840.png?h=a8c7efe68a929e7f56550cd64712b337)
The product:
I collaborated with a data engineer to build out the tool using Angular, TypeScript, Angular Material UI, and Sass while he used Python and Azure to automate scripts on the backend.
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/a1b05c03-9f95-48a1-94fd-51171a06904c_rw_1920.png?h=deb5ccabb324a6062b4243a16e703708)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/6e8f800d-9a42-4d6b-b68e-739524f5d331_rw_1920.png?h=efad890956ef57b16d6114d377980f8f)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/a9d9c50c-30b1-40e0-b1d8-8d2b7a482a81_rw_1920.png?h=72b79478d18ba035483e76a955c3360e)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/11e603ff-aef2-494a-b814-540a1728503a_rw_1920.png?h=1b06475c3ec80020e30764557f15e3c5)