This project is a web application which allows an individual to track their monthly expenses to determine where their money is being spent and how their spending habits change over time.
Link to project: https://expense-tracker-tt.herokuapp.com/
Use demo login: demo@testing.com / testingtesting
Tech used: NodeJS, Express, PassportJS, EJS, Javascript, HTML, CSS
This is a full-stack application consisting of a NodeJS/Express server using PassportJS for authentication, EJS as a view engine, and HTML/CSS/Javascript for an interactive front-end.
This project was originally written in PHP/MySQL as my final project in the Computer Programming and Analysis curriculum at Seminole State College. Once I decided to concentrate on Javascript, however, I decided to rewrite the application using NodeJS/Express/MongoDB. This also gave me the opportunity to refresh the look and add some additional features, such as the charts on the reports page.
- Local user authentication.
- Create, update and remove expenses.
- Assign expenses to a category.
- Assign expenses to an account.
- Add, edit, and remove accounts.
- View and print monthly reports with expenses by category and by account, including a pie chart showing the percentage of the top 5 categories/accounts.
- Update user settings for display name, date format, number format and currency symbol.
- Dealing with various currency and date formats is pretty involved -- luckily, I found
dayjs()to help with the date formatting, and used Javascript'sIntl.NumberFormat, part of the Internationalization API, to help with the currency formatting. - I wanted to implement the front-end with EJS and vanilla Javascript, but I found myself missing the organization of React quite a bit.
- Add line chart option to reports to show how total spending changes over time.
- Utilize modals for confirmation dialogs for deleting expenses/accounts
- Improve accessibility by creating consistent focus outlines for every element