Budget-Tracker
Moderne Full-Stack-Webanwendung zur Verwaltung persönlicher Finanzen, Budgets und Transaktionen
Lernfokus & Kompetenzen
RESTful API-Design
NestJS Controller → Service → Repository Pattern mit DTO-Validation und Swagger-Dokumentation
State-Management
Reaktive Zustandsverwaltung mit RxJS BehaviorSubjects und Observable-Patterns
Formulare & Validierung
Angular Reactive Forms mit custom Validators und Type-Safety
Datenvisualisierung
Interaktive Charts mit Chart.js für Budgets, Transaktionen und Trends
Datenfilterung & CRUD
Komplexe Query-Parameter, Sortierung, Pagination und vollständige CRUD-Operationen
Features
Dashboard mit übersichtlicher Darstellung aller Finanzdaten und KPIs
Verwaltung mehrerer Konten (Giro, Sparkonto, Kreditkarte, etc.)
Erfassung und Kategorisierung von Einnahmen und Ausgaben
Monatliche Budgets für verschiedene Kategorien mit Fortschritts-Tracking
Flexible Kategorisierung mit Emojis und Farben
Interaktive Diagramme und Datenvisualisierung mit Chart.js
Sicheres JWT-basiertes Authentifizierungs-System
Responsive Design optimiert für Desktop und Mobile
Cloud-Ready mit Unterstützung für Neon Database (Serverless PostgreSQL)
Architektur
- Standalone Components mit modernem Angular
- Lazy Loading für optimale Performance
- OnPush Change Detection für effizientes Rendering
- Reactive Forms für typsichere Formulare
- Angular Material für konsistente UI
- Chart.js Integration für Datenvisualisierung
- RESTful API mit 3-Schicht-Architektur (Controller → Service → Repository)
- Feature-basierte Module (Auth, Accounts, Transactions, Categories, Budgets)
- JWT-Authentifizierung mit bcrypt Password Hashing
- Input Validation mit class-validator DTOs
- Swagger/OpenAPI Dokumentation
- Health Check Endpoints für Monitoring
- Prisma ORM für typsichere Datenbank-Queries
- Relationales Schema mit Foreign Keys
- Migrations für Version Control
- Connection Pooling für Performance
- Unterstützung für lokale DB (Docker) und Neon Cloud
- REST API mit JSON-Payloads
- CORS-Konfiguration für Frontend-Zugriff
- HTTP Interceptors für Auth und Loading States
- Docker Compose für lokale Entwicklung
- Cloudflare Pages für Frontend Hosting
Screenshots & UI-Flows
Technische Details
Die Architektur des Budget Tracker ist als klar modularer Full-Stack-Stack aufgebaut. Das frontendseitige Angular-Projekt ist in Feature-basierte Module gegliedert (z. B. Auth, Accounts, Transactions, Categories, Budgets), unterstützt durch gemeinsame Core- und Shared-Module. Das NestJS-Backend bildet die gleiche fachliche Strukturierung ab, nutzt Prisma zur Datenbankanbindung und stellt REST-APIs für alle Frontend-Operationen bereit. Daten werden in einer PostgreSQL-Datenbank persistent gespeichert.
Herausforderungen & Learnings
Herausforderungen
State-Management mit RxJS
Problem: Komplexe Zustandsverwaltung zwischen mehreren Komponenten (Auth, Account Selection, Loading States) ohne zentrale State Library.
Lösung: Implementierung eigener Service-Pattern mit BehaviorSubjects für reaktive Datensynchronisation. AuthService für User-State mit LocalStorage-Persistierung, AccountSelectionService mit DB-Sync für Konto-Wechsel.
Type-Safety über Stack-Grenzen
Problem: Inkonsistente Datentypen zwischen Frontend (Angular) und Backend (NestJS) führten zu Runtime-Fehlern.
Lösung: Strikte TypeScript-Konfiguration auf beiden Seiten, shared DTOs als Single Source of Truth, Prisma-generierte Types für garantierte DB-Konsistenz. OnPush Change Detection erzwingt immutable Patterns.
Performante Chart-Rendering
Problem: Chart.js re-renderte bei jeder Transaktion, was zu Performance-Problemen führte.
Lösung: OnPush Change Detection für Chart-Komponenten, memoization von Berechnungen, Backend-seitige Aggregation für Dashboard-KPIs statt Client-side Filterung großer Datensätze.
Datenbank-Modellierung
Problem: Balance zwischen Normalisierung (keine Redundanz) und Performance (schnelle Queries für Dashboard).
Lösung: Relationales Schema mit Foreign Keys für Datenintegrität, strategische Indizes auf häufig gefilterten Feldern (user_id, account_id, date), Prisma Migrations für versioniertes Schema-Management.
Learnings
- Full-Stack TypeScript: End-to-End Type Safety zwischen Frontend und Backend spart Debugging-Zeit und verhindert Runtime-Fehler.
- Prisma ORM: Bietet exzellente Developer Experience mit typsicheren Queries, Migrations und automatischer Client-Generierung.
- Docker: Vereinfacht lokale Entwicklung massiv - ein "pnpm db:up" und die Datenbank läuft konsistent.
- Monorepo: PNPM Workspaces ermöglichen effizientes Dependency Management und Code-Sharing zwischen Apps.
Verbesserungsmöglichkeiten
- Dark Mode: Implementierung eines Dark Mode Themes für bessere User Experience.
- Recurring Transactions: Automatische Erstellung wiederkehrender Transaktionen (Miete, Gehalt).
- Multi-Currency Support: Unterstützung mehrerer Währungen für internationale Nutzer.
- Data Export: CSV/PDF Export für Steuererklärung und Archivierung.
- Investment Tracking: Erweiterung um Aktien, ETFs und Krypto-Tracking.
- 2FA: Two-Factor Authentication für erhöhte Sicherheit.