ANDJ/Emailsorter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Email Sorter Beta

Browse Source 
Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online  ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte  das es noch nicht fertig ist und verkaufs bereit
This commit is contained in:
ANDJ
2026-01-22 19:32:12 +01:00
parent 95349af50b
commit abf761db07
596 changed files with 56405 additions and 51231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
README.md
View File

@@ -1,229 +1,241 @@
# Email Sortierer Setup
# EmailSorter
Ein Multi-Step-Formular zur Konfiguration von Email-Präferenzen mit Appwrite-Datenspeicherung und Stripe-Bezahlung.
KI-gestützte E-Mail-Sortierung für mehr Produktivität und weniger Stress.
## Überblick
EmailSorter ist eine SaaS-Anwendung, die automatisch E-Mails kategorisiert und sortiert. Die Anwendung nutzt:
- **React + Vite** Frontend mit Tailwind CSS
- **Node.js + Express** Backend
- **Appwrite** für Datenbank und Authentifizierung
- **Stripe** für Zahlungen und Subscriptions
- **Mistral AI** für KI-basierte E-Mail-Kategorisierung
- **Gmail/Outlook API** für E-Mail-Integration
- **n8n** (optional) für Automatisierungsworkflows
## Projektstruktur
```
/
├── client/ # React Frontend
│ ├── src/
│ │ ├── components/ # UI Komponenten
│ │ ├── pages/ # Seiten
│ │ ├── context/ # React Context
│ │ └── lib/ # Utilities
│ └── package.json
├── server/ # Node.js Backend
│ ├── routes/ # API Routen
│ ├── services/ # Business Logic
│ └── package.json
├── n8n/ # n8n Workflows
│ └── workflows/
└── public/ # Legacy Frontend
```
## Quick Start
### 1. Repository klonen
```bash
# 1. Dependencies installieren
cd server
npm install
# 2. Setup überprüfen
npm run verify
# 3. Umgebungsvariablen konfigurieren
cp ../.env.example .env
# Bearbeiten Sie .env und fügen Sie Ihre Credentials ein
# 4. Datenbank initialisieren
npm run bootstrap
# Kopieren Sie die Database-ID und fügen Sie sie in .env ein
# 5. Tests ausführen
npm test
# 6. Server starten
npm start
# 7. Browser öffnen
# http://localhost:3000
git clone <repo-url>
cd emailsorter
```
## Voraussetzungen
- Node.js (v18 oder höher)
- Appwrite Account (https://cloud.appwrite.io)
- Stripe Account (https://stripe.com)
## Installation
1. **Repository klonen und Dependencies installieren:**
### 2. Dependencies installieren
```bash
cd server
# Frontend
cd client
npm install
# Backend
cd ../server
npm install
```
2. **Umgebungsvariablen konfigurieren:**
Kopieren Sie `.env.example` zu `.env` und füllen Sie alle Werte aus:
### 3. Umgebungsvariablen konfigurieren
```bash
cp .env.example .env
# Frontend
cd client
cp env.example .env
# Bearbeite .env mit deinen Appwrite Credentials
# Backend
cd ../server
cp env.example .env
# Bearbeite .env mit allen erforderlichen Credentials
```
Erforderliche Werte:
- `APPWRITE_ENDPOINT`: Ihre Appwrite API Endpoint (z.B. https://cloud.appwrite.io/v1)
- `APPWRITE_PROJECT_ID`: Ihre Appwrite Projekt-ID
- `APPWRITE_API_KEY`: Ihr Appwrite API Key (mit allen Berechtigungen)
- `APPWRITE_DATABASE_ID`: Wird nach Bootstrap-Script automatisch gesetzt
- `STRIPE_SECRET_KEY`: Ihr Stripe Secret Key (sk_test_...)
- `STRIPE_WEBHOOK_SECRET`: Ihr Stripe Webhook Secret (whsec_...)
3. **Appwrite Datenbank initialisieren:**
### 4. Appwrite Datenbank einrichten
```bash
npm run bootstrap
cd server
npm run bootstrap:v2
```
Dieses Script erstellt:
- Eine neue Datenbank "EmailSorter"
- 5 Collections: products, questions, submissions, answers, orders
- Ein Produkt "Email Sorter Setup"
- 13 Fragen für den Fragebogen
**Wichtig:** Nach dem Bootstrap-Script wird die Database-ID in der Konsole ausgegeben. Kopieren Sie diese ID und fügen Sie sie in Ihre `.env` Datei als `APPWRITE_DATABASE_ID` ein.
4. **Stripe Webhook konfigurieren:**
Für lokale Entwicklung mit Stripe CLI:
### 5. Development Server starten
```bash
stripe listen --forward-to localhost:3000/stripe/webhook
# Terminal 1: Backend
cd server
npm run dev
# Terminal 2: Frontend
cd client
npm run dev
```
Kopieren Sie das angezeigte Webhook-Secret und fügen Sie es als `STRIPE_WEBHOOK_SECRET` in Ihre `.env` Datei ein.
Die App ist nun erreichbar unter:
- Frontend: http://localhost:5173
- Backend: http://localhost:3000
Für Produktion: Erstellen Sie einen Webhook in Ihrem Stripe Dashboard mit der URL `https://ihre-domain.com/stripe/webhook` und dem Event `checkout.session.completed`.
## Konfiguration
## Server starten
### Appwrite Setup
1. Erstelle ein Projekt auf [cloud.appwrite.io](https://cloud.appwrite.io)
2. Erstelle einen API Key mit allen Berechtigungen
3. Führe `npm run bootstrap:v2` aus, um die Datenbank zu erstellen
### Stripe Setup
1. Erstelle einen Account auf [stripe.com](https://stripe.com)
2. Erstelle Produkte und Preise für Basic, Pro, Business Pläne
3. Konfiguriere den Webhook für `/api/subscription/webhook`
### Google OAuth (Gmail)
1. Erstelle ein Projekt in der [Google Cloud Console](https://console.cloud.google.com)
2. Aktiviere die Gmail API
3. Erstelle OAuth 2.0 Credentials
4. Füge `http://localhost:3000/api/oauth/gmail/callback` als Redirect URI hinzu
### Microsoft OAuth (Outlook)
1. Registriere eine App in [Azure AD](https://portal.azure.com)
2. Füge Microsoft Graph Berechtigungen hinzu (Mail.Read, Mail.ReadWrite)
3. Füge `http://localhost:3000/api/oauth/outlook/callback` als Redirect URI hinzu
### Mistral AI API
1. Erstelle einen API Key auf [console.mistral.ai](https://console.mistral.ai)
2. Füge den Key als `MISTRAL_API_KEY` hinzu
## Features
### Landing Page
- Hero Section mit CTA
- Feature-Übersicht
- Pricing-Tabelle mit 3 Plänen
- Testimonials
- FAQ Sektion
### Authentifizierung
- E-Mail/Passwort Registration
- Login mit Session-Management
- Passwort-Reset (konfigurierbar)
### Dashboard
- E-Mail-Statistiken (sortiert heute/Woche/Monat)
- Kategorien-Verteilung
- Verbundene E-Mail-Konten
- Schnellzugriff-Aktionen
### E-Mail-Sortierung
- Automatische Kategorisierung mit KI
- Unterstützte Kategorien:
- VIP / Wichtig
- Kunden / Projekte
- Rechnungen / Belege
- Newsletter
- Werbung / Promotions
- Social Media
- Security / 2FA
- Versand / Bestellungen
### Subscription
- 14 Tage kostenlose Testphase
- 3 Pläne: Basic (9€), Pro (19€), Business (49€)
- Stripe Customer Portal
- Automatische Verlängerung
## API Dokumentation
### Authentifizierung
Die API nutzt Appwrite Sessions für Authentifizierung.
### Endpoints
#### E-Mail
- `GET /api/email/accounts` - Verbundene E-Mail-Konten abrufen
- `POST /api/email/connect` - Neues E-Mail-Konto verbinden
- `DELETE /api/email/accounts/:id` - E-Mail-Konto trennen
- `GET /api/email/stats` - Sortierstatistiken abrufen
- `POST /api/email/sort` - Manuelle Sortierung auslösen
#### OAuth
- `GET /api/oauth/gmail` - Gmail OAuth starten
- `GET /api/oauth/gmail/callback` - Gmail OAuth Callback
- `GET /api/oauth/outlook` - Outlook OAuth starten
- `GET /api/oauth/outlook/callback` - Outlook OAuth Callback
#### Subscription
- `POST /api/subscription/checkout` - Checkout Session erstellen
- `GET /api/subscription/status` - Subscription Status abrufen
- `POST /api/subscription/portal` - Customer Portal Session
## n8n Integration (Optional)
Für visuelle Automatisierung kann n8n verwendet werden:
1. Importiere den Workflow aus `n8n/workflows/email-sorter-workflow.json`
2. Konfiguriere Gmail OAuth und OpenAI Credentials
3. Aktiviere den Webhook-Trigger
Siehe `n8n/README.md` für Details.
## Deployment
### Frontend (Vercel/Netlify)
```bash
npm start
cd client
npm run build
# Deploye dist/ Ordner
```
Der Server läuft auf http://localhost:3000
### Backend (Railway/Render/Heroku)
## Verwendung
1. Setze alle Umgebungsvariablen
2. Deploy mit `npm start` als Start-Befehl
1. Öffnen Sie http://localhost:3000 in Ihrem Browser
2. Füllen Sie den mehrstufigen Fragebogen aus
3. Überprüfen Sie die Zusammenfassung
4. Klicken Sie auf "Jetzt kaufen" um zur Stripe-Bezahlung weitergeleitet zu werden
5. Verwenden Sie Stripe Test-Kreditkarte: `4242 4242 4242 4242`
### Stripe Webhook
## API Endpunkte
### GET /api/questions
Lädt alle aktiven Fragen für ein Produkt.
**Query Parameter:**
- `productSlug`: Produkt-Slug (z.B. "email-sorter")
**Response:**
```json
[
{
"$id": "...",
"key": "email",
"label": "Ihre E-Mail-Adresse",
"type": "email",
"required": true,
"step": 1,
"order": 1
}
]
Aktualisiere die Webhook-URL im Stripe Dashboard auf deine Produktions-URL:
```
### POST /api/submissions
Erstellt eine neue Submission mit Kundenantworten.
**Request Body:**
```json
{
"productSlug": "email-sorter",
"answers": {
"email": "kunde@example.com",
"name": "Max Mustermann"
}
}
https://your-domain.com/api/subscription/webhook
```
**Response:**
```json
{
"submissionId": "..."
}
```
### POST /api/checkout
Erstellt eine Stripe Checkout Session.
**Request Body:**
```json
{
"submissionId": "..."
}
```
**Response:**
```json
{
"url": "https://checkout.stripe.com/..."
}
```
### POST /stripe/webhook
Empfängt Stripe Webhook Events (nur für Stripe).
## Datenmodell
### Products Collection
- `slug`: Eindeutiger Produkt-Identifier
- `title`: Produktname
- `priceCents`: Preis in Cent
- `currency`: Währung (z.B. "eur")
- `isActive`: Produkt aktiv/inaktiv
### Questions Collection
- `productId`: Referenz zum Produkt
- `key`: Eindeutiger Schlüssel für die Antwort
- `label`: Anzeigetext
- `type`: Feldtyp (text, email, select, multiselect, textarea)
- `required`: Pflichtfeld ja/nein
- `step`: Schritt-Nummer im Formular
- `order`: Reihenfolge innerhalb des Schritts
- `optionsJson`: JSON-Array mit Auswahloptionen (für select/multiselect)
- `isActive`: Frage aktiv/inaktiv
### Submissions Collection
- `productId`: Referenz zum Produkt
- `status`: Status (draft, paid)
- `customerEmail`: Kunden-Email
- `customerName`: Kundenname
- `finalSummaryJson`: JSON mit allen Antworten
- `priceCents`: Preis in Cent
- `currency`: Währung
### Answers Collection
- `submissionId`: Referenz zur Submission
- `answersJson`: JSON mit allen Antworten
### Orders Collection
- `submissionId`: Referenz zur Submission
- `orderDataJson`: JSON mit Stripe Session Daten
## Troubleshooting
### Server startet nicht
- Überprüfen Sie, dass alle Umgebungsvariablen in `.env` gesetzt sind
- Stellen Sie sicher, dass Port 3000 nicht bereits verwendet wird
### Frontend startet nicht
- Prüfe, ob alle npm packages installiert sind
- Prüfe `.env` Datei im client Ordner
### Fragen werden nicht geladen
- Überprüfen Sie die Appwrite-Verbindung und API-Key
- Stellen Sie sicher, dass das Bootstrap-Script erfolgreich durchgelaufen ist
- Überprüfen Sie die Browser-Konsole auf Fehler
### Backend-Fehler
- Prüfe alle Umgebungsvariablen in `.env`
- Prüfe Appwrite Verbindung und API Key
### Stripe Checkout funktioniert nicht
- Überprüfen Sie, dass `STRIPE_SECRET_KEY` korrekt gesetzt ist
- Für lokale Tests: Stellen Sie sicher, dass Stripe CLI läuft
- Überprüfen Sie die Server-Logs auf Fehler
### OAuth funktioniert nicht
- Prüfe Redirect URIs in Google/Microsoft Console
- Prüfe Client ID und Secret
### Webhook wird nicht empfangen
- Für lokale Tests: Stellen Sie sicher, dass `stripe listen` läuft
- Überprüfen Sie, dass `STRIPE_WEBHOOK_SECRET` korrekt gesetzt ist
- Überprüfen Sie die Stripe Dashboard Webhook-Logs
### KI-Kategorisierung fehlerhaft
- Prüfe Mistral API Key
- Prüfe Rate Limits auf console.mistral.ai
## Lizenz