Simple Cost Analysis

Simple Cost Analysis is an operational project that users can use to monitor their spending habits. It works by users uploading their bank statement in CSV format to view their expenses in a table. Since, it was my first successful project in react projects repository, I have created it over again in a cleaner version with its own repository. 

For front-end and back-end code development, I have used JavaScript/React and MUI. For handling communication between front-end and back-end I used Express.js and Axios. The source codes in the repository are available for viewing.

The project is similar to other apps such as Mint, that track their users spending habits, except that it doesn't ask users for their banking information and doesn't save their data from uploaded file. Simple Cost Analysis, only requires the user to download their bank statement in CSV format and upload it to the website.

After uploading their file, users can view all of their spending habits that will be displayed in a table. The table assigns Id to each row of information, and displays columns such as date, description, amount and category.

The table after uploading CSV and assigning categories.

By clicking on each row of data from table, users have the ability to assign category to each row, based on their knowledge. Assignment can be done, one by one for each row or clicking on the option to assign a category as whole to descriptions similar to the current one.

After clicking on a row a dialog opens and users can assign category to that description or assign as whole to descriptions similar to that.

The assignment of categories, allows users to  track their expenses by grouping all similar habits in one place, which allows the user to view them in graph format. The graphs consist of daily, weekly and monthly charts that demonstrate how much budget is spent on each category.

Users can hover over each category and see the amount they spent on that category compared to other categories.

Viewing expense charts in a dialog, after assigning categories.

The application only allows users:

  • Upload one file at a time
  • Uploading a new file will remove any pre-existing data
  • Users can't have access to their old sets of data
  • The grid only displays data with rows (length) of 100, users can't upload bigger files