Technik

Was hinter den Produkten steckt

Hier steht nur Technik, die tatsächlich im Einsatz ist. Wer es genauer wissen will, kann jeden Bereich aufklappen.

Die kurze Übersicht reicht zum Überfliegen.

01 · 3 Bereiche

Was Menschen sehen

Website, App und öffentliche Seiten.

Website und Web-App

React 19 und Vite für Website, Community, Blog und Admin.

React 19
Vite
React Router
TipTap
Leaflet

Mehr dazu

So ist es gebaut: Öffentliche Seiten und der eingeloggte Bereich laufen in einer React-Anwendung. Inhalte, die gefunden werden sollen, werden schon beim Build als HTML erzeugt.
So arbeitet es zusammen: Website und App verwenden dieselben Texte und Produktdaten.
Mein Anteil: Ich lege Aufbau und Nutzerwege fest und prüfe sie im Browser.

Mobile App

React Native und Expo für die Android-App im Play Store.

React Native
Expo
Play Billing
Google Sign-In

Mehr dazu

So ist es gebaut: Die App nutzt dieselbe API wie die Website. Änderungen an der Oberfläche können unabhängig von einem neuen Store-Paket veröffentlicht werden.
So arbeitet es zusammen: Web und App greifen auf dieselben Konten, Inhalte und Angebote zu.
Mein Anteil: Ich entscheide, was in die App gehört, und teste die veröffentlichten Nutzerwege.

Auffindbarkeit

HTML, Sitemap und strukturierte Daten für Google und KI-Suchen.

Prerendering
Sitemap
hreflang
JSON-LD
IndexNow

Mehr dazu

So ist es gebaut: Öffentliche Seiten werden als vollständiges HTML ausgeliefert. Deutsche und englische Seiten haben eigene URLs und verweisen aufeinander.
So arbeitet es zusammen: Technik, Inhalt und Seitenstruktur werden gemeinsam veröffentlicht.
Mein Anteil: Ich entscheide, welche Seiten öffentlich sein sollen, und prüfe ihre Darstellung in der Suche.

02 · 5 Bereiche

Was im Hintergrund arbeitet

API, Daten, Chat und angebundene Dienste.

API und Geschäftslogik

TypeScript, Hono und Cloudflare Workers als gemeinsames Backend.

TypeScript
Hono
Cloudflare Workers
Webhooks

Mehr dazu

So ist es gebaut: Website und App sprechen mit einer zentralen API. Dort liegen Anmeldung, Profile, Gruppen, Moderation, Zahlungen und angebundene Dienste.
So arbeitet es zusammen: Eine API versorgt Website, App und die angebundenen Produkte.
Mein Anteil: Ich beschreibe die Regeln und Abläufe, die das Backend umsetzen muss.

Hosting und Dateien

Cloudflare für Website, API, Bilder und Dateispeicher.

Cloudflare Pages
Cloudflare Workers
Cloudflare R2
Cloudflare Images

Mehr dazu

So ist es gebaut: Pages liefert die Website aus, Workers betreibt die API. Bilder und größere Dateien liegen getrennt vom Anwendungscode.
So arbeitet es zusammen: Website, API und Dateien können unabhängig voneinander aktualisiert werden.
Mein Anteil: Ich entscheide, wo Inhalte liegen und welcher Teil getrennt veröffentlicht wird.

Daten und Speicher

Cloudflare D1 für strukturierte Daten, R2 und Images für Dateien.

Cloudflare D1
SQLite
Cloudflare R2
Cloudflare Images

Mehr dazu

So ist es gebaut: Konten, Profile, Gruppen und Produktdaten liegen in relationalen Datenbanken. Fotos und Downloads werden als Dateien gespeichert.
So arbeitet es zusammen: Die API verbindet Datensätze mit den zugehörigen Bildern und Dateien.
Mein Anteil: Ich lege fest, welche Daten ein Produkt braucht und welche Produkte getrennt bleiben.

Chat und Sprache

Durable Objects für Nachrichten, LiveKit für Sprachkanäle.

Durable Objects
WebSockets
LiveKit
Push

Mehr dazu

So ist es gebaut: Chaträume und Direktnachrichten werden in Echtzeit zugestellt. Sprachkanäle verbinden Web und App über LiveKit.
So arbeitet es zusammen: Chat, Direktnachrichten, Sprache und Benachrichtigungen bilden einen gemeinsamen Kommunikationsbereich.
Mein Anteil: Ich definiere die Nutzerwege und die Trennung zwischen Räumen, Nachrichten und Benachrichtigungen.

Angebundene Dienste

Veranstaltungen, E-Mail, Support und Zahlungen über APIs und Webhooks.

DarkIndex
Resend
PulseDesk
Mollie · PayPal · Play

Mehr dazu

So ist es gebaut: Die API tauscht Daten mit externen und eigenen Diensten aus. Die Website zeigt nur die Ergebnisse dieser Verbindungen.
So arbeitet es zusammen: Die API ist der gemeinsame Zugang zu allen angebundenen Diensten.
Mein Anteil: Ich entscheide, welche Verbindung einen echten Arbeitsweg verbessert.

03 · 2 Bereiche

Anmelden und bezahlen

Konten, Schutz und Zahlungen.

Anmeldung und Schutz

Sitzungen, Google OAuth, Bot-Schutz und moderierte Uploads.

Sessions
Google OAuth
Cloudflare Turnstile
Rollen und Rechte
Foto-Prüfung

Mehr dazu

So ist es gebaut: Anmeldung und Rechte werden zentral von der API geprüft. Öffentliche Registrierung, interne Werkzeuge und hochgeladene Inhalte haben getrennte Schutzstufen.
So arbeitet es zusammen: Die API entscheidet, welche Daten und Funktionen ein Konto verwenden darf.
Mein Anteil: Ich definiere Rollen, Freigaben und Moderationswege; Spezialprüfungen gehören zu Fachrollen.

Zahlungen

Mollie und PayPal im Web, Play Billing in der Android-App.

Mollie
PayPal
Play Billing
Webhooks

Mehr dazu

So ist es gebaut: Ein gemeinsamer Produktkatalog hält Angebote und Bezeichnungen über Website und App hinweg zusammen.
So arbeitet es zusammen: Produktseite, Kasse und Kontostatus greifen auf denselben Katalog zurück.
Mein Anteil: Ich lege Angebote und Nutzertexte fest und prüfe den vollständigen Kaufweg.

04 · 4 Bereiche

Bauen und am Laufen halten

Umsetzung, Tests, Veröffentlichungen und tägliche Aufgaben.

Entwicklung mit KI

Cursor für die Umsetzung, klare Anforderungen und Prüfung im Produkt.

Cursor
Anforderungen
Code-Repository
Abnahme

Mehr dazu

So ist es gebaut: Ich beschreibe Ziel, Regeln und Grenzen. Die KI setzt den Code um; anschließend prüfe ich das Ergebnis im Browser und in der App.
So arbeitet es zusammen: Anforderung, Umsetzung und Prüfung bleiben ein durchgängiger Arbeitsablauf.
Mein Anteil: Ich trage die Produktverantwortung und entscheide, was veröffentlicht wird.

Automatisierung

Zeitgesteuerte Aufgaben für Benachrichtigungen, Inhalte und Verwaltung.

Scheduled Workers
Benachrichtigungen
Datenpflege
Abgleiche

Mehr dazu

So ist es gebaut: Wiederkehrende Arbeiten laufen als Hintergrundaufgaben statt als tägliche Handarbeit.
So arbeitet es zusammen: Hintergrundaufgaben verwenden dieselbe API und dieselben Produktregeln wie Website und App.
Mein Anteil: Ich erkenne wiederkehrende Arbeit und entscheide, was sinnvoll automatisiert wird.

Tests und Abnahme

Vitest, SQLite-Integrationstests und manuelle Prüfung der Nutzerwege.

Vitest
SQLite-Tests
TypeScript
Browser und Emulator

Mehr dazu

So ist es gebaut: Automatische Tests decken wichtige Regeln der API ab. Oberfläche und App prüfe ich zusätzlich aus Sicht der Nutzenden.
So arbeitet es zusammen: Automatische Tests und sichtbare Abnahme ergänzen einander.
Mein Anteil: Ich priorisiere kritische Wege und prüfe, ob das Ergebnis für Nutzende funktioniert.

Veröffentlichung

Cloudflare für Web und API, Expo für App-Updates.

Vite Build
Wrangler
Expo Updates
Play Store

Mehr dazu

So ist es gebaut: Website, API und App werden getrennt gebaut und veröffentlicht. Dadurch kann ein Bereich aktualisiert werden, ohne die anderen neu auszuliefern.
So arbeitet es zusammen: Jeder Ausspielweg hat einen eigenen Build und eine passende Prüfung.
Mein Anteil: Ich gebe Releases frei und prüfe anschließend den sichtbaren Stand.

Der Überblick

So hängt alles zusammen.

DarkSwipe ist das zentrale Produkt. Website und App gehören zusammen und greifen auf dieselben Konten und Inhalte zu. Zahlungen, Veranstaltungen, Support und Schattenplan sind daran angebunden.

Browseröffentliche und eingeloggte Seiten
WebsiteReact + Vite
Mobile AppExpo + React Native
PagesHTML und Dateien
DarkSwipeWebsite · App · API
Play StoreAndroid
DarkIndexVeranstaltungen
ZahlungenMollie · PayPal · Play
DatenD1 · R2 · Images
Support & MailPulseDesk · Resend
Schattenplaneigenes Produkt

Verbindungen

BrowserPagesÖffentliche Seiten kommen als HTML
WebsiteDarkSwipeDie Website gehört zum zentralen Produkt
Mobile AppDarkSwipeDie mobile App gehört zum zentralen Produkt
Mobile AppPlay StoreAndroid-Versionen erscheinen im Play Store
DarkSwipeDatenKonten, Inhalte, Fotos und Chat
DarkSwipeZahlungenZahlungen und Abonnements
DarkSwipeDarkIndexVeranstaltungen
DarkSwipeSupport & MailSupport, Moderation und E-Mail
DarkSwipeSchattenplanGemeinsame API, getrennte Produktdaten