Student at University of Toronto·

The key to our product relies on explainability and user experience when using our product. With this is mind, it is important to build a clean, readable web interface that a user will be able to navigate easily and quickly debug their security issues. The stack chosen for the interface of our product includes: JavaScript + React, CSS, HTML, Material UI and D3.js.

React provides us with simplicity to allow us to deliver the MVP as soon as possible. React also has multiple open source libraries to ease our development. Being able to reuse React components will help in developing the product fast as well as making the user interface modular. Since we're using React, we will also be using JavaScript, HTML, and CSS to create the frontend.

To design the UI, using a minimal approach would be the best solution. The Material UI library provides us with minimal and aesthetically pleasing React Components which would make our frontend look pleasing to the user.

Finally, our UI will consist of displaying information from our Machine Learning model in a dashboard type view. To display data in tasteful manner, we have chosen to use the D3.js library. This library is the most popular data visualization library for React with over 80k stars on Github. D3 also provides seamless compatibility with React and has a variety of features which would make the data we produce visually pleasing.

5 upvotes·82.3K views
Avatar of Labib Chowdhury

Labib Chowdhury

Student at University of Toronto