https://github.com/a2rp/personal-finance-dashboard

React + styled-components personal finance dashboard — budgets, envelopes, charts, CSV export, localStorage.
https://github.com/a2rp/personal-finance-dashboard

budgeting csv-export dashboard envelopes expense-tracker localstorage personal-finance react react-router recharts styled-components vite

Last synced: 2 months ago
JSON representation

React + styled-components personal finance dashboard — budgets, envelopes, charts, CSV export, localStorage.

• Host: GitHub
• URL: https://github.com/a2rp/personal-finance-dashboard
• Owner: a2rp
• Created: 2025-09-17T02:51:18.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-09-17T03:38:58.000Z (9 months ago)
• Last Synced: 2025-10-08T15:53:36.250Z (8 months ago)
• Topics: budgeting, csv-export, dashboard, envelopes, expense-tracker, localstorage, personal-finance, react, react-router, recharts, styled-components, vite
• Language: JavaScript
• Homepage: https://a2rp.github.io/personal-finance-dashboard
• Size: 796 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Personal Finance Dashboard

A fast **frontend-only** money tracker built with **React + styled-components**.  

Add income/expenses, see KPIs & charts, filter/sort the ledger, export CSV — all saved in **localStorage**.

---

## Features

-   **Overview:** Total Balance, This Month Spend/Income, Net Cash Flow, Remaining Budget/Overspent.

-   **Charts:** Daily Income vs Expense (area), Top Categories (bar) with month navigation.

-   **Transactions:** add income/expense, search, quick filters (type/account/envelope), column sorting, totals row.

-   **Undo toasts:** delete + clear month both support **Undo** (react-toastify).

-   **CSV export** for the selected month.

-   **Routing** (React Router), lazy pages, sticky table headers, responsive layout.

---

## Clone & Run

```bash

# 1) Clone

git clone https://github.com/a2rp/personal-finance-dashboard.git

cd personal-finance-dashboard

# 2) Install deps

npm i

# 3) Start dev server

npm run dev

```

## Home

![alt text](image.png)

## Overview

![alt text](image-1.png)

## Transactions

![alt text](image-2.png)

## Accounts

![alt text](image-3.png)

## Envelopes

![alt text](image-4.png)