Live Demo: https://shubham-jana-dev.github.io/Finance-Dashboard/
This is a clean, modern, and privacy-focused web application designed to help users track their income, expenses, and manage debts efficiently. It is built entirely using Vanilla JavaScript, HTML, and Tailwind CSS, making it lightweight and fast.
Crucially, all financial data is stored directly in your browser's Local Storage, ensuring that no external servers or databases are used.
| Category | Feature Description |
|---|---|
| Balance Tracking | Separate tracking for Cash Balance and Bank Balance, automatically calculating a real-time Net Worth. |
| Transaction Recording | Dedicated forms for adding Income and Expenses, allowing users to specify the medium (Cash or Bank/UPI) for accurate balance deduction/addition. |
| Custom Categories | Supports detailed expense categorization, including: Grocery, Food & Drink, Academic & Study, Transport, Bills & Rent, Shopping, Entertainment, Health, and Other. |
| Debt Management | Track both money Lent (Receivables) and money Borrowed (Payables). Includes dedicated functions and modals for marking repayment and adjusting balances. |
| Data Visualization | A dynamic Pie Chart (via Chart.js) instantly breaks down spending by category, providing visual insights into where money goes. |
| History & Deletion | Comprehensive lists for all income and expense history, with the ability to delete any record and automatically reverse the corresponding balance change. |
| User Experience | Non-intrusive confirmation messages (snackbars) provide real-time feedback on successful transactions and balance deductions. |
- HTML5: Structure and Semantics.
- Vanilla JavaScript (ES6+): Core application logic, DOM manipulation, and data handling.
- Tailwind CSS (CDN): Modern, utility-first styling for a clean, responsive UI.
- Chart.js: Used for the interactive expense breakdown chart.
- Phosphor Icons (CDN): Used for simple, clean iconography.
- Local Storage: The persistent storage mechanism for all financial data.
The application can be accessed instantly via the live GitHub Pages link: https://shubham-jana-dev.github.io/Finance-Dashboard/
If you wish to run or modify the code locally:
- Clone the Repository:
git clone [https://shubham-jana-dev.github.io/Finance-Dashboard/](https://shubham-jana-dev.github.io/Finance-Dashboard/)
- Open the File:
Navigate to the project directory and open the
index.htmlfile in your preferred web browser.
- Use the Initial Setup form to set your starting Cash and Bank Balances.
- Use the Add Income and Add Expense forms to record transactions.
Developed with ❤️ by Shubham Jana.
Developer Contact: devshubhamjana@gmail.com