🏛️ Architektur

Wie das System von innen aufgebaut ist — einfach erklärt für alle ohne Programmierkenntnisse.

🏗️ Das Fundament — was einmal gebaut wird und dann immer da ist

Wie ein Haus braucht eine Web-App ein Fundament. Dieses wird einmal gebaut — danach "steht" jede neue App einfach darauf, ohne dass man das Fundament neu bauen muss.

🔐

Login & Nutzerverwaltung

Kunden melden sich mit Google an — kein Passwort merken. Das System erkennt automatisch wer du bist und welche Apps du gekauft hast.

Supabase Auth + Google OAuth
💳

Zahlung & Abos

Kunden zahlen sicher über Stripe. Nach dem Kauf wird die App sofort freigeschaltet — vollautomatisch, ohne dass jemand manuell eingreift.

Stripe Checkout + Webhooks
🗄️

Datenbank

Speichert welcher Nutzer existiert, welche Apps er gekauft hat und alle Eingaben innerhalb der Apps. Mit Zugriffsschutz: jeder sieht nur seine eigenen Daten.

Supabase PostgreSQL + RLS
🤖

KI-Anbindung

Jede App kann die KI ansprechen. Nutzer gibt etwas ein → die KI antwortet. Die KI läuft nie im Browser des Nutzers, sondern sicher auf dem Server.

Anthropic Claude Haiku API
🌐

Hosting

Die Seite liegt auf Cloudflare — weltweit verteilt, extrem schnell. Kein eigener Server nötig. Kostenlos bis zu einer gewissen Größe.

Cloudflare Pages
🎨

Oberfläche

Das Aussehen der Seite. Tailwind macht es einfach konsistentes Design umzusetzen. Fertige Komponenten (shadcn/ui) sparen Zeit.

Next.js 14 + Tailwind CSS

🔄 Was passiert wenn ein Kunde eine App kauft?

1

Kunde klickt "Kaufen"

Auf der simplymindo-Seite wählt er einen Plan und klickt auf den Kauf-Button.

↓
2

Stripe-Checkout öffnet sich

Sicheres Zahlungsformular von Stripe — wir sehen die Kreditkartendaten nie. Stripe kümmert sich um alles.

↓
3

Zahlung bestätigt → Webhook

Stripe schickt uns eine automatische Nachricht: "Zahlung erfolgreich". Dieser Webhook löst alles weitere aus.

↓
4

App wird freigeschaltet

Unser Server trägt in die Datenbank ein: Nutzer X hat App Y ab sofort. Vollautomatisch, sofort.

↓
5

Kunde kommt zurück und nutzt die App

Nach dem Kauf sieht er die App in seinem Dashboard und kann sie sofort nutzen.

📁 Wie ist der Code strukturiert?

Für alle die es genau wissen wollen — so ist das simplymindo-Projekt aufgebaut:

Ordner/DateiWas es macht
src/app/page.tsxDie Startseite mit dem Marktplatz
src/app/login/Login-Seite (Google OAuth)
src/app/dashboard/Dashboard nach dem Login (freigeschaltete Apps)
src/app/app/[id]/Die eigentliche App-Seite (dynamisch nach App-ID)
src/app/api/stripe/Server-Code für Zahlung und Webhooks
src/app/api/ai/Server-Code für KI-Anfragen
src/lib/apps/index.tsKonfiguration aller Apps (Name, Icon, Preis, Prompt)
src/components/apps/Wiederverwendbare UI-Bausteine für Apps
src/lib/supabase/Verbindung zur Datenbank
.env.localGeheime Schlüssel (nie öffentlich!)

🔒 Sicherheit

Kreditkartendaten

Wir sehen sie nie. Stripe verarbeitet alles — wir bekommen nur ein "OK" oder "nicht OK".

Nutzerdaten

Row Level Security (RLS): Die Datenbank erlaubt es einem Nutzer nur seine eigenen Daten zu lesen. Technisch unmöglich auf fremde Daten zuzugreifen.

API-Keys

Alle geheimen Schlüssel (Stripe, Supabase, Anthropic) liegen in .env.local — diese Datei verlässt nie den Server und ist nicht im Code.

KI-Anfragen

Die KI wird nur serverseitig angesprochen — nie direkt aus dem Browser. So kann niemand unseren API-Key stehlen.