About Finance-Dashboard

🚀 Personal Finance Tracker A sleek, privacy-focused web dashboard (HTML/CSS/JS) to manage income, expenses, and debts. Features: Cash/Bank balance tracking, dynamic expense charting, and debt repayment modals. All data is local to the browser (Local Storage).

s

Published by

shubham-jana-dev

Visit View Profile

README.md

View on GitHub

Sleek Personal Finance Dashboard 💰

Live Demo: https://shubham-jana-dev.github.io/Finance-Dashboard/

Project Overview

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.

Features ✨

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.

Technologies Used 🛠️

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.

Setup and Usage 🚀

Accessing the App

The application can be accessed instantly via the live GitHub Pages link: https://shubham-jana-dev.github.io/Finance-Dashboard/

Local Development

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.html file in your preferred web browser.

Getting Started

Use the Initial Setup form to set your starting Cash and Bank Balances.
Use the Add Income and Add Expense forms to record transactions.

Developer Credit

Developed with ❤️ by Shubham Jana.

Developer Contact: [email protected]

Finance-Dashboard