Finance-Dashboard

KO | EN

gitlite — search

#python #react #ai #llm #golang #android #machine-learning #rust #macos #cli #kubernetes #vue #security #ios

Finance-Dashboard

(★ 15)

🚀 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).

Finance-Dashboard 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Sleek Personal Finance Dashboard 💰

**Live Demo:** [https://shubham-jana-dev.github.io/Finance-Dashboard/](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/](https://shubham-jana-dev.github.io/Finance-Dashboard/)

### Local Development

If you wish to run or modify the code locally:

1.  **Clone the Repository:**
    ```bash
    git clone [https://shubham-jana-dev.github.io/Finance-Dashboard/](https://shubham-jana-dev.github.io/Finance-Dashboard/)
    ```
2.  **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:** [devshubhamjana@gmail.com](mailto:devshubhamjana@gmail.com)

Finance-Dashboard

Finance-Dashboard 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Finance-Dashboard

Finance-Dashboard 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README