Erstelle einen Onlineshop von Grund auf mit Coderblock
Erstelle einen Fullstack-Onlineshop, indem du ihn in natürlicher Sprache beschreibst. Verfeinere anschließend per Chat den Katalog, Warenkorb, die Authentifizierung, Zahlungen und Verwaltungstools. Dieses Tutorial begleitet dich vom ersten Prompt bis zur Veröffentlichung eines Shops mit echter Datenbank und Stripe-Checkout.
Was du erstellen wirst
In diesem Tutorial erstellst du ausgehend von einer einfachen Beschreibung im Chat einen vollständigen, responsiven Onlineshop.
Am Ende verfügst du über:
- einen Katalog mit Produktdetailseiten
- Suche, Kategorien und Verfügbarkeitsanzeigen
- einen Warenkorb
- Kundenkonten und einen geschützten Bestellverlauf
- Stripe-Checkout im Testmodus
- einen Adminbereich zur Verwaltung von Produkten und Bestellungen
- eine echte Postgres-Datenbank mit Row Level Security
- eine veröffentlichte Produktionsversion mit SSL
Coderblock generiert das Frontend mit React, Vite, TypeScript und Tailwind CSS sowie das Backend und die Datenbank. Du steuerst das Projekt über eine Unterhaltung in natürlicher Sprache, ohne Routen, Datenbankmigrationen oder Zahlungs-Webhooks manuell konfigurieren zu müssen.
1. Starte ein neues Projekt für deinen Shop
Öffne Coderblock und erstelle ein neues Projekt. Du kannst die Vorlage für Onlineshops verwenden oder den Shop von Grund auf erstellen, indem du einfach beschreibst, was du umsetzen möchtest.
Zum Beispiel:
Erstelle einen modernen Onlineshop für nachhaltige Wohnaccessoires. Entwickle eine responsive Startseite, einen Produktkatalog, Kategoriefilter, Produktdetailseiten, einen Warenkorb, Kundenkonten, einen Stripe-Checkout, einen Bestellverlauf und einen Adminbereich zur Verwaltung von Produkten und Bestellungen. Verwende eine neutrale, warme Farbpalette und gestalte die Benutzeroberfläche sowohl für Desktop- als auch für Mobilgeräte barrierefrei.
Je mehr Informationen du dem Agenten über die Art der Produkte, den gewünschten Stil, wichtige Seiten und benötigte Funktionen gibst, desto näher kommt die erste Version deinen Vorstellungen.
Coderblock erstellt Frontend, Backend und Datenbank und zeigt das Ergebnis in der Live-Entwicklungsvorschau unter der .coderblock.dev-Adresse des Projekts an.
Du kannst Chat und Vorschau gleichzeitig geöffnet lassen und beobachten, wie sich dein Shop während der Arbeit verändert.
2. Prüfe und verfeinere deinen Shop
Jetzt ist es an der Zeit, dein Ergebnis zu erkunden. Teste die Navigation, die Startseite, den Katalog, die Produktseiten und den Warenkorb. Prüfe alles sowohl auf dem Desktop als auch auf kleineren Mobilbildschirmen.
Das erste Ergebnis ist nur ein Ausgangspunkt. Du kannst es direkt im Chat mit gezielten Anweisungen weiterbearbeiten.
Zum Beispiel:
- „Fixiere den Header und zeige die Anzahl der Artikel im Warenkorb dauerhaft an.“
- „Zeige die Produkte auf dem Desktop in einem vierspaltigen Raster und auf Mobilgeräten in einer Spalte an.“
- „Füge Filter für Kategorie, Preis und Verfügbarkeit hinzu.“
- „Erstelle eine Ansicht für einen leeren Warenkorb mit einem Link zurück zum Katalog.“
- „Zeige unter der Beschreibung jedes Produkts ähnliche Produkte an.“
- „Füge Zustände für Laden, Fehler und keine Ergebnisse hinzu.“
Die Änderungen erscheinen innerhalb weniger Sekunden in der Live-Vorschau. Am besten gehst du in kleinen Schritten vor: Stelle jeweils ein oder zwei zusammenhängende Anforderungen, prüfe das Ergebnis und fahre dann mit der nächsten Änderung fort.
3. Erstelle das Datenmodell für Produkte und Bestellungen
Sobald die Struktur deines Shops feststeht, kannst du den Agenten bitten, das erforderliche Datenmodell zu erstellen. Zum Beispiel:
Erstelle Datenbanktabellen für Produkte, Kategorien, Bestellungen und Bestellpositionen. Jedes Produkt soll einen Namen, eine Beschreibung, einen Preis, eine SKU, den verfügbaren Bestand, eine Kategorie, ein Bild, einen Aktivstatus und Zeitstempel besitzen. Bestellungen müssen authentifizierten Kunden zugeordnet sein und Zahlungsstatus, Erfüllungsstatus, Gesamtsumme und Bestellpositionen enthalten.
Jede Webanwendung verwendet ein eigenes Supabase-Projekt mit Postgres. Coderblock entwirft das Schema und führt die erforderlichen Migrationen aus. Du kannst das Ergebnis direkt auf der Registerkarte Backend prüfen. Dort findest du Tabellen, authentifizierte Benutzer, Storage und Funktionen. Jetzt kannst du außerdem einige Beispielprodukte hinzufügen:
Füge acht Beispielprodukte aus drei Kategorien hinzu, damit ich den Shop testen kann. Sorge dafür, dass sie später im Adminbereich einfach ersetzt werden können.
Wenn deine Produkte besondere Anforderungen haben, solltest du diese direkt angeben. Du kannst beispielsweise mehrere Bilder, Größen, Farben oder andere Varianten festlegen. Du kannst den Agenten außerdem bitten, Supabase Storage für hochgeladene Bilder zu verwenden und diese mit den jeweiligen Produkten zu verknüpfen.
4. Füge Kundenauthentifizierung und Sicherheit hinzu
Jetzt kannst du Kundenkonten erstellen sowie persönliche Daten und Bestellungen schützen. Bitte Coderblock:
Füge die Registrierung und Anmeldung für Kunden hinzu, schütze die Konto- und Bestellverlaufsseiten und stelle sicher, dass jeder Kunde nur seine eigenen Bestellungen sehen kann. Füge die Rollen Administrator und Kunde hinzu.
Der Agent konfiguriert Supabase Auth einschließlich Registrierungs- und Anmeldeseiten, Sitzungsverwaltung, geschützter Routen und Datenbankrichtlinien. Jede Anwendung enthält bereits eine Profiltabelle und eine grundlegende Rollenstruktur. Coderblock wendet außerdem die mit dem authentifizierten Benutzer verknüpfte Row Level Security von Postgres an. Dadurch kann jeder Kunde ausschließlich auf seine eigenen Daten zugreifen, während Administratoren die erforderlichen Berechtigungen zur Verwaltung von Produkten und Bestellungen erhalten können.
Du musst weder eine eigene Tabelle für Passwörter erstellen noch Code für JWT oder Passwort-Hashing manuell schreiben. Wenn du zusätzlich Social Login anbieten möchtest, kannst du Folgendes anfordern:
Füge zusätzlich zur Authentifizierung mit E-Mail-Adresse und Passwort die Anmeldung über soziale Netzwerke hinzu.
Prüfe das Verhalten anschließend mit getrennten Kunden- und Administratorkonten. Stelle sicher, dass ein Kunde weder Adminseiten öffnen noch die Bestellungen eines anderen Kunden sehen kann.
5. Erstelle den Warenkorb und Checkout
Bevor du Zahlungen konfigurierst, solltest du sicherstellen, dass der Warenkorb wie vorgesehen funktioniert. Prüfe, ob Kunden Folgendes tun können:
- Produkte hinzufügen
- Mengen ändern
- Artikel entfernen
- aktualisierte Gesamtsummen anzeigen
Sobald der Warenkorb bereit ist, kannst du den Agenten bitten, Stripe hinzuzufügen:
Ermögliche Kunden, ihren Warenkorb mit Stripe zu bezahlen. Starte im Testmodus, erstelle die erforderlichen Produkte und Preise, speichere abgeschlossene Bestellungen und zeige verständliche Seiten für erfolgreiche und abgebrochene Zahlungen an.
Standardmäßig kann Coderblock ein verwaltetes Stripe-Konto für das Projekt erstellen. Der Agent stellt dir einige einfache Fragen, etwa zum Land und zum Namen des Unternehmens.
Du musst keine API-Schlüssel angeben: Coderblock verwaltet den Zahlungs-Webhook und stellt dir einen von Stripe gehosteten Link bereit, über den du später die Zahlungseinrichtung und Identitätsprüfung abschließen kannst.
Wenn du lieber dein eigenes Stripe-Konto verwenden möchtest, kannst du die BYOK-Option anfordern.
Der Agent fragt STRIPE_SECRET_KEY über eine sichere Abfrage für Umgebungsvariablen ab. Der Wert wird im serverseitigen Secret-Speicher des Projekts hinterlegt und weder in den generierten Code noch in den normalen Chat eingefügt. Der Webhook wird automatisch registriert.
Beginne immer im Testmodus.
Führe einige Testkäufe durch und prüfe, ob erfolgreiche Zahlungen die Bestellungen und zugehörigen Bestellpositionen korrekt erstellen. Teste außerdem eine abgebrochene und eine fehlgeschlagene Zahlung. Wechsle erst zu echten Zahlungen, wenn der gesamte Ablauf wie vorgesehen funktioniert.
6. Füge den Adminbereich hinzu
Ein Shop benötigt auch einen eigenen Bereich für seine Betreiber. Du kannst den Agenten bitten:
Erstelle ein geschütztes Admin-Dashboard, in dem Administratoren Produkte hinzufügen, bearbeiten, aktivieren und deaktivieren, Bilder hochladen, den Bestand aktualisieren, Bestellungen prüfen und deren Erfüllungsstatus ändern können. Füge Übersichtskarten für Bestellungen und Umsätze hinzu.
Prüfe jede Aktion direkt in der Vorschau. Kontrolliere beispielsweise, ob Änderungen an einem Produkt sofort im Shop erscheinen und ob normale Kunden keinen Zugriff auf das Admin-Dashboard haben. Du kannst außerdem Prüfungen hinzufügen, um Fehler zu vermeiden:
Verhindere die Eingabe negativer Preise und Mengen, mache Produktname und SKU zu Pflichtfeldern und verlange eine Bestätigung, bevor ein Produkt deaktiviert wird.
Auf die gleiche Weise kannst du verständliche Leerzustände, Fehlermeldungen und Bestätigungsdialoge vor destruktiven Aktionen anfordern.
7. Teste den gesamten Kaufprozess
Bevor du den Shop veröffentlichst, solltest du den gesamten Ablauf wie ein Kunde durchlaufen.
- Durchsuche und filtere die Produkte.
- Öffne eine Produktseite.
- Füge Artikel zum Warenkorb hinzu und ändere die Mengen.
- Erstelle ein Konto oder melde dich an.
- Schließe eine Testzahlung mit Stripe ab.
- Öffne die Seite mit dem Bestellverlauf.
- Melde dich als Administrator an und prüfe die Bestellung.
- Aktualisiere ihren Erfüllungsstatus.
Beschränke dich nicht auf den idealen Ablauf. Prüfe den Shop auch auf Mobilgeräten, teste, was bei einem nicht verfügbaren Produkt passiert, und stelle sicher, dass Leerzustände und Fehlermeldungen verständlich sind. Wenn etwas nicht funktioniert, musst du den Code nicht manuell bearbeiten. Beschreibe im Chat einfach, was du siehst und welches Verhalten du erwartest.
8. Veröffentliche den Shop und verbinde eine Domain
Wenn du alle Tests abgeschlossen hast, kannst du den Shop veröffentlichen.
Klicke auf Veröffentlichen. Coderblock stellt die Anwendung daraufhin unter einer .coderblock.app-Adresse mit inbegriffenem SSL in der Produktionsumgebung bereit.
Spätere Veröffentlichungen können über schnelle Hot Updates erfolgen.
Wenn du eine eigene Domain verwenden möchtest, öffne Einstellungen → Domains. Du kannst eine bereits vorhandene Domain verbinden, indem du dem Assistenten für DNS-Einträge folgst. Alternativ kannst du über den integrierten Checkout direkt in Coderblock eine Domain kaufen. In diesem Fall werden DNS und SSL automatisch konfiguriert. Bevor du deinen Shop öffentlich bewirbst, musst du das Stripe-Onboarding abschließen und vom Testmodus zu echten Zahlungen wechseln. Gib außerdem eine letzte echte Bestellung auf und prüfe, ob der zugehörige Datensatz korrekt in der Datenbank gespeichert wird.
Dein Shop ist online
Damit hast du eine einfache Beschreibung in einen echten Fullstack-Onlineshop mit Katalog, Konten, Warenkorb, Zahlungen, Datenbank und Adminbereich verwandelt. Und vor allem endet die Arbeit nicht mit der Veröffentlichung: Du kannst deinen Shop über denselben Chat kontinuierlich verbessern, neue Funktionen hinzufügen und bestehende Funktionen optimieren, ohne deinen Arbeitsablauf zu unterbrechen.
