The whole project is a React App setup with Create React App. I used React Router to set up multiple pages each visualizing a particular matrix algorithm. The state of the app is managed by a single React Context. I separated the code related to the implementation of the algorithms from the one related to the visualization of the result. In this way I was able to develop the app by keeping it scalable and updatable without any major constraint. Moreover, typescript made the development process safer and more enjoyable.

I faced two main challenges while developing Matrix Lab.

• Implementing matrix operation algorithms by following pseudo code was pretty challenging, not because of the algorithm's complexity, but because of the edge cases. These have been quite difficult to handle, especially in the algorithm calculating the inverse of a Matrix. In fact, in this scenario in order to have an algorithm easy to write and to maintain it is necessary to isolate every row which contains only zeros. Unfortunately, I understood this only after hours spent debugging the unexpected behavior of the algorithm when it was run with a matrix including a row of zeros.
• Another major challenge which I faced was about realizing which was the best approach to visualize matrix operations step by step. This process involved a lot of brainstorming a sketching both on paper and on Figma. In fact my goal was not just to develop an app which could be easily used on a desktop device, but I wanted it mobile ready too. So I really had to think about the best way to step-by-step compose the visualization of each algorithm and realize both the best way to display it and to describe the steps in an array of objects.

Some sketches made to prototype the visualization for matrix product:

Figma prototype for matrix selection strategy in matrix product feature:

• This project helped me improve my knowledge about linear algebra, moreover it also helped me better learn how fundamental matrix algorithms work. By visualizing these algorithms, I better realized where the logic behind them lies, moreover compared to when I started the project, now I am much faster at doing matrix operations. This project
• By writing functions to visualize these algorithms, I improved algorithm design skills and also my debugging skills. Before starting the project I was pretty scared about having to write code which deals with abstract mathematical operations, but after completing the project I am definitely more confident at tackling these sorts of problems.
• This project made me more aware of the importance that a well designed UI plays on the usability of an app. In fact, while bootstrapping Matrix Lab I really had to think about the optimal way to let the user interact with matrix objects. This became crucial when I started writing the code which produces the step-by-step visualization of each algorithm, because I had to understand which pieces of the result I needed to store in order to properly visualize each step. Moreover, I learned to appreciate the value of a succinct UI when visualizing algorithms, especially when the whole visualization has to be mobile friendly.