Skip to main content

Implementation

📄️ User Interface Implementation

Our UI was built in React using the Material UI component library 3] which we then coded custom Cascading Style Sheets (CSS) to fulfil the design we had produced in Figma. We built reusable components in constructing the UI so that similar or identical components could be created and used by other team members, ensuring consistent visual design across the application. This also made it easier for the team as when they came to implement a feature, they could simply pass their values to the UI components already created for them. We speak more about the design of the UI in the [User Interface and Experience Design section.

📄️ Application Packaging

The template that we used when creating our product electron-react-boilerplate used electron-builder to generate a bundled version of the code for windows based systems using the nsis format using the npm run package command. Although this packaging did work out-of-the-box for our product, the nsis installer did not seem to function correctly, only generating the uninstaller and not unpacking any other files. Therefore, we decided to zip the folder containing the contents to be unpacked by the installer and send that as our final product instead.