A single-page application is implemented that allows users to track their daily expenses and income, as well as see their current balance.
By pressing the plus button, the user can open a form to add a new record, which can be either an income or an expense. The balance is internally calculated and the user can see the current status. A Record List is also shown with all of the records that were previously added. The user is also able to delete any record.
As a visulaization tool, a pie chart is implemented. Whenever any record (income/expenses) is added, the pie chart appears. The total income and expenses is also stated to improve UX.
- In the main directory, run "npm start"
-
Javascript
-
React
-
tailwindcss for styling
-
Pie Chart for visualization
-
Easy UI to avoid confusion
-
A slightly colorful background with changing colors when hovering.
-
Well-known colors for the PieChart (Green & Red) for user's familiarity and linking to the colors.
-
Total Income and Total Expenses with the same colors as the PieChart to link them.
-
Checks are done on * whether description or amount fields are empty. * whether the amount field has a negative number (can be considered expense but does not make sense since we have expenses in our dropdown list). * 'no records yet' as a user feedback message.
