Alexander Zinn
a62782a58f
## Summary Complete frontend overhaul implementing best practices, security hardening, full CRUD operations, and performance optimizations across the application. ## Key Changes ### Architecture & Performance - Implement code splitting with React.lazy() reducing main bundle from 795KB to 308KB (61% improvement) - Add error boundary component for graceful error handling - Create shared utility modules for formatters, validation, and calculations ### Security Enhancements - Add input sanitization to prevent XSS attacks - Implement comprehensive validation (email, phone, positive numbers, required fields) - Sanitize all user inputs before storage - Add confirmation dialogs for destructive operations ### Features & Functionality - Implement complete edit/delete operations for assets, liabilities, clients, and invoices - Add invoice status update functionality (draft/sent/paid/overdue/cancelled) - Connect "Record Snapshot" button with proper functionality - Fix hardcoded statistics with dynamic calculations (monthly change, YTD growth) - Make all list items clickable with hover effects and visual feedback ### Code Quality - Replace inline currency formatting with shared formatters - Add comprehensive input validation across all forms - Display inline error messages for validation failures - Implement loading states for lazy-loaded routes - Ensure type safety throughout with zero TypeScript errors ### UI/UX Improvements - Add hover states to all clickable items - Display validation errors inline with user-friendly messages - Add loading indicators during page transitions - Color-code financial metrics (green for positive, red for negative) - Improve form user experience with real-time validation ## Technical Details - Created src/lib/formatters.ts for currency and percentage formatting - Created src/lib/validation.ts for input validation and sanitization - Created src/lib/calculations.ts for financial calculations - Added EditAssetDialog, EditLiabilityDialog, EditClientDialog, InvoiceDetailsDialog - Wrapped app in ErrorBoundary for robust error handling
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 (or Node.js 18+)
Installation
cd frontend-web
bun install
Development
bun run dev
Open http://localhost:5174 in your browser.
Build
bun run build
Preview Production Build
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