EmailSorter

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

git clone <repo-url>
cd emailsorter

2. Dependencies installieren

# Frontend
cd client
npm install

# Backend
cd ../server
npm install

3. Umgebungsvariablen konfigurieren

# 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

4. Appwrite Datenbank einrichten

cd server
npm run bootstrap:v2

5. Development Server starten

# Terminal 1: Backend
cd server
npm run dev

# Terminal 2: Frontend
cd client
npm run dev

Die App ist nun erreichbar unter:

• Frontend: http://localhost:5173
• Backend: http://localhost:3000

Konfiguration

Appwrite Setup

1. Erstelle ein Projekt auf 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
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
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
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
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)

cd client
npm run build
# Deploye dist/ Ordner

Backend (Railway/Render/Heroku)

1. Setze alle Umgebungsvariablen
2. Deploy mit npm start als Start-Befehl

Stripe Webhook

Aktualisiere die Webhook-URL im Stripe Dashboard auf deine Produktions-URL:

https://your-domain.com/api/subscription/webhook

Troubleshooting

Frontend startet nicht

• Prüfe, ob alle npm packages installiert sind
• Prüfe .env Datei im client Ordner

Backend-Fehler

• Prüfe alle Umgebungsvariablen in .env
• Prüfe Appwrite Verbindung und API Key

OAuth funktioniert nicht

• Prüfe Redirect URIs in Google/Microsoft Console
• Prüfe Client ID und Secret

KI-Kategorisierung fehlerhaft

• Prüfe Mistral API Key
• Prüfe Rate Limits auf console.mistral.ai

Lizenz

ISC