The whole project is a React App setup with Create React App. I used chakra UI to bootstrap the UI as quickly as possible. In order to visualize data I used a Library called Victory . This is one of the most popular data visualization libraries for React. It allows developers to easily display data with the most common types of charts. It provides React components for each type of chart, moreover the style of every graph is easily customizable using props. One of the best features of Victory is that it allows developers to provide a custom style for every piece of the chart. This is possible by passing callbacks as style props for computing style according to the data displayed by each piece of the chart. This has been very useful for implementing expense tags to display each expense with the same color of its tag on different charts.

I wanted to build a web app which made expense tracking easier, in fact while studying excel in order to learn personal finance management, I realized that setting up a spreadsheet with tags and visually impactful charts it's not easy, so I wanted to build a dashboard which provides a nice interface for dealing with expense tracking. In the end I have been able to develop a complete and functional prototype of such a dashboard and in order to showcase its features more effectively I pre-seeded it with random expenses data and tags.

A couple of sketches drawn while prototyping the app:

I faced two main challenges while developing Matrix Lab.

• In the beginning, I wanted to use D3.js to develop this project, but I did not know it and I soon realized that React's virtual DOM did not suit D3's manipulation needs very well. So I looked for alternative libraries that work better with React. I found Victory and I'm very satisfied with the final result.
• Another major challenge which I faced was about performance issues. Every expense object is associated with its ID with the tagId property. In order to look for all the expenses with a specific tag, in the first versions of the dashboard I used the array find method. This is not a very efficient solution, in fact it linearly searches for elements in an array. In order to avoid possible performance issues I used a Javascript ES6 Mapto associate every tagId with its tag object and this made the time complexity of tags related operations dropping from O(n) to O(1).

• This project helped me learning the basics of data visualization for the web and it made me more interested in learning D3 into depth, in fact it allows to build even more complex dashboards and data visualization for the web.
• Helped me better understand how much of a difference Maps can made when speaking about searching perfornce optiminzation.
• Moreover, this project made me more aware of the imporatance of budgetting and of keeping track of our personal finances.