Development guidelines and architecture patterns for a full-stack Swedish budget management application with PostgreSQL, React, and intelligent transaction import system
This skill provides comprehensive guidance for working with a full-stack Swedish budget management application featuring PostgreSQL backend, React frontend, and intelligent transaction import capabilities.
Full-stack application with PostgreSQL backend and React frontend designed for Swedish household budget management.
```bash
npm run dev # Start development server with tsx (port 5000)
npm run build # Build for production (Vite frontend + esbuild backend)
npm run start # Start production server from dist/
npm run check # TypeScript type checking
npm run db:push # Push Drizzle schema changes to PostgreSQL
```
UUID-based entities with Drizzle ORM. Critical tables:
1. **File Processing**: CSV/XLSX via `TransactionImportEnhanced.tsx`
2. **Column Mapping**: Stored in `bankCsvMappings` table per bank
3. **Smart Reconciliation**: Duplicate detection and merge logic
4. **Balance Calculation**: Swedish payday logic (25th of month)
5. **Auto-Categorization**: UUID-based rules via `categoryRules`
6. **Persistence**: PostgreSQL with full audit trail
When adding new fields to ANY entity (transactions, accounts, etc.), the data flow requires updates in MULTIPLE places. Missing any step causes fields to disappear or show as empty/null.
**ROOT CAUSE**: Manual object mapping without including all fields from the API/database.
#### 1. Backend Data Retrieval (`server/dbStorage.ts`)
**CRITICAL**: Never use explicit column selection in bulk queries with Drizzle ORM
```typescript
// ❌ WRONG - Fields will be missing/null
const result = await db.select({
id: transactions.id,
newField: transactions.newField,
}).from(transactions)
// ✅ CORRECT - All fields included
const result = await db.select().from(transactions)
```
#### 2. Frontend Data Mapping - Search ALL .map() Functions
**CRITICAL**: Search codebase for ALL `.map(item => ({` patterns and add new fields to EVERY conversion.
```typescript
// ❌ WRONG - Missing fields
const accounts: Account[] = accountsFromAPI.map(acc => ({
id: acc.id,
name: acc.name,
// Missing: lastUpdate: acc.lastUpdate
}));
// ✅ CORRECT - Include ALL fields
const accounts: Account[] = accountsFromAPI.map(acc => ({
id: acc.id,
name: acc.name,
lastUpdate: acc.lastUpdate,
}));
```
#### 3. Transaction Processing Pipeline (`budgetOrchestrator.ts`)
**CRITICAL**: Search for ALL `.map(tx => ({` patterns and add new fields to every conversion:
```typescript
const transactionsAsBaseType: Transaction[] = transactions.map(tx => ({
id: tx.id,
linkedTransactionId: tx.linkedTransactionId,
linkedCostId: tx.linkedCostId,
savingsTargetId: tx.savingsTargetId,
newField: tx.newField, // Add new field everywhere
correctedAmount: tx.correctedAmount,
}))
```
#### 4. Transaction Linking Functions (`budgetOrchestrator.ts`)
Update ALL linking functions to set new fields:
```typescript
updates: {
type: 'ExpenseClaim',
correctedAmount: newNegativeCorrectedAmount,
linkedTransactionId: positiveTxId,
linkedCostId: positiveTxId,
newField: newValue, // Add to updates
isManuallyChanged: true
}
```
#### 5. Frontend Snake_case Conversion (`TransactionExpandableCard.tsx`)
Add snake_case → camelCase conversion for database compatibility:
```typescript
let newField = propTransaction.newField || (propTransaction as any).new_field || null;
const convertedTransaction = {
...propTransaction,
newField: newField,
}
```
```bash
grep -rn "\.map.*=> ({" client/src/
grep -rn "\.map.*=>" client/src/ | grep "{"
```
Mock auth middleware injects `dev-user-123` for all routes:
```bash
DATABASE_URL # PostgreSQL connection (required for production)
PORT # Server port (default: 5000)
NODE_ENV # development/production
```
1. Add table schema in `shared/schema.ts` with UUID primary key
2. Create Zod insert/select schemas with proper validation
3. Implement CRUD operations in `server/dbStorage.ts`
4. Add API routes in `server/routes.ts` with mock auth
5. Create TanStack Query hook in `client/src/hooks/`
1. Create component in `client/src/pages/`
2. Add route to `client/src/App.tsx` Switch component
3. Add navigation item in `client/src/components/AppSidebar.tsx`
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/swedish-budget-app-development-guide-uf1325/raw