Alexander Zinn
613e8fdb70
- Added .nvmrc file to specify Node.js version 24 for the project. - Revised README to reflect the new project focus on personal finance management, detailing features such as net worth tracking, debt management, invoicing, and cashflow monitoring. - Updated installation and development instructions to use Bun for package management.
106 lines
2.5 KiB
Markdown
106 lines
2.5 KiB
Markdown
# Personal Finances
|
|
|
|
A modern personal finance management application for tracking net worth, managing debt, invoicing clients, and monitoring cashflow.
|
|
|
|
## Features
|
|
|
|
### Net Worth Tracking
|
|
- Track assets (cash, investments, property, vehicles)
|
|
- Track liabilities (mortgages, loans, credit cards)
|
|
- Visualize net worth over time with charts
|
|
- View asset allocation breakdown
|
|
|
|
### Debt Management
|
|
- Organize debts by custom categories
|
|
- Track multiple accounts per category
|
|
- Monitor paydown progress with visual indicators
|
|
- View by category or individual account
|
|
|
|
### Invoicing
|
|
- Create and manage invoices
|
|
- Track invoice status (draft, sent, paid, overdue)
|
|
- Manage client database
|
|
- View outstanding and paid totals
|
|
|
|
### Cashflow
|
|
- Track income sources with various frequencies
|
|
- Categorize expenses (essential vs discretionary)
|
|
- Monitor savings rate
|
|
- Log recent transactions
|
|
|
|
## Tech Stack
|
|
|
|
- **React 19** with TypeScript
|
|
- **Vite** for fast development and builds
|
|
- **Redux Toolkit** for state management
|
|
- **React Router** for navigation
|
|
- **shadcn/ui** + **Tailwind CSS** for UI components
|
|
- **Recharts** for data visualization
|
|
- **date-fns** for date formatting
|
|
- **Lucide React** for icons
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- [Bun](https://bun.sh/) (or Node.js 18+)
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
cd frontend-web
|
|
bun install
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
bun run dev
|
|
```
|
|
|
|
Open [http://localhost:5174](http://localhost:5174) in your browser.
|
|
|
|
### Build
|
|
|
|
```bash
|
|
bun run build
|
|
```
|
|
|
|
### Preview Production Build
|
|
|
|
```bash
|
|
bun run preview
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── ui/ # shadcn/ui components
|
|
│ ├── dialogs/ # Modal dialog components
|
|
│ └── Layout.tsx # Main app layout with sidebar
|
|
├── pages/
|
|
│ ├── NetWorthPage.tsx
|
|
│ ├── DebtsPage.tsx
|
|
│ ├── InvoicesPage.tsx
|
|
│ ├── ClientsPage.tsx
|
|
│ └── CashflowPage.tsx
|
|
├── store/
|
|
│ ├── slices/ # Redux slices for each feature
|
|
│ ├── store.ts # Redux store configuration
|
|
│ ├── hooks.ts # Typed Redux hooks
|
|
│ └── index.ts # Barrel exports
|
|
├── App.tsx # Root component with routing
|
|
├── main.tsx # Entry point
|
|
└── index.css # Global styles and theme
|
|
```
|
|
|
|
## Design
|
|
|
|
- Dark glass aesthetic with subtle transparency
|
|
- Minimal, clean interface
|
|
- **Funnel Sans** for headings
|
|
- **Inter** for body text
|
|
- Greyscale palette with green accents for positive values
|