fristy/ARCHITECTURE.md

Fristy - Vertrags-Management App

Architektur-Dokumentation

📱 Übersicht

Eine modulare iOS/Android-App zur Verwaltung aller persönlichen Verträge (Handy, DSL, Netflix, Wasser, etc.)

🏗️ Tech Stack

• Frontend: React Native (iOS & Android Support)
• Navigation: React Navigation
• State Management: Zustand (leichtgewichtig & modular)
• Backend: Supabase (Auth, Database, Storage)
• Styling: NativeWind (Tailwind CSS für React Native)
• Icons: React Native Vector Icons
• Notifications: React Native Push Notifications

📐 Modulare Architektur

app-v0.0.1/
├── src/
│   ├── modules/              # Feature-Module (unabhängig)
│   │   ├── auth/            # Authentifizierung
│   │   │   ├── screens/
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   ├── services/
│   │   │   └── types/
│   │   ├── contracts/       # Vertrags-Verwaltung
│   │   │   ├── screens/
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   ├── services/
│   │   │   └── types/
│   │   ├── dashboard/       # Übersicht
│   │   ├── notifications/   # Erinnerungen
│   │   ├── profile/         # Benutzerprofil
│   │   └── analytics/       # Statistiken (optional)
│   ├── shared/              # Gemeinsame Ressourcen
│   │   ├── components/      # UI-Komponenten
│   │   ├── hooks/           # Wiederverwendbare Hooks
│   │   ├── utils/           # Hilfsfunktionen
│   │   ├── constants/       # Konstanten
│   │   ├── types/           # TypeScript Typen
│   │   └── theme/           # Design System
│   ├── navigation/          # App-Navigation
│   ├── store/               # Globaler State
│   └── config/              # Konfiguration
├── assets/                  # Bilder, Fonts, etc.
├── ios/                     # iOS-spezifisch
├── android/                 # Android-spezifisch
└── __tests__/              # Tests

🎯 Core-Module

1. Auth-Modul (src/modules/auth/)

• Login/Registrierung
• Passwort-Reset
• Session-Management
• Biometrische Authentifizierung (Face ID/Touch ID)

2. Contracts-Modul (src/modules/contracts/)

• Vertrag hinzufügen/bearbeiten/löschen
• Kategorien (Internet, Mobilfunk, Streaming, Versicherungen, etc.)
• Dokumente hochladen (PDF-Scans)
• Kündigungsfristen-Tracking
• Kostenübersicht

3. Dashboard-Modul (src/modules/dashboard/)

• Übersicht aller Verträge
• Monatskosten-Zusammenfassung
• Nächste Kündigungsfristen
• Schnellaktionen

4. Notifications-Modul (src/modules/notifications/)

• Push-Benachrichtigungen
• Kündigungsfristen-Erinnerungen
• Zahlungserinnerungen
• Custom Reminder

5. Profile-Modul (src/modules/profile/)

• Benutzereinstellungen
• App-Einstellungen
• Datenschutz
• Export/Backup

🗄️ Datenmodell

User

interface User {
  id: string;
  email: string;
  name: string;
  createdAt: Date;
  updatedAt: Date;
}

Contract

interface Contract {
  id: string;
  userId: string;
  name: string;                    // z.B. "Vodafone Handyvertrag"
  provider: string;                // z.B. "Vodafone"
  category: ContractCategory;
  startDate: Date;
  endDate?: Date;
  cancellationDeadline?: Date;     // Kündigungsfrist
  noticePeriod: number;            // Kündigungsfrist in Monaten
  cost: number;                    // Monatliche Kosten
  billingCycle: 'monthly' | 'quarterly' | 'yearly';
  autoRenewal: boolean;
  notes?: string;
  documents: Document[];           // PDF-Anhänge
  reminderEnabled: boolean;
  reminderDays: number;            // Tage vor Kündigungsfrist
  status: 'active' | 'cancelled' | 'expired';
  createdAt: Date;
  updatedAt: Date;
}

ContractCategory

enum ContractCategory {
  MOBILE = 'mobile',
  INTERNET = 'internet',
  STREAMING = 'streaming',
  INSURANCE = 'insurance',
  UTILITIES = 'utilities',          // Strom, Wasser, Gas
  GYM = 'gym',
  SUBSCRIPTIONS = 'subscriptions',   // Magazine, etc.
  OTHER = 'other'
}

🔄 State Management (Zustand)

// src/store/contractStore.ts
interface ContractStore {
  contracts: Contract[];
  loading: boolean;
  error: string | null;
  
  // Actions
  fetchContracts: () => Promise<void>;
  addContract: (contract: Omit<Contract, 'id'>) => Promise<void>;
  updateContract: (id: string, data: Partial<Contract>) => Promise<void>;
  deleteContract: (id: string) => Promise<void>;
  filterByCategory: (category: ContractCategory) => Contract[];
  getTotalMonthlyCost: () => number;
  getUpcomingDeadlines: (days: number) => Contract[];
}

🎨 Design System

Farben

• Primary: #6366F1 (Indigo)
• Secondary: #10B981 (Green)
• Warning: #F59E0B (Amber)
• Danger: #EF4444 (Red)
• Background: #F9FAFB (Light Gray)
• Text: #111827 (Dark Gray)

Kategorien-Farben

• Mobile: #3B82F6 (Blue)
• Internet: #8B5CF6 (Purple)
• Streaming: #EC4899 (Pink)
• Insurance: #10B981 (Green)
• Utilities: #F59E0B (Amber)

🚀 Entwicklungs-Roadmap

Phase 1: MVP (Minimum Viable Product)

• User Authentication (Email/Password)
• Verträge erstellen/bearbeiten/löschen
• Dashboard mit Übersicht
• Kategorisierung
• Basis-Benachrichtigungen

Phase 2: Enhanced Features

• Dokumenten-Upload
• Erweiterte Benachrichtigungen
• Kostenanalyse & Charts
• Export-Funktion (PDF/CSV)
• Biometrische Authentifizierung

Phase 3: Advanced

• OCR für automatisches Auslesen von Verträgen
• Kündigungs-Assistent (automatische Kündigungen)
• Vergleichsportal-Integration
• Familie/Team-Sharing
• Cloud-Backup

🔐 Sicherheit

• Alle sensiblen Daten verschlüsselt
• Row Level Security (RLS) in Supabase
• Biometrische Authentifizierung
• Automatischer Logout nach Inaktivität
• Keine lokale Speicherung von Passwörtern

📱 Navigation-Struktur

Stack Navigator
├── Auth Stack (nicht eingeloggt)
│   ├── Login
│   ├── Register
│   └── ForgotPassword
└── App Stack (eingeloggt)
    └── Tab Navigator
        ├── Dashboard (Home)
        ├── Contracts (Liste)
        ├── Add Contract
        ├── Notifications
        └── Profile

🧪 Testing-Strategie

• Unit Tests: Services & Utils
• Integration Tests: Stores & Hooks
• E2E Tests: Kritische User Flows
• Snapshot Tests: UI Components

📦 Deployment

• iOS: TestFlight → App Store
• Android: Google Play Console
• CI/CD: GitHub Actions
• Versionierung: Semantic Versioning

🔧 Modulare Erweiterbarkeit

Neues Feature hinzufügen:

1. Neuen Ordner in src/modules/ erstellen
2. Eigene screens, components, services implementieren
3. In Navigation einbinden
4. Optional: Eigener Store

Feature entfernen:

1. Module-Ordner löschen
2. Navigation-Einträge entfernen
3. Store-Referenzen entfernen

Vorteile dieser Architektur:

• ✅ Jedes Modul ist unabhängig
• ✅ Einfaches Testing einzelner Module
• ✅ Team-Arbeit möglich (jeder an anderem Modul)
• ✅ Features können aktiviert/deaktiviert werden
• ✅ Code-Wiederverwendung durch shared/
• ✅ Skalierbar für große Apps