Ein Worker. Alle Clients.

Ein Full-Stack-Starter für Web und Mobile. TanStack Start, Expo und eine typisierte API auf Cloudflare.

Phase zum Prüfen wählen

Zwei Eingabefächer, ein Schlitten. Web und Mobile nutzen dieselbe Sitzungsprüfung, denselben Router und Datenpfad. Illustration, kein Live-Traffic.

Läuft schon.

Die Aufgaben-App mit fünf Beispielaufgaben, Prioritäten und Status. — Todo-Beispiel

Der R2-Dateimanager mit Uploads, Bibliothek und Papierkorb. — Dateien

Sicherheitseinstellungen für Passwörter, Passkeys und Zwei-Faktor-Authentifizierung. — Authentifizierung

Die Integrationsseite für verbundene Agenten, Webhooks und Agentenaktivität. — MCP-Server

Aufgaben, Dateien, Sicherheit und Agenten. Echte Ansichten des Templates mit Beispieldaten.

Die fertigen Teile.

Behalte, was dein Produkt braucht. Alle Integrationen sind enthalten; optionale Dienste bleiben bis zur Konfiguration aus.

Produkt

AuthentifizierungFertig

E-Mail und Passwort, Passkeys, Zwei-Faktor-Codes, E-Mail-Bestätigung und Sitzungsverwaltung.

OrganisationenFertig

Mitglieder, Einladungen und Rollen. Todos und Dateien gehören zur aktiven Organisation.

DateienFertig

Multipart-Uploads zu R2, Vorschauen, Freigabelinks und ein Papierkorb.

AdminFertig

Benutzerverwaltung, Impersonation, Feature-Flags und ein Audit-Log.

Todo-BeispielFertig

Tabelle, Board und Kalender, mit Import-Queues mit Leases und Entwürfen von KI-Agenten.

ZahlungenStandardmäßig aus

Stripe und Polar im Web, RevenueCat auf Mobile. Aus, bis Anbieter und Billing-Flags konfiguriert sind.

Plattform

DatenbankFertig

Drizzle auf Neon Postgres, erreichbar über Hyperdrive.

E-MailFertig

Transaktionale E-Mails über Cloudflare Email, in der Entwicklung in der Konsole ausgegeben.

i18n und SEOFertig

Englisch, Deutsch und Französisch, hreflang, Sitemap und mit Takumi erzeugte OG-Bilder.

Assistent in der AppStandardmäßig aus

Streaming-Chat mit TanStack AI und gemeinsamen MCP-Tools. Aus, bis ein Anbieter konfiguriert und die Assistenten-Flag aktiviert ist.

Geplante JobsFertig

Effect an den Rändern: Cron-Jobs und ausgehende Zustellung, mit Postgres-Leases für Warteschlangen.

Cookie-EinwilligungFertig

Ein Consent-Banner, das Analyse- und Marketing-Skripte zurückhält.

Mobile

Expo-AppFertig

iOS und Android mit demselben API-Client, derselben Sitzung und Passkeys.

Push-BenachrichtigungenIn Arbeit

Expo-Push-Registrierung und eine Zustell-Queue. Aus, bis Zugangsdaten gesetzt sind.

Homescreen-WidgetsStandardmäßig aus

Todo-Widgets für iOS und Android hinter einer nativen Build-Option.

WerbungStandardmäßig aus

AdMob-Helfer als eigenständige Bibliothek, von der App nicht importiert.

Der Stack

Ein TypeScript-Monorepo. Jedes Package hat eine Aufgabe und eine aufgezählte öffentliche Schnittstelle.

Der eine Worker
Clients
Verwaltete Dienste
Tooling, nicht zur Laufzeit

Jede Anfrage beider Clients nimmt denselben Weg. Nur der Worker spricht mit Datenbank und Bucket.

Ein gemeinsamer Vertrag.

Browser und Expo nutzen denselben oRPC-Router. Der Worker prüft die Sitzung vor dem Zugriff auf Postgres oder R2.

apps/web/src/routes/index.tsx

1import { useQuery } from "@tanstack/react-query";2import { orpc } from "@/utils/orpc";34const { data: apiOk, isLoading: apiLoading } =5  useQuery(orpc.healthCheck.queryOptions());

Auszug aus der Landing-Route. Der generierte Client hält die Abfrage typisiert.

Sitzung zuerst: Geschützte Prozeduren lehnen fehlende Sitzungen mit 401 ab, bevor sie auf Daten zugreifen.
Typen über die Grenze: Clients importieren Router-Typen und Leaf-Verträge. Die Serverimplementierung bleibt im Worker.

Server bleibt Server.

Teile Verträge mit den Clients. Drei unabhängige Prüfungen schützen Datenbankverbindungen, Secrets und Servercode.

oxlint: Wert-Importe von Server-Modulen lassen den Lint in apps/web, apps/mobile und packages/ui scheitern. Typ-Importe sind erlaubt.
Explizite Exports: Jedes Package listet seine öffentlichen Einstiegspunkte. Keine Wildcards, also ist ein neuer Import zwischen Packages eine bewusste Änderung.
Scan des Client-Bundles: Der Web-Build liest die Client-Assets und schlägt bei Strings fehl, die nur im Server-Code existieren.

Eine Vorschau pro PR.

Jeder Pull Request erhält einen Preview-Worker und einen Neon-Branch. Prüfe die echte URL vor dem Merge.

Pull Request öffnen
Worker + Neon-Branch
Schließen und aufräumen

.github/workflows/pr-preview.yml

Ein Merge geht in Produktion: Ein Push auf main startet den separaten Produktions-Workflow mit Produktions-Secrets und -Datenbank.
Aufräumen ist exakt: Es prüft Projekt, Pull Request und Eltern-Branch, löscht zuerst den Worker und akzeptiert bereits entfernte Ressourcen.

Ein Werkzeugkatalog.

TanStack AI und der MCP-Server nutzen dieselben autorisierten Werkzeuge. Coding-Agenten erhalten Repo-Regeln und Architekturentscheidungen.

Was der Agent zuerst liest

AGENTS.md: Regeln, die jeder Coding-Agent zuerst liest: die Client-Server-Grenze, Effect auf dem Server, i18n.
docs/adr: Architekturentscheidungen mit Kontext, damit ein Agent sie nicht rückgängig macht.
.agents/skills: Setup, Start, Deployment und Browser-Checks als Schritt-für-Schritt-Skills.
/api/mcp: Agenten lesen deine Daten und schlagen per OAuth Entwürfe vor. Entwürfe warten, bis du sie übernimmst.
/llms.txt: Öffentliches Markdown unter /index.md und ein /llms.txt-Verzeichnis, das Agenten vor dem Verbinden lesen können.

Ein Einstieg für deinen Coding-Agenten

Lies AGENTS.md und CONTEXT.md. Konfiguriere das Projekt mit dem Skill setup-envs und behalte vorhandene Zugangsdaten bei. Führe dann pnpm install, pnpm setup und pnpm run dev aus. Prüfe die App mit dem Skill agent-browser.

Tool-Aufrufe über MCP

todo_listAbgeschlossen5 Ergebnisse

todo_createFreigabe erforderlichWartet auf deine FreigabeFreigebenAblehnen

Claude Code verbinden

claude mcp add --transport http my-app https://your-domain.example/api/mcp

In ChatGPT oder claude.ai fügst du dieselbe /api/mcp-URL als eigenen Connector hinzu.

Mach es zu deinem.

Klone deine Kopie des Repositorys. Installiere, konfiguriere und starte Web und Mobile gemeinsam.

Node.js 22+ und pnpm. Setup fragt nach Projekt- und Dienstkonfiguration.

Dokumentation lesen

Klonen
git clone <your-repo-url> my-app
Starte mit deiner Kopie des Template-Repositorys.
Installieren
pnpm install
Installiert jeden Workspace im Monorepo.
Konfigurieren
pnpm setup
Benennt das Projekt und schreibt Env-Dateien, Wrangler, Datenbank, E-Mail und Speicher.
Starten
pnpm run dev
Web auf localhost:3005, dazu der Expo-Dev-Server für Mobile.

Vor dem Klonen.

Was kann ich in der Demo ausprobieren?

Leg ein Konto an und nutze die echte App: Todos, Dateien, Organisationen, Passkeys, Zwei-Faktor und Einstellungen. Sie läuft auf demselben Worker wie diese Seite.

Warum Cloudflare Workers?

Ein Deployment liefert Seiten, API, Auth und geplante Jobs. Jeder Pull Request bekommt seinen eigenen Worker, das Review findet also auf einer echten URL statt.

Warum Neon Postgres statt D1?

Auth, Organisationen und die Job-Queues brauchen Transaktionen und Locks von Postgres. Hyperdrive bündelt die Verbindung, und jeder Pull Request bekommt seinen eigenen Neon-Branch.

Kann ich Mobile, Zahlungen oder Werbung entfernen?

Ja. optional-features.json listet jedes optionale Package mit seinen Einstiegspunkten, und docs/optional-features.md beschreibt, wie du sie entfernst.

Wie passe ich das Branding an?

Farben, Radius und Schriften stehen in einer Token-Datei. Namen und Texte stehen in den Locale-Dateien. Die Screens nutzen nur Tokens, also ändert ein Palettenwechsel jede Seite.

Muss ich Effect kennen?

Nur um Server-Jobs zu ändern. Effect koordiniert die Ausführung im Worker; Verträge nutzen Zod, Requests oRPC, Auth Better Auth und Abfragen Drizzle.

Wie verbinde ich einen KI-Agenten?

Richte einen beliebigen MCP-Client auf /api/mcp. Du gibst den Zugriff per OAuth frei, Lesen und Schreiben sind getrennte Scopes, und Schreiben erzeugt nur Entwürfe, die du in der App bestätigst.

Enthält das Template einen KI-Assistenten?

Ja. Der Assistent und MCP nutzen denselben Tool-Katalog, beschränkt auf deine Organisation. Änderungen brauchen eine Freigabe. Konfiguriere Anthropic, OpenAI oder Gemini und aktiviere die Assistenten-Flag, um den Chat anzuzeigen. Er ist standardmäßig aus.