TanStarter
TanStarter · Coding
TanStarter ist ein Full-Stack-SaaS-Boilerplate auf Basis von TanStack Start und Cloudflare Workers. Dieses TanStack-Start-Boilerplate bringt Authentifizierung, Stripe-Abrechnung, eine Datenbankschicht, Dateispeicher, einen Blog, transaktionale E-Mails und KI-Hooks bereits miteinander verdrahtet mit. Es dient als Full-Stack-React-Starter für alle, die den langweiligen Teil erledigt haben wollen. Statt Wochen damit zu verbringen, Bibliotheken zu einer lauffähigen App zusammenzukleben, klonen Sie ein Repository, setzen Ihre Umgebungsvariablen und beginnen zu bauen. Es deckt auch die Anforderungen eines Stripe-Abrechnungs-Starters ab, sodass Zahlungen kein Weg sind, den Sie allein planen müssen. Es richtet sich an Solo-Entwickler und kleine Teams. Das Ganze läuft im Edge-Netz von Cloudflare. Die Latenz bleibt niedrig und die Hosting-Kosten bleiben planbar.
Über TanStarter
Was ist TanStarter
TanStarter ist ein produktionsorientiertes Boilerplate für Full-Stack-React-Anwendungen. Es bündelt TanStack Start für Routing und Serverfunktionen, Cloudflare Workers für Rechenleistung, D1 für die relationale Datenbank, R2 für Objektspeicher und Stripe für Zahlungen. Das Projekt unterstützt außerdem Creem und Waffo als alternative Zahlungsanbieter über eine gemeinsame Provider-Schnittstelle.
Das Versprechen ist einfach: Jedes SaaS braucht dieselben Grundlagen. Sie von Grund auf neu zu bauen, ist verschwendete Mühe. TanStarter liefert diese Grundlagen als editierbaren Code, der Ihnen gehört, nicht als Blackbox-Dienst, den Sie mieten. Die Zahlungen decken Abonnements, einmalige Lifetime-Käufe und kostenlose Testphasen ab. Warum also nicht von einer funktionierenden Basis starten? Nutzer verwalten ihre Abrechnung über das Stripe-Kundenportal. Die Module für E-Mail, Newsletter und Benachrichtigungen folgen demselben Provider-Muster, sodass ein Anbieterwechsel bedeutet, eine Schnittstelle zu implementieren, statt die App neu zu schreiben.
Erste Schritte
- Installieren Sie Git, Node.js 18+ und pnpm auf Ihrem Rechner.
- Klonen Sie das Repository und kopieren Sie
.env.examplenach.env. - Führen Sie
pnpm installaus, um die Abhängigkeiten zu holen, dannpnpm dev, um den lokalen Server unterhttp://localhost:3000zu starten. - Legen Sie Ihren Projektnamen, Ihre eigene Domain und die D1/R2-Bindings in
wrangler.jsoncfest. - Laden Sie die Secrets mit
pnpm wrangler secret bulk .env.productionhoch und deployen Sie mitpnpm run deploy.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von TanStarter.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Solo-Gründer, die ein bezahltes Produkt ohne Backend-Team bauen
- Kleine Engineering-Teams, die wiederholte Einrichtungsarbeit überspringen wollen
- React-Entwickler, die von Next.js zu TanStack Start wechseln
- Indie-Hacker, die mehrere kleine SaaS-Projekte ausliefern
Aufgaben
- Eine Web-App mit Abo oder Einmalzahlung starten
- Authentifizierung, Abrechnung und Datei-Uploads zu einer bestehenden Idee hinzufügen
- Eine KI-Funktion auf Cloudflare Workers AI oder Fal.ai prototypisieren
- Einen Inhaltsblog neben einer App aufsetzen
Szenarien
- Eine SaaS-Idee an einem Wochenende validieren, ohne Infrastruktur zu verdrahten
- Ein Nebenprojekt von einem schwereren Framework auf einen schlankeren Stack migrieren
- Ein internes Tool bauen, das Logins und Zahlungen braucht
- Den kostenlosen Tarif von Cloudflare testen, bevor Sie sich auf bezahltes Hosting festlegen
Wichtigste Funktionen
TanStack-Start-Basis
Das Template läuft auf TanStack Start. Es übernimmt dateibasiertes Routing, Serverfunktionen und das Laden von Daten in einem Framework. Server-Routen und Client-Routen liegen zusammen, sodass Sie nicht zwei Denkmodelle jonglieren müssen. Wenn Sie React und TypeScript schon kennen, ist die Lernkurve kurz.
Hosting auf Cloudflare Workers
Alles wird im Edge-Netz von Cloudflare deployt. Die Workers laufen nah an Ihren Nutzern, und der kostenlose Tarif erlaubt unkomprimierte Worker-Bundles bis 64 MiB, was für eine typische App mehr als genug Spielraum ist. D1 deckt relationale Daten ab und R2 den Dateispeicher, beide mit Bindings, die in wrangler.jsonc deklariert werden. Diese Kombination sorgt dafür, dass Sie nie einen separaten Datenbankserver oder Objektspeicher bereitstellen müssen, nur um eine erste Version online zu bringen.
Zahlungen mit mehreren Anbietern
Stripe ist der Standard, aber das Zahlungsmodul liegt hinter einer Provider-Schnittstelle, sodass auch Creem und Waffo funktionieren. Sie bekommen monatliche und jährliche Abos, einmalige Lifetime-Zahlungen und kostenlose Testphasen. Die Abrechnungsverwaltung läuft über das Stripe-Kundenportal, und WeChat Pay und Alipay stehen zur Verfügung, wenn Sie sie in den Stripe-Einstellungen aktivieren.
Integrierte KI-Hooks
Cloudflare Workers AI und Fal.ai treiben die KI-Funktionen an, die ab Werk mitgeliefert werden. Sie fügen Zusammenfassung, Generierung oder ähnliche Funktionen hinzu, ohne ein weiteres Anbieterkonto anzulegen. Die KI-Schicht ist optional, sodass Sie sie abschalten können, wenn Ihr Produkt sie nicht braucht.
Authentifizierung, E-Mail und Benachrichtigungen
Benutzerkonten und Sitzungen sind vorkonfiguriert. Die Module für E-Mail, Newsletter und Benachrichtigungen teilen dasselbe Provider-Muster wie die Zahlungen, sodass Sie eine einheitliche Art behalten, Dienste zu wechseln. Transaktionale E-Mails für Anmeldungen, Belege und Passwort-Zurücksetzungen funktionieren vom ersten Tag an.
Blog und Inhaltssystem
Legen Sie eine Markdown-Datei in content/blog/ ab, mit Frontmatter für Titel, Beschreibung, Datum, Kategorie und Bild, und sie erscheint automatisch auf der Blog-Seite. Das gibt Ihnen einen Inhaltskanal für SEO, ohne ein separates CMS anzubauen.
Analytics-Integrationen
Google Analytics, Umami, Plausible und Microsoft Clarity werden unterstützt, und Sie können jede Kombination laufen lassen. Setzen Sie die Umgebungsvariablen und sie schalten sich in der Produktion ein. Kein eigener Tracking-Code nötig.
Template-Aktualisierungen
Sie holen Verbesserungen aus dem Ursprungsprojekt, indem Sie das Template-Repository als Git-Remote hinzufügen, fetchen und mergen. Nach dem Auflösen der Konflikte führen Sie pnpm install aus, wenden neue Migrationen an und testen. Ihre Kopie aktuell zu halten, bleibt ein routinemäßiger Merge und wird kein Migrationsprojekt.
Vor- und Nachteile
Vorteile
- Liefert Authentifizierung, Abrechnung, Speicher und E-Mail bereits verbunden, sodass Sie mit Produktcode starten
- Läuft am Edge von Cloudflare, was die Hosting-Kosten niedrig und planbar hält
- Die Module für Zahlungen, E-Mail und Benachrichtigungen lassen sich über eine einzige Provider-Schnittstelle tauschen
- Der Code gehört Ihnen, es gibt also keine Anbieterbindung an die App selbst
- Der kostenlose Tarif von Cloudflare reicht aus, um eine echte App zu deployen
Nachteile
- Kein eingebautes i18n; Sie bekommen Englisch und Chinesisch über ein Build-Zeit-Nachrichtenmodul und verdrahten den Rest selbst
- An den Stack von TanStack Start und Cloudflare gebunden, was nicht zu Teams auf Next.js oder AWS passt
- Erfordert Sicherheit mit TypeScript, Git und Deploy-Schritten auf der Kommandozeile
- Sie zahlen einmal für das Template, zusätzlich zu den Hosting- und Zahlungsgebühren, die Ihre App verursacht
Häufige Fragen
Git, Node.js 18 oder neuer und pnpm. Klonen Sie das Repository, kopieren Sie .env.example nach .env, führen Sie pnpm install aus, dann pnpm dev. Die App startet unter http://localhost:3000.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu TanStarter.
Alternativen zu TanStarter
Forefront
Forefront · CodingForefront ist eine Webplattform zum Bauen mit Open-Source-KI. Sie lassen sich führende Open-Source-Sprachmodelle mit eigenen Daten feintunen, ihre Leistung bewerten und sie über eine API ausführen oder exportieren, um sie selbst zu hosten. Entwickler, die den Komfort einer geschlossenen Plattform wollen, aber darauf bestehen, ihre Modelle und Daten zu besitzen, sind hier die Zielgruppe.
Startkit
StartKit.AI · CodingStartkit ist ein Boilerplate zum Bauen von KI-SaaS-Produkten und KI-Wrappern. Man kann es sich als KI-Startup-Boilerplate vorstellen, bei dem die langweiligen Teile schon verdrahtet sind: Authentifizierung, Zahlungen über Stripe und Lemon Squeezy, Nutzungslimits, transaktionale E-Mail und ein KI-API-Starter-Kit, das mit OpenAI, Anthropic, Groq oder Llama spricht. Man klont das Repository, setzt seinen Preis und kümmert sich um den Teil des Produkts, für den Menschen wirklich bezahlen. Es basiert auf Next.js über React und Tailwind, deshalb fühlt sich ein Großteil des Boilerplate-Codes schon vertraut an.
Testim
Tricentis · CodingTestim ist eine KI-gestützte Plattform für Testautomatisierung, mit der man End-to-End-Tests für Web-, Mobile- und Salesforce-Anwendungen baut und ausführt. Sie setzt auf maschinelles Lernen, um Tests stabil zu halten, wenn sich eine Oberfläche ändert, sodass Teams weniger Zeit mit der Reparatur kaputter Selektoren verbringen. Nicht schlecht für ein Tool für automatisierte Tests, das Sie heute schon nutzen können. Sie erstellen Tests, indem Sie Aktionen im Browser aufzeichnen, und fügen danach JavaScript hinzu, wenn Sie mehr Kontrolle brauchen. Für ein beschäftigtes QA-Team eine solide Wahl.