Add .nvmrc file and update README for Personal Finances app
- 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.
This commit is contained in:
1
frontend-web/.nvmrc
Normal file
1
frontend-web/.nvmrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
24
|
||||||
@@ -1,75 +1,105 @@
|
|||||||
# React + TypeScript + Vite
|
# Personal Finances
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
A modern personal finance management application for tracking net worth, managing debt, invoicing clients, and monitoring cashflow.
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
## Features
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
### Net Worth Tracking
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
- Track assets (cash, investments, property, vehicles)
|
||||||
|
- Track liabilities (mortgages, loans, credit cards)
|
||||||
|
- Visualize net worth over time with charts
|
||||||
|
- View asset allocation breakdown
|
||||||
|
|
||||||
## React Compiler
|
### Debt Management
|
||||||
|
- Organize debts by custom categories
|
||||||
|
- Track multiple accounts per category
|
||||||
|
- Monitor paydown progress with visual indicators
|
||||||
|
- View by category or individual account
|
||||||
|
|
||||||
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
|
### Invoicing
|
||||||
|
- Create and manage invoices
|
||||||
|
- Track invoice status (draft, sent, paid, overdue)
|
||||||
|
- Manage client database
|
||||||
|
- View outstanding and paid totals
|
||||||
|
|
||||||
Note: This will impact Vite dev & build performances.
|
### Cashflow
|
||||||
|
- Track income sources with various frequencies
|
||||||
|
- Categorize expenses (essential vs discretionary)
|
||||||
|
- Monitor savings rate
|
||||||
|
- Log recent transactions
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
## Tech Stack
|
||||||
|
|
||||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
- **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
|
||||||
|
|
||||||
```js
|
## Getting Started
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
### Prerequisites
|
||||||
tseslint.configs.recommendedTypeChecked,
|
|
||||||
// Alternatively, use this for stricter rules
|
|
||||||
tseslint.configs.strictTypeChecked,
|
|
||||||
// Optionally, add this for stylistic rules
|
|
||||||
tseslint.configs.stylisticTypeChecked
|
|
||||||
|
|
||||||
// Other configs...
|
- [Bun](https://bun.sh/) (or Node.js 18+)
|
||||||
],
|
|
||||||
languageOptions: {
|
### Installation
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
```bash
|
||||||
tsconfigRootDir: import.meta.dirname
|
cd frontend-web
|
||||||
}
|
bun install
|
||||||
// other options...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
### Development
|
||||||
|
|
||||||
```js
|
```bash
|
||||||
// eslint.config.js
|
bun run dev
|
||||||
import reactX from 'eslint-plugin-react-x';
|
|
||||||
import reactDom from 'eslint-plugin-react-dom';
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
// Enable lint rules for React
|
|
||||||
reactX.configs['recommended-typescript'],
|
|
||||||
// Enable lint rules for React DOM
|
|
||||||
reactDom.configs.recommended
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname
|
|
||||||
}
|
|
||||||
// other options...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
|||||||
Reference in New Issue
Block a user