Crée une boutique de luminaires interactive avec l'IA (Supabase + Hostinger)

Claude Desktop

Claude Code s'exécute à l'intérieur et personnalise ta boutique. Il faut un abonnement Claude payant.

Télécharger Claude Desktop

https://claude.ai/download

Compte GitHub

Gratuit. Ta propre copie de LUMIÈRE y est stockée, et Hostinger la déploie à partir de là.

Créer un compte GitHub

https://github.com/signup

Hébergement Hostinger

Ta boutique en ligne tourne ici. Tu choisis une offre à l'étape 2.

Tu n'as pas besoin de Node.js, d'un éditeur de code ni d'un terminal. Hostinger compile et exécute ta boutique, et Claude s'occupe des modifications.

Découvre et copie LUMIÈRE

Essaie d'abord la boutique terminée : effleure le rail en laiton pour allumer les suspensions, fais-les glisser et clique sur l'une d'elles pour ouvrir son variateur. La démo n'a ni admin ni checkout.

Ouvrir la démo en ligne de LUMIÈRE

La vitrine terminée, directement dans ton navigateur.

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

Ouvrir LUMIÈRE sur GitHub

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

Clique sur Use this template, puis sur Create a new repository Donne-lui un nom et choisis Public ou Private Clique sur Create repository

Vérifie que c'est bien ta propre copie

L'adresse du dépôt commence par github.com/ suivi de ton propre nom d'utilisateur

Sous son nom, GitHub indique qu'il a été généré à partir de salhiworks/lumiere-lighting-store

À partir de maintenant, tu n'utilises plus que ton propre dépôt. Hostinger le déploie à l'étape 2, et Claude Desktop le modifie à l'étape 3. Le starter d'origine n'est jamais modifié.

Prends un hébergement Node.js

D'abord publier, ensuite personnaliser : en quelques minutes, ta boutique est un vrai site web, et chaque modification ultérieure s'y affichera.

Choisis un plan Hostinger

Utilise le plan Unlimited ou un plan Cloud — LUMIÈRE se déploie comme une Node.js Web App, pas comme un site statique.

Importer ton dépôt

Hostinger Websites Create site Web App

Choisis un domaine temporaire pour commencer — tu connectes le tien à l'étape 5 Choisis Import Git Repository Autorise GitHub et sélectionne ta propre copie de LUMIÈRE, celle que tu as créée à l'étape 1 — pas le starter d'origine

Configurer et déployer

Garde les réglages Next.js détectés par Hostinger — il construit et lance la boutique lui-même Choisis Node.js 22 Vérifie que le script de build est build — jamais build:demo, qui génère la démo verrouillée

Avant de déployer, ajoute l’adresse de ton site comme variable d’environnement : l’adresse temporaire que tu viens de choisir. Tu n’as pas encore besoin de ton domaine définitif — l’étape 5 le remplace et redéploie.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Ton adresse temporaire, commençant par https://

C'est tout ce dont la boutique a besoin. Supabase et Stripe sont tous deux facultatifs, laisse-les pour plus tard.

Clique sur Deploy et attends la fin du build Ouvre ton adresse temporaire

Découvre ta boutique en ligne

Ton adresse temporaire ouvre ta boutique LUMIÈRE

Effleurer le rail allume les lampes, et chaque photo se charge

La boutique et une page produit s'ouvrent

Ta boutique est en ligne. Désormais, chaque modification poussée sur la branche main de ton dépôt est recompilée et publiée automatiquement par Hostinger.

Ouvre ton projet dans Claude Desktop

Claude Desktop Code Local

Démarre une session Local dans un dossier comme Documents, ajoute l'adresse de ton dépôt ci-dessous et envoie :

Cloner ta copie

Télécharge ton propre dépôt LUMIÈRE dans un nouveau sous-dossier et vérifie que Claude peut le mettre à jour.

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.

L'adresse de ton dépôt

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

Ouvre ton dossier LUMIÈRE

Démarre une nouvelle session Local Ouvre le dossier que Claude vient de créer — celui qui contient README.md Si Claude Desktop le demande, fais confiance au dossier

Claude modifie cette copie de ta boutique et envoie les modifications vers ton propre dépôt GitHub. Hostinger met ensuite à jour ton site en ligne.

Décris ta boutique à Claude

Remplis ce que tu sais — laisse le reste vide et Claude garde la version de LUMIÈRE. Puis envoie-le dans ta session LUMIÈRE :

Personnaliser ma boutique de luminaires

Change le nom, les produits, les textes et le style, et garde exactement telles quelles les animations des lampes et les paires de photos.

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.

Nom de la boutique

Atelier Nord

Qu'est-ce qui distingue ton studio de luminaires ?

Des suspensions en céramique et en laiton en petites séries, faites à la main à Lisbonne et expédiées dans toute l'Europe.

Identité visuelle

Tes lampes — une par ligne : nom, finition, prix

Dôme en céramique, Sable, $240 Cône en laiton, Brossé, $310

Photos des lampes

Lis le plan avant de l'approuver. Demande d'autres modifications à Claude dans la même session jusqu'à ce que la boutique te ressemble.

Utilise tes propres photos de lampes

Remplace les photos de démo avant de vendre

Les 16 photos de lampes de la démo viennent de la démo du composant d'origine, et leurs droits ne sont pas vérifiés. Pour une vraie boutique, utilise des photos qui t'appartiennent ou dont tu as la licence.

Chaque lampe a besoin de deux photos : une éteinte et une allumée. Le rail allume une lampe en fondant l'une dans l'autre, elles doivent donc se superposer exactement :

Même appareil, même position et même échelle — seule la lumière change

Fond transparent, sans ombre intégrée

Le câble part du bord supérieur, centré

Format portrait, le même canevas pour chaque photo — la démo utilise 557 × 900 px

Sans Supabase, place chaque paire dans ce dossier de ton projet, en la nommant d'après le produit — par exemple dome-enamel-off.webp et dome-enamel-on.webp — puis demande à Claude de les utiliser et de publier. Avec Supabase, tu importes les paires depuis l'admin, qui les vérifie pour toi.

public/lamps/

Publie tes modifications

Claude envoie ta boutique personnalisée vers ton propre dépôt GitHub, et Hostinger recompile ton site en ligne à partir de celui-ci. Quand les modifications te conviennent, envoie :

Publier mes modifications

Vérifie la boutique, puis fait un commit de tes modifications et les pousse sur la branche main de ton dépôt.

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.

Découvre tes modifications en ligne

Attends quelques minutes que Hostinger recompile ta boutique Recharge ton adresse en ligne Effleure le rail — chaque lampe s'allume et son câble rejoint le rail Clique sur une lampe et règle son variateur — seule la lumière change Ouvre la boutique et une page produit, puis ajoute une lampe au panier

Rien n'a changé après quelques minutes ? Ouvre Settings & Redeploy dans ta Web App et redéploie. Quelque chose ne va pas ? Décris-le à Claude dans la même session, demande-lui de le corriger sans toucher au rail de lampes, puis publie à nouveau.

Envie de prévisualiser sur ton ordinateur ? (Facultatif)

Ce n'est jamais obligatoire. Si tu veux voir les modifications avant de les publier, demande à Claude dans ta session : installe les dépendances, démarre le serveur de développement avec npm run dev et donne-moi l'adresse locale. Il faut Node.js 22 ou plus récent, et Claude te prévient s'il manque. Ta boutique en ligne n'en dépend jamais.

Créer un projet Supabase

Ta boutique en ligne fonctionne déjà sans Supabase — passe à l'étape 5 si c'est tout ce qu'il te faut. Connecte-le pour gérer produits, photos, stocks et commandes dans ton propre admin à l'adresse /admin.

Créer un compte Supabase

https://supabase.link/r4gdwhi

Clique sur New project — n'importe quelle région et le plan Free conviennent Garde le mot de passe de la base de données en lieu sûr Quand le projet est prêt, copie son Project ID

Supabase Project Settings General

Laisse Claude accéder à ton projet

Cela permet à Claude de configurer ta base de données pour toi. Dans ta session LUMIÈRE dans Claude Desktop :

Ouvre Customize dans la barre latérale, puis Connectors, et ajoute Supabase — ou clique sur + à côté de la zone du prompt et sélectionne Add connectors Clique sur Connect et approuve l'accès dans ton navigateur, en choisissant l'organisation qui contient ton projet Démarre une nouvelle session Local dans le même dossier, pour que Claude prenne en compte la connexion

Tu te connectes à Supabase dans ton navigateur — aucune clé ni aucun mot de passe n'est saisi dans un prompt. La connexion peut voir tous les projets de l'organisation que tu approuves, donc le prompt suivant limite Claude à ton projet LUMIÈRE.

Tu ne trouves pas le connecteur Supabase, ou tu préfères ne pas en utiliser ? Saute le prochain prompt et utilise la configuration manuelle à la fin de l’étape 4 : les trois mêmes fichiers SQL, sans connecteur.

Demande à Claude de configurer la base de données

Configurer LUMIÈRE sur Supabase

Claude applique les migrations et les produits du starter, vérifie la sécurité et le stockage, puis te donne les deux valeurs publiques pour 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.

Ton Project ID Supabase

abcdefghijklmnopqrst

Claude demande avant chaque action — lis-la, puis autorise-la. Il s'arrête quand c'est à toi de jouer.

Crée ton compte admin

Supabase Authentication Users

Clique sur Add user, puis sur Create new user Saisis ton e-mail et un mot de passe robuste Laisse Auto Confirm User coché et crée l'utilisateur Donne ton e-mail d'admin à Claude — jamais ton mot de passe

Supabase Authentication Sign In / Providers

Désactive Allow new users to sign up et enregistre — la boutique n'a pas de comptes clients

Pas de connexion Supabase ? Configure-la à la main

Dans ton projet Supabase, ouvre SQL Editor. Exécute ces trois fichiers de ton dossier LUMIÈRE, dans cet ordre. Pour chacun, ouvre-le, copie tout, colle-le dans une nouvelle requête et clique sur Run. Chacun peut être relancé sans risque.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Copie ton Project URL et ta Publishable key depuis Connect dans Hostinger, comme indiqué à l'étape suivante. Après avoir créé ton utilisateur admin ci-dessus, ajoute ton e-mail ci-dessous et exécute ceci dans le SQL Editor :

Faire de moi un administrateur

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

Ton e-mail d'admin

you@example.com

Ajoute les variables Supabase sur Hostinger

Ta boutique en ligne lit Supabase via deux valeurs publiques. Dans le tableau de bord de ta Web App, ouvre Environment Variables et ajoute :

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key Supabase

Claude t'a donné les deux valeurs. Elles sont aussi dans Connect.

Ouvrir Connect

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

Valeurs publiques uniquement

N'ajoute jamais ici la Secret key ni la clé service_role de Supabase. Tout ce qui commence par NEXT_PUBLIC_ est visible dans le navigateur.

Enregistre les variables — Hostinger recompile ta boutique avec elles Pas recompilée ? Redéploie depuis Settings & Redeploy Ouvre /admin sur ton adresse en ligne et connecte-toi avec ton e-mail d'admin

Dans l'admin, tu ajoutes et modifies des produits, téléverses des paires de photos OFF/ON et gères le stock et les commandes. Chaque enregistrement met à jour le rail, la boutique et les pages produit.

Connecte ton domaine

Hostinger Your Web App Connect domain

Saisis ton domaine et suis les étapes de connexion Domaine enregistré ailleurs ? Ajoute chez ton registraire les enregistrements DNS qu'affiche Hostinger Garde les enregistrements e-mail existants Attends que le domaine apparaisse comme connecté et que le SSL soit actif

La propagation des changements DNS peut prendre quelques heures — jusqu'à 24 heures.

Connecter un domaine personnalisé à ton site web ou ta Web App

Le guide complet, y compris pour les domaines enregistrés ailleurs.

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

Passe à ton domaine et redéploie

Ta boutique construit ses liens, son sitemap et la connexion sécurisée de l'admin à partir de cette seule adresse. Dans le tableau de bord de ta Web App, ouvre Environment Variables et remplace-la par ton domaine :

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Ton domaine, commençant par https://

Enregistre la variable Redéploie depuis Settings & Redeploy, pour que la nouvelle adresse soit intégrée Attends la fin du build

Tester ta boutique en ligne

Ouvre ton domaine et vérifie :

L'adresse commence par https:// et le cadenas s'affiche

Effleurer le rail allume les lampes, et chaque photo se charge

La boutique et une page produit s'ouvrent, et une lampe est ajoutée au panier

Avec Supabase : tu peux te connecter sur /admin

Une adresse inventée, comme /shop/no-such-lamp, affiche la page introuvable

Ta boutique d'éclairage est en ligne sur ton propre domaine. Pour la modifier plus tard, modifie les produits dans l'admin — ou demande à Claude des changements de code et de les publier : Hostinger recompile ta boutique à chaque push sur main.