Erstelle einen interaktiven Leuchten-Shop mit KI (Supabase + Hostinger)

Claude Desktop

Claude Code läuft darin und passt deinen Shop an. Du brauchst einen kostenpflichtigen Claude-Plan.

Claude Desktop herunterladen

https://claude.ai/download

GitHub-Konto

Kostenlos. Hier liegt deine eigene Kopie von LUMIÈRE, und Hostinger stellt sie von hier aus bereit.

GitHub-Konto erstellen

https://github.com/signup

Hostinger-Hosting

Hier läuft dein Live-Shop. Einen Plan wählst du in Schritt 2.

Du brauchst weder Node.js noch einen Code-Editor oder ein Terminal. Hostinger baut und betreibt deinen Shop, und Claude übernimmt die Bearbeitung.

LUMIÈRE ansehen und kopieren

Probiere zuerst den fertigen Shop aus: Streich über die Messingschiene, um die Pendelleuchten einzuschalten, zieh sie und klicke auf eine, um ihren Dimmer zu öffnen. Die Demo hat keinen Admin-Bereich und keinen Checkout.

Die LUMIÈRE-Live-Demo öffnen

Die fertige Shop-Oberfläche, direkt in deinem Browser.

https://lumiere-lighting-store.vercel.app/

LUMIÈRE auf GitHub öffnen

https://github.com/salhiworks/lumiere-lighting-store

Klicke auf Use this template und dann auf Create a new repository Gib ihm einen Namen und wähle Public oder Private Klicke auf Create repository

Prüfe, dass es deine eigene Kopie ist

Die Adresse des Repositorys beginnt mit github.com/ und deinem eigenen Benutzernamen

Unter dem Namen steht bei GitHub, dass es aus salhiworks/lumiere-lighting-store erstellt wurde

Ab jetzt nutzt du nur noch dein eigenes Repository. Hostinger stellt es in Schritt 2 bereit, und Claude Desktop bearbeitet es in Schritt 3. Der ursprüngliche Starter bleibt unverändert.

Node.js-Hosting holen

Erst veröffentlichen, dann anpassen: In wenigen Minuten ist dein Shop eine echte Website, und jede spätere Änderung erscheint dort.

Wähle einen Hostinger-Tarif

Nimm den Unlimited-Tarif oder einen Cloud-Tarif — LUMIÈRE wird als Node.js Web App bereitgestellt, nicht als statische Website.

Importiere dein Repository

Hostinger Websites Create site Web App

Wähle zum Start eine temporäre Domain — deine eigene verbindest du in Schritt 5 Wähle Import Git Repository Autorisiere GitHub und wähle deine eigene Kopie von LUMIÈRE, die du in Schritt 1 erstellt hast — nicht den ursprünglichen Starter

Konfigurieren und bereitstellen

Behalte die Next.js-Einstellungen, die Hostinger erkennt — Hostinger baut und startet den Shop selbst Wähle Node.js 22 Achte darauf, dass das Build-Skript build ist — niemals build:demo, das die gesperrte Demo baut

Bevor du deployst, füge die Adresse deiner Website als Umgebungsvariable hinzu: die temporäre Adresse, die du gerade gewählt hast. Deine endgültige Domain brauchst du noch nicht — Schritt 5 tauscht sie aus und deployt erneut.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Deine temporäre Adresse, beginnend mit https://

Mehr braucht der Shop nicht. Supabase und Stripe sind beide optional, lass sie also für später.

Klicke auf Deploy und warte, bis der Build fertig ist Öffne deine temporäre Adresse

Sieh deinen Shop live

Deine temporäre Adresse öffnet deinen LUMIÈRE-Shop

Ein Streichen über die Schiene schaltet die Lampen ein, und jedes Foto lädt

Der Shop und eine Produktseite öffnen sich

Dein Shop ist live. Ab jetzt wird jede Änderung, die du in den main-Branch deines Repositorys pushst, von Hostinger automatisch neu gebaut und veröffentlicht.

Öffne dein Projekt in Claude Desktop

Claude Desktop Code Local

Starte eine Local-Sitzung in einem Ordner wie Dokumente, trage unten die Adresse deines Repositorys ein und sende:

Deine Kopie klonen

Lädt dein eigenes LUMIÈRE-Repository in einen neuen Unterordner herunter und prüft, ob Claude es aktualisieren kann.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

Die Adresse deines Repositorys

https://github.com/your-name/my-lighting-store

Deinen LUMIÈRE-Ordner öffnen

Starte eine neue Local-Sitzung Öffne den Ordner, den Claude gerade erstellt hat — den, in dem README.md liegt Wenn Claude Desktop fragt, vertraue dem Ordner

Claude ändert diese Kopie deines Shops und sendet die Änderungen an dein eigenes GitHub-Repository. Hostinger aktualisiert dann deine Live-Website.

Beschreib Claude deinen Shop

Füll aus, was du weißt — lass den Rest leer, dann behält Claude die Version von LUMIÈRE. Sende es anschließend in deiner LUMIÈRE-Sitzung:

Meinen Leuchten-Shop anpassen

Ändert Name, Produkte, Texte und Look und lässt die Lampenanimationen und Fotopaare genau so, wie sie sind.

This folder is my own copy of the LUMIÈRE lighting store. Before you change anything, read README.md, AGENTS.md, docs/ARCHITECTURE.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the store for my business. Store name: {{STORE_NAME}} What makes us different: {{STORE_STORY}} Visual identity: {{VISUAL_STYLE}} Products: {{PRODUCTS}} Photos: {{PHOTOS}} Where each change belongs: - Name, description and navigation: lib/site.ts and the wordmark in components/layout/wordmark.tsx - Products and collections: lib/catalog/demo-data.ts. Make the same changes in supabase/seed.sql, so a database I connect later starts with the same catalog. - Homepage and studio copy: components/home/ - Colours and fonts: app/globals.css and app/layout.tsx Keep these exactly as they are: - The Pendant Lamp Rail in components/ui/pendant-lamp-rail.tsx: brushing the rail to switch lamps on, dragging, the detail view with its dimmer, and every animation, timing and hit area - The paired photos: every product keeps one OFF and one ON photo of the same size, at /lamps/<product-id>-off.webp and /lamps/<product-id>-on.webp, following the rules in docs/ASSETS.md - The admin, checkout, Supabase migrations and environment variables - The dependencies: don't add new ones Prices are in cents, as the catalog already stores them ($240 = 24000). The store uses one currency, USD by default. First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server and don't push anything yet: I'll ask you to publish when I'm ready.

Shop-Name

Atelier Nord

Was macht dein Leuchtenstudio besonders?

Pendelleuchten aus Keramik und Messing in Kleinserie, handgefertigt in Lissabon und in ganz Europa versendet.

Visuelle Identität

Deine Lampen — eine pro Zeile: Name, Oberfläche, Preis

Keramikkuppel, Sand, $240 Messingkegel, Gebürstet, $310

Lampenfotos

Lies den Plan, bevor du ihn freigibst. Bitte Claude in derselben Sitzung um weitere Änderungen, bis sich der Shop nach dir anfühlt.

Eigene Lampenfotos verwenden

Ersetze die Demo-Fotos, bevor du verkaufst

Die 16 Demo-Lampenfotos stammen aus der Demo der ursprünglichen Komponente, und ihre Rechte sind nicht geprüft. Nutze für einen echten Shop Fotos, die dir gehören oder für die du eine Lizenz hast.

Jede Lampe braucht zwei Fotos: eines ausgeschaltet und eines eingeschaltet. Die Schiene schaltet eine Lampe ein, indem sie beide überblendet, deshalb müssen sie exakt übereinanderliegen:

Gleiche Kamera, Position und Größe — nur das Licht ändert sich

Transparenter Hintergrund, ohne eingebrannten Schatten

Das Kabel kommt mittig vom oberen Rand

Hochformat, dieselbe Leinwand für jedes Foto — die Demo nutzt 557 × 900 px

Ohne Supabase legst du jedes Paar in diesem Ordner deines Projekts ab, benannt nach dem Produkt — zum Beispiel dome-enamel-off.webp und dome-enamel-on.webp — und bittest Claude dann, sie zu verwenden und zu veröffentlichen. Mit Supabase lädst du die Paare stattdessen im Admin hoch, und er prüft sie für dich.

public/lamps/

Deine Änderungen veröffentlichen

Claude sendet deinen angepassten Shop an dein eigenes GitHub-Repository, und Hostinger baut daraus deine Live-Website neu. Wenn du mit den Änderungen zufrieden bist, sende:

Meine Änderungen veröffentlichen

Prüft den Shop, committet dann deine Änderungen und pusht sie in den main-Branch deines Repositorys.

Publish my customized store. 1. Make sure npm run lint, npm run typecheck and npm run build all pass, and fix anything that fails. 2. Make sure .env.local and any other secrets are not committed. 3. Commit all my changes with a clear message and push them to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

Deine Änderungen live sehen

Warte ein paar Minuten, bis Hostinger deinen Shop neu gebaut hat Lade deine Live-Adresse neu Streich über die Schiene — jede Lampe leuchtet auf und ihr Kabel trifft die Schiene Klicke auf eine Lampe und bewege ihren Dimmer — nur das Licht ändert sich Öffne den Shop und eine Produktseite und leg eine Lampe in den Warenkorb

Nach ein paar Minuten hat sich nichts geändert? Öffne Settings & Redeploy in deiner Web App und stelle neu bereit. Sieht etwas falsch aus? Beschreibe es Claude in derselben Sitzung, bitte ihn, es zu beheben, ohne die Lampenschiene anzufassen, und veröffentliche dann erneut.

Vorschau auf deinem Computer? (Optional)

Das musst du nie tun. Wenn du Änderungen vor dem Veröffentlichen sehen möchtest, bitte Claude in deiner Sitzung: Installiere die Abhängigkeiten, starte den Entwicklungsserver mit npm run dev und nenne mir die lokale Adresse. Dafür brauchst du Node.js 22 oder neuer, und Claude sagt dir Bescheid, falls es fehlt. Dein Live-Shop hängt nie davon ab.

Ein Supabase-Projekt erstellen

Dein Live-Shop funktioniert schon ohne Supabase — springe zu Schritt 5, wenn dir das reicht. Verbinde es, um Produkte, Fotos, Bestand und Bestellungen in deinem eigenen Admin unter /admin zu verwalten.

Supabase-Konto erstellen

https://supabase.link/r4gdwhi

Klicke auf New project — jede Region und der Free-Tarif passen Bewahre das Datenbankpasswort sicher auf Kopiere die Project ID, sobald das Projekt bereit ist

Supabase Project Settings General

Claude Zugriff auf dein Projekt geben

So kann Claude deine Datenbank für dich einrichten. In deiner LUMIÈRE-Sitzung in Claude Desktop:

Öffne in der Seitenleiste Customize, dann Connectors, und füge Supabase hinzu — oder klicke neben dem Prompt-Feld auf + und wähle Add connectors Klicke auf Connect und bestätige den Zugriff in deinem Browser, indem du die Organisation wählst, die dein Projekt enthält Starte eine neue Local-Sitzung im selben Ordner, damit Claude die Verbindung übernimmt

Du meldest dich im Browser über Supabase an — kein Schlüssel und kein Passwort gehört in einen Prompt. Die Verbindung kann alle Projekte der Organisation sehen, die du freigibst, deshalb beschränkt der nächste Prompt Claude auf dein LUMIÈRE-Projekt.

Du findest den Supabase-Connector nicht oder möchtest keinen verwenden? Überspringe den nächsten Prompt und nutze die manuelle Einrichtung am Ende von Schritt 4: dieselben drei SQL-Dateien, ohne Connector.

Lass Claude die Datenbank einrichten

LUMIÈRE auf Supabase einrichten

Claude wendet die Migrationen und Produkte des Starters an, prüft Sicherheit und Speicher und gibt dir dann die zwei öffentlichen Werte für Hostinger.

Connect this LUMIÈRE store to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md ("Connect Supabase"), docs/SUPABASE.md and docs/ADMIN.md first, and follow them. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. How to reach Supabase: - Use the Supabase connection in this session if it is connected. - Otherwise, use the Supabase CLI if I'm signed in, with the commands in docs/SUPABASE.md. - If neither works, stop and tell me exactly what to do. Never ask me for a password, an access token or a Secret key. Tell me what each step does before you run it: 1. Apply supabase/migrations/20261101120000_catalog_and_admin.sql, then supabase/migrations/20261101150000_orders_checkout.sql, in that order. They create the tables, the Row Level Security policies and the lamp-photos storage bucket. 2. Run supabase/seed.sql to add the three collections and the eight pendants. 3. Verify the setup: Row Level Security is on for every table, the lamp-photos bucket exists, there are 8 products and 3 collections, and Supabase's security advisor shows no warnings. Fix nothing by hand: tell me what's wrong. 4. Read my Project URL and Publishable key from the project, and show them to me as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/ADMIN.md, check that the row exists, and tell me to sign in at /admin on my live store.

Deine Supabase Project ID

abcdefghijklmnopqrst

Claude fragt vor jeder Aktion — lies sie und erlaube sie dann. Claude hält an, wenn du an der Reihe bist.

Dein Admin-Konto erstellen

Supabase Authentication Users

Klicke auf Add user und dann auf Create new user Gib deine E-Mail und ein starkes Passwort ein Lass Auto Confirm User angehakt und erstelle den Benutzer Nenne Claude deine Admin-E-Mail — niemals dein Passwort

Supabase Authentication Sign In / Providers

Schalte Allow new users to sign up aus und speichere — der Shop hat keine Kundenkonten

Keine Supabase-Verbindung? Richte es von Hand ein

Öffne in deinem Supabase-Projekt den SQL Editor. Führe diese drei Dateien aus deinem LUMIÈRE-Ordner in dieser Reihenfolge aus. Öffne jede, kopiere alles, füge es in eine neue Abfrage ein und klicke auf Run. Jede lässt sich gefahrlos erneut ausführen.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Kopiere deine Project URL und den Publishable key aus Connect in Hostinger, wie im nächsten Schritt gezeigt. Nachdem du oben deinen Admin-Benutzer erstellt hast, trage unten deine E-Mail ein und führe dies im SQL Editor aus:

Mich zum Administrator machen

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

Deine Admin-E-Mail

you@example.com

Die Supabase-Variablen auf Hostinger hinzufügen

Dein Live-Shop liest Supabase über zwei öffentliche Werte. Öffne im Dashboard deiner Web App Environment Variables und füge hinzu:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

Claude hat dir beide Werte gegeben. Du findest sie auch in Connect.

Öffne Connect

https://supabase.com/dashboard/project/_?showConnect=true

Nur öffentliche Werte

Füge hier niemals den Secret key oder den service_role key von Supabase hinzu. Alles, was mit NEXT_PUBLIC_ beginnt, ist im Browser sichtbar.

Speichere die Variablen — Hostinger baut deinen Shop damit neu Nicht neu gebaut? Stelle über Settings & Redeploy neu bereit Öffne /admin auf deiner Live-Adresse und melde dich mit deiner Admin-E-Mail an

Im Admin-Bereich fügst du Produkte hinzu und bearbeitest sie, lädst OFF/ON-Fotopaare hoch und verwaltest Bestand und Bestellungen. Jedes Speichern aktualisiert die Schiene, den Shop und die Produktseiten.

Deine Domain verbinden

Hostinger Your Web App Connect domain

Gib deine Domain ein und folge den Schritten zur Verbindung Domain woanders registriert? Trag die DNS-Einträge, die Hostinger anzeigt, bei deinem Registrar ein Behalte alle bestehenden E-Mail-Einträge Warte, bis die Domain als verbunden angezeigt wird und SSL aktiv ist

Bis DNS-Änderungen überall ankommen, kann es einige Stunden dauern — bis zu 24 Stunden.

Eine eigene Domain mit deiner Website oder Web App verbinden

Die vollständige Anleitung, auch für Domains, die woanders registriert sind.

/video/connect-a-custom-domain-to-your-website-or-web-app

Zu deiner Domain wechseln und neu bereitstellen

Dein Shop baut seine Links, seine Sitemap und die sichere Admin-Anmeldung aus dieser einen Adresse. Öffne im Dashboard deiner Web App Environment Variables und ändere sie auf deine Domain:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Deine Domain, beginnend mit https://

Speichere die Variable Stelle über Settings & Redeploy neu bereit, damit die neue Adresse eingebaut wird Warte, bis der Build abgeschlossen ist

Deinen Live-Shop testen

Öffne deine Domain und prüfe:

Die Adresse beginnt mit https:// und das Schloss wird angezeigt

Ein Streichen über die Schiene schaltet die Lampen ein, und jedes Foto lädt

Der Shop und eine Produktseite öffnen sich, und eine Lampe landet im Warenkorb

Mit Supabase: Du kannst dich unter /admin anmelden

Eine erfundene Adresse wie /shop/no-such-lamp zeigt die Seite „Nicht gefunden“

Dein Lichtshop ist live auf deiner eigenen Domain. Um ihn später zu ändern, bearbeite Produkte im Admin — oder bitte Claude um Code-Änderungen und deren Veröffentlichung: Hostinger baut deinen Shop bei jedem Push auf main neu.