A responsive web application for tracking expenses, allowing users to add, edit, and delete expenses based on category and date, as well as view a summary of their expenses.
- Add to wallet
- Add new expense transaction
- Update an expense transaction
- Delete an expense transaction
- View a summary of total expenses via:
- Pie Chart: Category-wise information along with percentage of expense
- Bar Chart: Category-wise information along with the total amount spent for each category
- Live Chart updates based on transactions (Add, Update, or Delete)
- Sorting and Filtering
- Responsive design, intuitive interaction on all device types (Mobile, Tablet, Laptop)
Users can add expenses by clicking the "+ Add Expense" button. On clicking, they will be greeted with a modal to add expense details. The users may add the title, cost, category, and date of the expense.
On adding a new expense, it gets displayed in the Recent Transactions section with transaction details and the relevant action (update, delete) along with charts being rendered immediately with the aggregated data.
On adding a few more expenses with different categories, the dashboard looks something as shown below. The Pie Chart represents category-wise percentages while the Bar Graph represents category-wise total spent via a tooltip that is shown on hover on any of the bars.
Also, notice how the chart color changes each time. At each render, random RGB-based colors are calculated separately for the pie and the bar based on the number of categories present.
Users can update any existing expense from the Recent Transactions section. On clicking the yellow update icon, a modal similar to that when adding an expense is displayed with pre-populated expense data. On price change or category change, the charts as well as the balance are recalculated and rerendered.
For example, here changing the price of "Flip Flops" from ₹1200 to ₹1000 will leave us with a balance of ₹1160 and expenses of ₹3840 with a total spent on apparel category as ₹1000 as well.
Users can delete any existing expense from the Recent Transactions section. On Clicking the red delete icon, a modal is displayed that asks for confirmation to proceed with the delete operation. The charts as well as the balance are recalculated and rerendered.
For example, here deleting "Flip Flops" will leave us with a balance of ₹2160 and expenses of ₹2840 with a total spent on the apparel category as ₹0 as well.
Users can filter and sort through the items in the Recent Transactions section On click of the Filter/Sort button, the users are greeted with a modal with all options available.
-
The items can be sorted by date and price, both from low to high and vice-versa.
-
The items can be filtered based on a category or multiple categories
-
sorting.price.mp4
-
sorting.date.low.to.high.mp4
-
filtering.by.food.mp4
-
filter.multiple.mp4