Personal Finance Dashboard Web App with Budget Tracking and Expense Charts

Most students and young earners know their salary figure but cannot say where it went by the third week of the month. A personal finance dashboard web app with budget tracking and expense charts answers that question by turning scattered spending into one visible picture: every expense is recorded, filed under a category, and compared against a monthly budget. The problem is not a lack of money but a lack of visibility — cash, UPI and card payments leave no single record, so small daily spends on food delivery, transport and shopping add up unnoticed until the account is low. This dashboard keeps the workflow small enough to sustain: type an expense in seconds or import a CSV statement, see the category bar move, and check the month's charts before spending more. The working demo built for this listing ships with 31 seeded November transactions across 8 categories, totalling ₹31,427 of spending against a ₹36,000 budget.

An entry travels from the form to the charts in four stages with no server in between. First, the user types an expense or imports a CSV file, and the app files it under one of 8 categories with its date and amount. Second, the entry is added to that category's monthly total and compared with the category budget, so the progress bar and the remaining-budget figure move at once. Third, the same stored transactions feed both charts — the donut recomputes each category's share of the month's spending and the trend chart adds the month to a six-month series — and the summary recalculates the savings rate and average daily spend. Finally, everything is written to the browser's local storage, so the dashboard survives a reload, and the full month exports to CSV whenever a report is needed. Because the data never leaves the browser, there is no login, no sync delay and no bank connection to configure.

1. The user adds an expense or income manually through the form, or imports a CSV file in the documented date, description, category, amount format.
2. The app validates the entry and files it under one of the 8 categories for the selected month.
3. The category total is updated and compared with that category's monthly budget; progress bars and alerts change immediately.
4. Both charts redraw from the same stored transactions — the donut by category share and the trend chart by monthly total.
5. The monthly summary recomputes the savings rate, biggest category, top merchant and average daily spend.
6. The entry is saved to localStorage, and the month's transactions can be exported to CSV at any time.

Tech stack:

• HTML5, CSS3 (dashboard layout & styling)
• JavaScript (ES6, application logic)
• Canvas API (donut & trend charts)
• localStorage API (browser persistence)
• CSV import & export
• Git (version control)

The dashboard is built around four capabilities that work together: fast manual entry and CSV import, monthly budgets per category, charts that show where money actually goes, and a monthly summary that closes the loop. Adding a transaction takes seconds — amount, category, date and a short description — and the totals, budget bars and charts update immediately without a page reload. Each of the 8 default categories (Rent, Groceries, Food & Dining, Transport, Utilities, Entertainment, Shopping and Health) carries its own monthly limit, with amber warnings at 80% and a red flag once the limit is crossed. Two canvas charts sit at the centre of the dashboard: a donut of spending by category and a six-month trend of total spending against the monthly budget. The monthly summary pulls it together with the savings rate, the biggest category, the top merchant and an average daily spend figure, and every transaction exports to CSV for a report or a viva demonstration.

• [Manual expense & income entry] Add any transaction in seconds — amount, category, date and description — and the totals, budget bars and charts update immediately without a page reload.
• [Category budgets with progress & alerts] Each of the 8 default categories carries a monthly limit; progress bars turn amber at 80% of the budget and red once the limit is crossed, with a plain-language alert on the dashboard.
• [Spending charts] A donut chart shows the month's spending by category and a six-month bar chart tracks total spending against the monthly budget, both drawn on canvas from the same stored transactions.
• [CSV import & export] Import a bank statement as CSV using the documented 4-column format, and export any month's transactions to CSV for records or a viva report.
• [Monthly summary & insights] The summary reports the savings rate, the biggest spending category, the top merchant and the average daily spend for the month, all computed from the entered data.
• [Search, filter & transaction history] The full transaction list can be browsed newest-first by date and category, so any single payment can be found and checked against its budget.
• [Local persistence, no server] All data is stored in the browser's localStorage, so the dashboard survives a reload, works offline, and needs no account, login or server to run.

• Complete single-file dashboard web app (HTML, CSS, JavaScript)
• Seeded demo data: 31 realistic November transactions across 8 categories
• CSV import template and one-click monthly CSV export
• Project report PDF (background, methodology, architecture, outcomes)
• PPT presentation for final review
• Viva Q&A preparation document (budgets, charts, localStorage, CSV handling)
• Setup instructions — open the file in any modern browser, no server or installation needed