Tech Stack für die Vibe-Codierung moderner Anwendungen

Bild vom Autor

Früher habe ich Vibe-Coding gehasst. Ich glaubte, ich könnte besseren Code schreiben, sauberere Systeme entwerfen und selbst durchdachtere Architekturentscheidungen treffen. Das dürfte lange Zeit so gewesen sein. Im Laufe der Zeit änderten sich die Dinge. KI-Agenten haben sich deutlich verbessert. MCP-Server, Claude-Fähigkeiten, Agenten-Workflows, Planungs-First-Execution und Codierungstools mit langem Horizont machten die Vibe-Codierung von einer Spielerei zu einer praktischen Möglichkeit, echte Systeme aufzubauen.

Irgendwann habe ich nachgegeben. Seitdem verwende ich Claude Code und OpenCode, um Systeme zu erstellen, die ich normalerweise für zu komplex für eine schnelle Iteration halten würde. Dazu gehören Zahlungsplattformen, Stablecoin-Wallets, Buchleseanwendungen und produktionsbereite Full-Stack-Websysteme. Was mich überraschte, struggle nicht nur die Geschwindigkeit, sondern auch die Konsistenz der Ergebnisse, sobald die richtige Struktur und die richtigen Instruments vorhanden waren.

Das eigentliche Drawback, mit dem die meisten Menschen bei der Vibe-Codierung konfrontiert sind, besteht nicht darin, Code zu schreiben.

Es kommt auf die Wahl des richtigen Tech-Stacks an.

Frontend, Backend, Authentifizierung, Datenbanken, Speicher, E-Mail, Zahlungen und Bereitstellung bieten unzählige Optionen. Ohne einen klaren Stack fällt es selbst starken KI-Programmierern schwer, gute Entscheidungen zu treffen. Wenn einem Agenten ein klar definierter und fundierter Technologie-Stack zur Verfügung gestellt wird, kann er zuverlässig und mit weitaus weniger Reibungsverlusten eine Finish-to-Finish-Anwendung erstellen.

Darauf konzentriert sich dieser Artikel.

Ich werde meinen bevorzugten Tech-Stack für die Vibe-Codierung moderner Anwendungen durchgehen. Das ist der Stack, den ich wiederverwende, weil er funktioniert. Wir besprechen, wie die Teile zusammenpassen, wofür jedes Werkzeug verantwortlich ist und wie man von Null zu einem produktionsbereiten System gelangt. Außerdem werde ich eine Claude-Code-Beispielaufforderung und optionale Instruments vorstellen, die dabei helfen, einen funktionierenden Prototyp in ein produktionsreifes System umzuwandeln.

# Mein Tech-Stack und warum dieser Stack funktioniert

In diesem Abschnitt werde ich den genauen Tech-Stack, den ich für die Vibe-Codierung verwende, aufschlüsseln und erklären, warum diese Instruments beim Erstellen realer Anwendungen so intestine zusammenarbeiten.

Der Stapel

• Subsequent.js (App-Router) -> Frontend und Layouts
• shadcn/ui -> UI-Komponenten
• Serveraktionen + Routen -> Backend-Logik und Webhooks
• Supabase -> Datenbank, Authentifizierung, Speicher
• Erneut senden -> Transaktions-E-Mails
• Streifen -> Zahlungen und Abonnements
• Vercel -> Bereitstellung und Vorschau

Dieser Stapel ist bewusst einfach gehalten. Sie können das kostenlose Kontingent jeder hier aufgeführten Plattform nutzen, was es splendid für Einsteiger macht. Sie können eine vollständige Anwendung kostenlos auf Vercel bereitstellen und verwaltete Dienste ohne Vorabkosten verbinden.

Warum dieser Stapel skaliert werden kann, ohne dass es zu Unordnung kommt

Zwei Subsequent.js-Grundelemente übernehmen die meiste Arbeit, wenn die App wächst:

1. Serveraktionen Behandeln Sie Formularübermittlungen und serverseitige Mutationen. Sie sorgen dafür, dass Datenschreibvorgänge nahe an der Benutzeroberfläche erfolgen und viele Textbausteine ​​entfernt werden, die normalerweise früh auftauchen.
2. Routenhandler Behandeln Sie Webhooks, Gesundheitsprüfungen und benutzerdefinierte Endpunkte. Dies gibt Ihnen einen sauberen Ort, an dem externe Systeme mit Ihrer App kommunizieren können, ohne Ihre UI-Logik zu verschmutzen.

Supabase bietet Ihnen Datenbank, Authentifizierung und Speicherung mit einem Sicherheitsmodell, das nah an den Daten ist. Wenn Sie die Sicherheit auf Zeilenebene frühzeitig aktivieren, bleibt die Autorisierung konsistent, wenn das System wächst, und Sie vermeiden spätere mühsame Migrationen.

Erneut senden sorgt dafür, dass Transaktions-E-Mails einfach und umgebungsorientiert sind.

Streifenkasse In Kombination mit Webhooks erhalten Sie eine zuverlässige Möglichkeit, Zahlungen in echte Ansprüche umzuwandeln, statt in verstreute Function-Flags.

Vercel sorgt dafür, dass Vorschau- und Produktionsbereitstellungen aufeinander abgestimmt sind, sodass Sie vom ersten Tag an in realen Umgebungen testen können.

Dieser Stack eignet sich intestine für die Vibe-Codierung, da er eigensinnig und vorhersehbar ist und für einen KI-Coding-Agenten leicht nachvollziehbar ist. Sobald die Grenzen klar sind, baut sich das System quick von selbst auf.

# Bauen Sie einen Plan von Null auf einen bezahlten MVP auf

Dieser Construct-Plan ist für die Vibe-Codierung mit echten Instruments konzipiert. Das Ziel ist es, eine zu bekommen zunächst ein serienreifes Grundgerüstund fügen Sie dann in kleinen Phasen Funktionen hinzu, ohne frühere Entscheidungen zu zerstören. Jede Section ist direkt dem von Ihnen verwendeten Stack zugeordnet, sodass ein KI-Coding-Agent sie von Anfang bis Ende verfolgen kann.

Section 1: MVP-Gründung

Bauen Sie den vollständigen Produktkreislauf mit minimalem Umfang auf.

• Aufstellen Subsequent.js (App-Router) Projekt mit Vercel Einsatz
• Dashboard-Shell und Navigation mit shadcn/ui
• Authentifizierungsflüsse mit Supabase-Auth (Anmelden, Anmelden, Zurücksetzen)
• Eine zentrale benutzereigene Tabelle in Supabase Postgres
• CRUD-Bildschirme powered by Subsequent.js-Serveraktionen
• Vorschau der Bereitstellungen bei jeder Änderung über Vercel

Am Ende dieser Section verfügen Sie bereits über eine nutzbare App, die in der Produktion läuft, auch wenn der Funktionsumfang gering ist.

Section 2: Datensicherheit und Zugriffskontrolle

Sperren Sie Benutzerdaten, bevor Sie weitere Funktionen hinzufügen.

• Aktivieren Sicherheit auf Zeilenebene auf benutzereigenen Tabellen in Supabase
• Definieren Sie Lese- und Schreibrichtlinien basierend auf dem Eigentum
• Verwenden Sie konsistente Muster wie „owner_id“, „created_at“, „update_at“.
• Validieren Sie Zugriffsregeln durch echte UI-Abläufe, nicht nur durch SQL

Diese Section verhindert zukünftige Umschreibungen und sorgt dafür, dass die Sicherheit an der tatsächlichen Funktionsweise der App ausgerichtet ist.

Section 3: E-Mail und Speicherung

Fügen Sie Vertrauen und Dateiverwaltung hinzu.

• Transaktions-E-Mails über Erneut senden (Willkommen, Verifizierung, Zurücksetzen)
• Verwendung privater Speichereimer Supabase-Speicher
• Laden Sie Flows hoch, die dieselben Eigentumsregeln wie Ihre Datenbank berücksichtigen
• Signierte URLs oder kontrollierter Zugriff basierend auf der Benutzeridentität

Ab diesem Zeitpunkt fühlt sich das Produkt vollständig statt experimentell an.

Section 4: Abrechnung und Ansprüche

Verwandeln Sie Nutzung in Umsatz.

• Erstellen Streifenkasse Sitzungen und Umleitung von Benutzern
• Handhaben Stripe-Webhooks mit Subsequent.js-Routenhandlern
• Speichern Sie den Abonnement- oder Kaufstatus in Supabase
• Erhalten Sie Premium-Funktionen basierend auf gespeicherten Berechtigungen
• Machen Sie die Webhook-Verarbeitung mithilfe verarbeiteter Ereignis-IDs idempotent

Am Ende dieser Section verfügen Sie über einen kostenpflichtigen MVP, der skaliert werden kann, ohne die Kernarchitektur zu ändern.

# Claude Code Starter-Eingabeaufforderung

Sie können ersetzen „Buchladen + Reader MVP“ mit Ihrer eigenen Idee über die gleiche Claude-Code-Eingabeaufforderung.

Construct a **E-book Store + Reader MVP** utilizing this stack:
- Subsequent.js App Router  
- shadcn/ui  
- Supabase (Postgres, Auth, Storage)  
- Resend  
- Stripe (Checkout + webhooks)  
- Vercel  

## Aim
Ship a production-ready E-book Store and Reader with paid entry.

## Construct
- Public pages: touchdown, pricing, ebook checklist  
- Auth: enroll, register, reset password  
- Protected app: reader dashboard  

## Information
- `books`, `chapters`
- Row Degree Safety so customers entry solely their very own information

## Options
- CRUD by way of Server Actions  
- Reader view with progress monitoring  
- Non-public storage for ebook property  
- Welcome e-mail  
- Stripe Checkout + webhook-based entitlements  

## Output
- Clear app construction
- Minimal dependencies
- README with setup, env vars, migrations, Stripe, and Vercel steps
- Handbook verification guidelines per characteristic

Sie müssen lediglich auf Claude Code umsteigen Planmodusfügen Sie die Eingabeaufforderung ein und ändern Sie die Idee oder passen Sie den Umfang entsprechend Ihren Anforderungen an.

Sobald Sie beginnen, plant Claude zunächst das System und beginnt dann Schritt für Schritt ohne Reibungsverluste mit dem Aufbau. Außerdem werden Sie durch die Einrichtung erforderlicher Dienste, die Erstellung von Konten auf Plattformen von Drittanbietern und die Generierung von API-Schlüsseln bei Bedarf geführt.

Dies macht es einfach, von einer Idee zu einer funktionierenden Anwendung zu gelangen, ohne bei der Einrichtung oder den Entscheidungen hängenzubleiben.

# Optionale Instruments

Diese Instruments sind für die Auslieferung der ersten Model nicht erforderlich, helfen Ihnen jedoch beim Testen, Überwachen und Härten der Anwendung, während sie im realen Einsatz wächst.

# Letzte Gedanken

Moderne Entwicklungs- und Engineering-Instruments entwickeln sich schnell weiter. Die meisten von ihnen sind mittlerweile auf die KI-Integration ausgelegt und bieten eine gute Dokumentation, APIs und Zugriff im MCP-Stil, sodass KI-Agenten direkt mit ihnen zusammenarbeiten und Software program schneller als je zuvor erstellen können.

Wenn Sie ein Datenwissenschaftler sind, der sich noch nie mit Webentwicklung beschäftigt hat, oder ein absoluter Anfänger, der etwas Reales aufbauen oder ein Startup gründen möchte, empfehle ich dringend, mit diesem Tech-Stack zu beginnen. Es erfordert nur minimale Einrichtung und ermöglicht die nahezu sofortige Bereitstellung einer funktionierenden Anwendung.

Ich habe quick drei Monate gebraucht, um Instruments zu testen und zu vergleichen, bevor ich mich für diesen Stack entschieden habe. Wenn Sie hier beginnen, sparen Sie diese Zeit.

Wenn Sie später mehr Flexibilität wünschen, können Sie die Dinge aufteilen. Verwenden Sie zum Beispiel Neon für die Datenbank, Sachbearbeiter zur Authentifizierung und lassen Sie alles andere gleich. Wenn Ihr System wächst, können Sie durch die Aufteilung der Verantwortlichkeiten auf mehrere Instruments einfacher ein Teil ersetzen, ohne den Relaxation zu beschädigen.

Beginnen Sie einfach, liefern Sie früh aus und entwickeln Sie sich nur dann weiter, wenn Sie es brauchen.

Abid Ali Awan (@1abidaliawan) ist ein zertifizierter Datenwissenschaftler, der gerne Modelle für maschinelles Lernen erstellt. Derzeit konzentriert er sich auf die Erstellung von Inhalten und das Schreiben technischer Blogs zu maschinellem Lernen und Datenwissenschaftstechnologien. Abid verfügt über einen Grasp-Abschluss in Technologiemanagement und einen Bachelor-Abschluss in Telekommunikationstechnik. Seine Imaginative and prescient ist es, ein KI-Produkt mithilfe eines graphischen neuronalen Netzwerks für Schüler mit psychischen Erkrankungen zu entwickeln.