Konten-Modell.com - Vanilla JavaScript Buchhaltungs-Tool

Projektübersicht

Kunde: Meng GmbH Jahr: 2023-2024 Technologie: Vanilla JavaScript, HTML5, CSS3 URL: https://konten-modell.com/

Konten-Modell.com ist ein schlankes, browserbasiertes Finanz-Tool, das Nutzern hilft, ihre Einnahmen nach bewährten Kontenmodellen automatisch aufzuteilen. Die Anwendung wurde bewusst ohne Frameworks entwickelt - mit purem HTML, CSS und Vanilla JavaScript - um maximale Performance, Einfachheit und Datenschutz zu gewährleisten.

Technische Highlights

Framework-lose Architektur

Die bewusste Entscheidung gegen Frameworks ermöglicht:

• Minimale Dateigröße: Keine Framework-Overhead, extrem schnelle Ladezeiten
• Null Dependencies: Keine externen Abhängigkeiten, keine npm-Pakete
• Volle Kontrolle: Jede Zeile Code ist nachvollziehbar und wartbar
• Langfristige Stabilität: Keine Breaking Changes durch Framework-Updates
• Browser-Native: Nutzung moderner Browser-APIs ohne Abstraktionsschicht
• Lernbarkeit: Code ist auch für Junior-Entwickler leicht verständlich

Client-Side Only Architecture

• Kein Backend: Komplette Logik läuft im Browser
• Lokale Datenspeicherung: Alle Daten werden ausschließlich in Browser-Cookies gespeichert
• 100% Privacy: Keine Server-Kommunikation, keine Datenübertragung
• Offline-fähig: Funktioniert ohne Internetverbindung
• Zero-Trust Datenschutz: Technisch unmöglich, Nutzerdaten zu erfassen
• DSGVO-Konformität: Durch Design privacy-first

Vanilla JavaScript Features

• ES6+ Syntax: Moderne JavaScript-Features ohne Transpiler
• Event-Driven: Reaktive Updates durch native Event-Listener
• Template Strings: Dynamisches HTML ohne Template-Engine
• LocalStorage & Cookies: Native Browser-APIs für Persistierung
• CSS Variables: Dynamisches Theming ohne CSS-in-JS
• Form Validation: Native HTML5-Validierung

Hauptfunktionen

Kontenmodell-Rechner

• 2-Konten-Modell: Einfachster Einstieg (70% Konsum, 30% Sparen)
• 3-Konten-Modell: Mit Spaßkonto (60% Konsum, 25% Sparen, 15% Spaß)
• 6-Konten-Modell: Maximale Kontrolle über alle Finanzbereiche
• Experten-Modelle: Basierend auf bekannten Finanzbuch-Autoren
  • Bodo Schäfer (“Der Weg zur finanziellen Freiheit”)
  • T. Harv Eker (“So denken Millionäre” - 6-Gläser-System)
  • Dave Ramsey (Baby Steps)
  • Robert Kiyosaki (“Rich Dad Poor Dad”)
  • Der reichste Mann von Babylon
  • Alex Fischer (Vermögensaufbau-Fokus)
• Spezial-Modelle:
  • Unternehmer (mit Steuerrücklagen)
  • Hausbesitzer (Instandhaltungsrücklagen)
  • Vermieter (Mieteinnahmen-Management)
  • ALG II (Regelbedarf-Optimierung)

Interaktive Anpassungen

• Range-Slider: Prozentuale Verteilung per Schieberegler
• Live-Berechnung: Sofortige Neuberechnung bei Änderungen
• Custom Accounts: Nutzer können eigene Konten hinzufügen
• Persistierung: Einstellungen werden automatisch gespeichert
• Validierung: Summe muss immer 100% ergeben

Bankverbindungs-Integration

• IBAN-Verwaltung: Optionale Speicherung von Bankverbindungen
• QR-Code-Generierung: EPC-Standard-konforme QR-Codes
• Banking-App-Integration: QR-Codes mit allen Überweisungsdaten
• Verwendungszweck: Automatisch generierte Beschreibungen
• Client-Side Generation: QR-Codes werden lokal im Browser erstellt

Visualisierung

• Ergebnis-Übersicht: Klare Darstellung der berechneten Beträge
• Prozent-Anzeigen: Transparente Aufteilung der Verteilung
• Summen-Validierung: Visuelles Feedback bei 100%-Summe
• Responsive Charts: Mobile-optimierte Darstellung

Technologien

Frontend

• HTML5: Semantisches Markup, Accessibility-konform
• CSS3:
  • Custom Properties für Theming
  • Flexbox & Grid Layout
  • Media Queries für Responsive Design
  • Transitions & Animations
• Vanilla JavaScript:
  • ES6+ Features (Arrow Functions, Destructuring, Template Literals)
  • Native DOM-Manipulation
  • Event Delegation
  • LocalStorage API
  • Cookie API

Tools & Libraries

• QR-Code-Generator: Minimal-Library für EPC-QR-Codes
• Dark Mode: CSS-basiertes Theme-Switching
• Cookie Banner: Custom-Implementierung ohne externe Tools
• No Build Process: Direkt deploybare Dateien
• No Package Manager: Keine node_modules

Hosting & Infrastructure

• Static Hosting: Einfaches File-Serving, keine Server-Logik nötig
• CDN-Ready: Kann problemlos über CDN ausgeliefert werden
• HTTPS: Sichere Verbindung
• Fast Loading: Minimale Payload durch Framework-lose Architektur

Herausforderungen & Lösungen

Challenge: State Management ohne Framework

Problem: Synchronisation von UI-State und Daten ohne Redux/Vuex Lösung:

• Simple Event-basierte Architektur
• Single Source of Truth in JavaScript-Objekten
• Re-Rendering nur betroffener UI-Komponenten
• Delegation Pattern für Event-Handling

Challenge: Reaktivität ohne Virtual DOM

Problem: Effiziente UI-Updates bei Datenänderungen Lösung:

• Gezieltes DOM-Updating statt Full-Re-Render
• Template Strings für dynamische HTML-Generierung
• Event Listeners für User-Interaktionen
• CSS-Transitions für smooth Updates

Challenge: Code-Organisation ohne Module-System

Problem: Strukturierung ohne Webpack/Rollup Lösung:

• Logische Datei-Aufteilung
• IIFE (Immediately Invoked Function Expressions) für Scope-Isolation
• Klare Namenskonventionen
• Kommentierte Code-Abschnitte

Challenge: Browser-Kompatibilität

Problem: ES6+-Features in älteren Browsern Lösung:

• Progressive Enhancement Ansatz
• Feature Detection statt Browser Detection
• Polyfills nur wo wirklich nötig
• Graceful Degradation für alte Browser

Code-Qualität & Best Practices

Performance

• Lazy Loading: Inhalte werden bei Bedarf geladen
• Event Delegation: Effiziente Event-Verwaltung
• Debouncing: Bei schnellen Input-Änderungen
• Minimales Repainting: Gezielte DOM-Updates
• No Framework Overhead: Nur Code der wirklich gebraucht wird

Accessibility

• Semantisches HTML: Korrekte Tags für Screen Reader
• ARIA-Labels: Zusätzliche Kontext-Informationen
• Keyboard Navigation: Alle Funktionen per Tastatur bedienbar
• Focus Management: Sichtbare Focus-States
• Color Contrast: WCAG-konforme Farbgestaltung

SEO

• Semantic HTML: Suchmaschinen-freundliche Struktur
• Meta Tags: Optimierte Descriptions und Titles
• Schema.org: Strukturierte Daten für Finanzen
• Fast Loading: Positive Page-Speed-Signale
• Mobile-First: Responsive Design

Design & User Interface

• Clean & Minimalist: Fokus auf Funktionalität ohne Ablenkung
• Financial Trust: Seriöses Design für Finanzthemen
• Card-Based Layout: Übersichtliche Modell-Auswahl
• Interactive Elements: Intuitive Slider und Inputs
• Color Coding: Visuelle Unterscheidung der Konten
• Dark Mode: Augenschonende Alternative
• Mobile-First: Optimiert für Smartphone-Nutzung

Datenschutz & Sicherheit

Privacy by Design

• Kein Tracking: Keine Analytics, keine Cookies außer funktionalen
• Lokale Speicherung: Daten verlassen niemals das Gerät
• Kein Backend: Technisch unmöglich Daten zu sammeln
• Transparenz: Klare Kommunikation der Datenspeicherung
• Opt-In: Cookie-Banner mit Ablehnungs-Option

DSGVO-Konformität

• Art. 25 DSGVO: Datenschutz durch Technikgestaltung
• Datenminimierung: Nur notwendige Daten werden gespeichert
• Keine personenbezogenen Daten: IBAN-Speicherung ist optional
• Nutzer-Kontrolle: Daten können jederzeit gelöscht werden
• Transparente Information: Datenschutzerklärung im Footer

Features im Detail

Berechnungslogik

Beispiel 6-Konten-Modell bei 3.500 EUR Einnahmen:
- Konsumkonto: 1.750 EUR (50%)
- Sparkonto: 700 EUR (20%)
- Spaßkonto: 350 EUR (10%)
- Fixkosten: 350 EUR (10%)
- Notgroschen: 175 EUR (5%)
- Investitionen: 175 EUR (5%)
= Summe: 3.500 EUR (100%)

• Alle Beträge werden auf 2 Nachkommastellen gerundet
• Validierung stellt sicher, dass Summe exakt 100% beträgt
• Live-Update bei jeder Änderung
• Farbcodierung für visuelle Orientierung

EPC-QR-Codes

• Standard-konform: European Payments Council Standard
• Bank-App-Ready: Funktioniert mit allen modernen Banking-Apps
• Vorbefüllt: IBAN, Empfänger, Betrag, Verwendungszweck
• Sicher: Keine sensiblen Daten werden übertragen
• Praktisch: Ein Scan erspart manuelles Tippen

Blog-Integration

• Finanz-Tipps: Zusätzlicher Content zu Geldmanagement
• SEO-Content: Längere Artikel für besseres Ranking
• Internal Linking: Verknüpfung mit Rechner-Tool
• Educational: Erklärung der verschiedenen Modelle

Wartung & Updates

• Kein Dependency Hell: Keine npm-Updates nötig
• Stabile Codebasis: Browser-APIs ändern sich selten
• Einfaches Debugging: Kein Source-Map-Chaos
• Klarer Code: Leicht wartbar auch nach Jahren
• Keine Build-Pipeline: Änderungen direkt deploybar

Ergebnis

Eine hochperformante, datenschutzfreundliche Finanz-Anwendung mit:

• Framework-loser Architektur für maximale Geschwindigkeit
• 100% Client-Side ohne Server-Abhängigkeit
• Voller Datenschutz durch lokale Speicherung
• 12+ Kontenmodelle von Finanzexperten
• QR-Code-Integration für Banking-Apps
• Mobile-First Design für unterwegs
• Zero Dependencies für langfristige Stabilität

Die Anwendung beweist, dass moderne Web-Apps nicht zwingend komplexe Frameworks benötigen. Durch den Fokus auf Vanilla JavaScript entsteht eine wartbare, schnelle und datenschutzfreundliche Lösung, die genau das tut, was sie soll - ohne Overhead, ohne Komplexität.

Technische Philosophie

“Simplicity is the ultimate sophistication”

Konten-Modell.com demonstriert die Stärke von:

• Progressive Enhancement: Funktionalität vor Fancy-Features
• YAGNI-Prinzip: You Ain’t Gonna Need It - kein Code auf Vorrat
• Minimalism: Nur das Nötigste, dafür perfekt umgesetzt
• Web Standards: Nutzung etablierter Browser-APIs
• User First: Schnell, privat, einfach zu bedienen

Die Entscheidung gegen Frameworks ist eine bewusste architektonische Wahl, die zu einer wartbaren, performanten und datenschutzfreundlichen Anwendung führt.