6.8 KiB

Raw Blame History

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

npm install

2. iOS Setup

cd ios
pod install
cd ..

3. Supabase konfigurieren

Gehe zu supabase.com und erstelle ein neues Projekt
Erstelle die folgende Tabellen-Struktur:

Users Tabelle (wird automatisch von Supabase Auth erstellt)

Contracts Tabelle:

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);

Kopiere deine Supabase Credentials:
- Project URL
- Anon Key
Erstelle .env Datei im Root-Verzeichnis:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key-here

Aktualisiere src/config/index.ts mit deinen Credentials

4. App starten

iOS:

npm run ios

Android:

npm run android

Metro Bundler (Development Server):

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

Auth Screens erstellen
- Login Screen
- Register Screen
- Passwort Reset
Contract Screens erstellen
- Verträge Liste
- Vertrag hinzufügen
- Vertrag bearbeiten
- Vertrag Details
Dashboard erstellen
- Übersicht aller Verträge
- Monatliche Kosten
- Anstehende Kündigungsfristen
Notifications implementieren
- Push-Benachrichtigungen Setup
- Erinnerungen für Kündigungsfristen

Neues Feature hinzufügen

Erstelle einen neuen Ordner in src/modules/

Struktur:

src/modules/mein-feature/
├── screens/
├── components/
├── hooks/
├── services/
└── types/

Implementiere deine Screens und Komponenten
Füge Navigation in src/navigation/RootNavigation.tsx hinzu
Optional: Erstelle einen Store in src/store/

Komponenten verwenden

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

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

# Tests ausführen
npm test

# Type-Checking
npm run type-check

# Linting
npm run lint

📱 Build & Deployment

iOS

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

Android

# Debug APK
cd android
./gradlew assembleDebug

# Release APK
./gradlew assembleRelease

🐛 Troubleshooting

Metro Bundler startet nicht:

npm start -- --reset-cache

iOS Build-Fehler:

cd ios
pod deintegrate
pod install
cd ..
npm run ios

Android Build-Fehler:

cd android
./gradlew clean
cd ..
npm run android

📚 Weitere Ressourcen

💡 Tipps

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

6.8 KiB Raw Blame History