255 lines
7.3 KiB
Markdown
255 lines
7.3 KiB
Markdown
# 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
|
|
```typescript
|
|
interface User {
|
|
id: string;
|
|
email: string;
|
|
name: string;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
}
|
|
```
|
|
|
|
#### Contract
|
|
```typescript
|
|
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
|
|
```typescript
|
|
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)
|
|
|
|
```typescript
|
|
// 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
|