# Fristy - Getting Started Guide

## 🚀 Installation & Setup

### Voraussetzungen
- Node.js >= 18
- npm >= 9
- Xcode (für iOS)
- Android Studio (für Android)
- CocoaPods (für iOS): `sudo gem install cocoapods`

### 1. Dependencies installieren

```bash
npm install
```

### 2. iOS Setup

```bash
cd ios
pod install
cd ..
```

### 3. Supabase konfigurieren

1. Gehe zu [supabase.com](https://supabase.com) und erstelle ein neues Projekt
2. Erstelle die folgende Tabellen-Struktur:

**Users Tabelle** (wird automatisch von Supabase Auth erstellt)

**Contracts Tabelle:**
```sql
CREATE TABLE contracts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  provider TEXT NOT NULL,
  category TEXT NOT NULL,
  start_date TIMESTAMP WITH TIME ZONE NOT NULL,
  end_date TIMESTAMP WITH TIME ZONE,
  cancellation_deadline TIMESTAMP WITH TIME ZONE,
  notice_period INTEGER NOT NULL,
  cost NUMERIC(10,2) NOT NULL,
  billing_cycle TEXT NOT NULL,
  auto_renewal BOOLEAN DEFAULT false,
  notes TEXT,
  documents JSONB DEFAULT '[]',
  reminder_enabled BOOLEAN DEFAULT true,
  reminder_days INTEGER DEFAULT 30,
  status TEXT DEFAULT 'active',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Index für bessere Performance
CREATE INDEX contracts_user_id_idx ON contracts(user_id);
CREATE INDEX contracts_status_idx ON contracts(status);
CREATE INDEX contracts_cancellation_deadline_idx ON contracts(cancellation_deadline);

-- Row Level Security aktivieren
ALTER TABLE contracts ENABLE ROW LEVEL SECURITY;

-- Policy: Benutzer können nur ihre eigenen Verträge sehen
CREATE POLICY "Users can view own contracts"
  ON contracts FOR SELECT
  USING (auth.uid() = user_id);

-- Policy: Benutzer können nur ihre eigenen Verträge erstellen
CREATE POLICY "Users can insert own contracts"
  ON contracts FOR INSERT
  WITH CHECK (auth.uid() = user_id);

-- Policy: Benutzer können nur ihre eigenen Verträge aktualisieren
CREATE POLICY "Users can update own contracts"
  ON contracts FOR UPDATE
  USING (auth.uid() = user_id);

-- Policy: Benutzer können nur ihre eigenen Verträge löschen
CREATE POLICY "Users can delete own contracts"
  ON contracts FOR DELETE
  USING (auth.uid() = user_id);
```

3. Kopiere deine Supabase Credentials:
   - Project URL
   - Anon Key

4. Erstelle `.env` Datei im Root-Verzeichnis:
```env
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key-here
```

5. Aktualisiere `src/config/index.ts` mit deinen Credentials

### 4. App starten

**iOS:**
```bash
npm run ios
```

**Android:**
```bash
npm run android
```

**Metro Bundler (Development Server):**
```bash
npm start
```

## 📁 Projekt-Struktur

```
app-v0.0.1/
├── src/
│   ├── modules/              # Feature-Module
│   │   ├── auth/            # Authentifizierung
│   │   ├── contracts/       # Vertrags-Verwaltung
│   │   ├── dashboard/       # Übersicht
│   │   ├── notifications/   # Erinnerungen
│   │   └── profile/         # Benutzerprofil
│   ├── shared/              # Gemeinsame Ressourcen
│   │   ├── components/      # UI-Komponenten
│   │   ├── hooks/           # Custom Hooks
│   │   ├── utils/           # Hilfsfunktionen
│   │   ├── constants/       # Konstanten
│   │   ├── types/           # TypeScript Typen
│   │   └── theme/           # Design System
│   ├── navigation/          # Navigation
│   ├── store/               # Zustand State Management
│   └── config/              # Konfiguration
├── assets/                  # Bilder, Fonts
├── ios/                     # iOS-spezifisch
├── android/                 # Android-spezifisch
└── App.tsx                  # Entry Point
```

## 🔧 Nächste Schritte

### Phase 1: MVP Features entwickeln

1. **Auth Screens erstellen**
   - Login Screen
   - Register Screen
   - Passwort Reset

2. **Contract Screens erstellen**
   - Verträge Liste
   - Vertrag hinzufügen
   - Vertrag bearbeiten
   - Vertrag Details

3. **Dashboard erstellen**
   - Übersicht aller Verträge
   - Monatliche Kosten
   - Anstehende Kündigungsfristen

4. **Notifications implementieren**
   - Push-Benachrichtigungen Setup
   - Erinnerungen für Kündigungsfristen

### Neues Feature hinzufügen

1. Erstelle einen neuen Ordner in `src/modules/`
2. Struktur:
   ```
   src/modules/mein-feature/
   ├── screens/
   ├── components/
   ├── hooks/
   ├── services/
   └── types/
   ```
3. Implementiere deine Screens und Komponenten
4. Füge Navigation in `src/navigation/RootNavigation.tsx` hinzu
5. Optional: Erstelle einen Store in `src/store/`

### Komponenten verwenden

```tsx
import { Button, Input, ContractCard } from '@shared/components';

// Button
<Button
  title="Speichern"
  onPress={handleSave}
  variant="primary"
  size="md"
/>

// Input
<Input
  label="Vertragsname"
  placeholder="z.B. Vodafone"
  value={name}
  onChangeText={setName}
  error={errors.name}
/>

// ContractCard
<ContractCard
  contract={contract}
  onPress={() => navigateToDetail(contract.id)}
/>
```

### Store verwenden

```tsx
import { useContractStore } from '@store';

const MyComponent = () => {
  const { contracts, addContract, getTotalMonthlyCost } = useContractStore();
  
  const totalCost = getTotalMonthlyCost();
  
  return (
    <View>
      <Text>Verträge: {contracts.length}</Text>
      <Text>Monatliche Kosten: {totalCost.toFixed(2)}€</Text>
    </View>
  );
};
```

## 🧪 Testing

```bash
# Tests ausführen
npm test

# Type-Checking
npm run type-check

# Linting
npm run lint
```

## 📱 Build & Deployment

### iOS

1. Öffne `ios/Fristy.xcworkspace` in Xcode
2. Wähle dein Team unter "Signing & Capabilities"
3. Archive erstellen: Product → Archive
4. Hochladen zu TestFlight/App Store

### Android

```bash
# Debug APK
cd android
./gradlew assembleDebug

# Release APK
./gradlew assembleRelease
```

## 🐛 Troubleshooting

**Metro Bundler startet nicht:**
```bash
npm start -- --reset-cache
```

**iOS Build-Fehler:**
```bash
cd ios
pod deintegrate
pod install
cd ..
npm run ios
```

**Android Build-Fehler:**
```bash
cd android
./gradlew clean
cd ..
npm run android
```

## 📚 Weitere Ressourcen

- [React Native Docs](https://reactnative.dev/docs/getting-started)
- [Supabase Docs](https://supabase.com/docs)
- [Zustand Docs](https://docs.pmnd.rs/zustand)
- [React Navigation](https://reactnavigation.org/docs/getting-started)

## 💡 Tipps

1. **Modulare Entwicklung**: Jedes Feature sollte unabhängig funktionieren
2. **TypeScript nutzen**: Typsicherheit hilft Fehler zu vermeiden
3. **State Management**: Nutze Zustand für globalen State
4. **Komponenten wiederverwenden**: Nutze `@shared/components`
5. **Tests schreiben**: Besonders für Business-Logik wichtig