Crée avec l'IA un site interactif pour un restaurant de sushis

Claude Desktop

Utilise Claude Code dans l'app de bureau pour configurer et personnaliser le site de ton restaurant.

Télécharger Claude Desktop

https://claude.ai/download

Compte GitHub

Gratuit. Ta propre copie de KAITEN est stockée ici, et Hostinger la déploie depuis ce dépôt.

Créer un compte GitHub

https://github.com/signup

Node.js

Télécharge la version LTS. Claude s'en sert pour installer et vérifier ta boutique.

Télécharger Node.js

https://nodejs.org/en/download

Compte Supabase

Le plan gratuit suffit. Il contient ta carte, tes photos, tes horaires d'ouverture, les commandes et la connexion à l'admin.

Créer un compte Supabase

https://supabase.link/r4gdwhi

Hébergement Hostinger

Tu as besoin d'un hébergement à l'étape 5, quand ta boutique est mise en ligne.

Choisis un plan Hostinger

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

Crée ta propre copie

Ouvrir KAITEN sur GitHub

https://github.com/salhiworks/kaiten-sushi-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 et copie son adresse

Créer un projet Supabase

Ouvrir le tableau de bord Supabase

https://supabase.com/dashboard

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 — Claude n'en a jamais besoin Quand le projet est prêt, copie son Project ID

Supabase Project Settings General

Le Project ID est la seule information du projet dont Claude a besoin. Tu ne crées aucune table et n'écris aucun SQL : Claude configure la base de données à l'Étape 3.

Amène-le 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 KAITEN 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-sushi-restaurant

Ouvre ton dossier KAITEN

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

Demande à Claude de connecter ta boutique

Dans ta session KAITEN, ajoute ton Project ID ci-dessous et envoie :

Connecte KAITEN à Supabase

Claude applique les trois migrations du starter et la carte de départ avec la Supabase CLI, vérifie la sécurité et le stockage, puis te donne les deux valeurs publiques pour Hostinger.

Connect this KAITEN restaurant to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md (step 2, "Make it a real store with Supabase") and docs/SUPABASE.md first, and follow docs/SUPABASE.md's Supabase CLI steps. 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. Use only this project's own pinned Supabase CLI, through npx supabase after npm install — never a global supabase command — always on my hosted project. Never run supabase db reset, supabase migration repair or any command that deletes data, never use --include-seed, and never start a local database or Docker. Never ask me for a password, an access token or a Secret key, and never use --reveal. Do these yourself, and tell me what each one does before you run it: 1. Check that Node.js 22 or newer is installed (if it isn't, stop and tell me how to install it), then run npm install and check that npx supabase --version shows 2.122.0. If it doesn't, stop and tell me. 2. Check that I'm signed in to the Supabase CLI. If I'm not, stop and tell me to run npx supabase login in the Terminal myself, and continue when I say I'm signed in. 3. Link this folder with npx supabase link --project-ref {{PROJECT_REF}}, then show me the project's name and URL and ask me to confirm it's the right one. 4. Show me the project's migration history (npx supabase migration list --linked). If it has migrations that aren't in supabase/migrations, stop and explain what you see. If the history is empty but the table public.dishes already exists, the setup was already run by hand: stop and tell me, and push nothing, because these files must not run twice. 5. Show me what the push would apply (npx supabase db push --linked --dry-run). It must be exactly the three files in supabase/migrations, in order: kaiten_schema, kaiten_seed, kaiten_private_helpers. Then apply them with npx supabase db push --linked, so they are recorded in the project's migration history. They create the tables, the Row Level Security policies, the dish-images storage bucket and the starting menu. There is no separate seed step. 6. Verify the setup with npx supabase db query --linked: Row Level Security is on for all seven tables in public, the public dish-images bucket exists, and there are 5 plate tiers, 4 categories and 8 dishes. Fix nothing by hand: tell me what's wrong. 7. Show me my Project URL and Publishable key (sb_publishable_...) as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger, using npx supabase projects api-keys --project-ref {{PROJECT_REF}}. If no Publishable key is listed, tell me to copy it from Connect in the Supabase Dashboard. 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/SUPABASE.md ("Your admin account"), through npx supabase db query --linked, and check that the row exists. Finally, tell me in plain words what passed and what is still left to do.

Ton Project ID Supabase

abcdefghijklmnopqrst

Claude demande avant chaque action — clique sur Allow. Il s'arrête quand c'est ton tour.

Se connecter à la Supabase CLI

Quand Claude te le demande, lance ceci toi-même, une seule fois — cela ouvre ton navigateur :

Clique sur Terminal dans la barre de titre de ta session Exécute la commande ci-dessous Approuve la connexion dans la fenêtre du navigateur qui s'ouvre Dis à Claude que tu es connecté

npx supabase login

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

Claude ajoute ton e-mail à la liste des administrateurs de la boutique. Tu te connectes à /admin sur ta boutique en ligne à l'étape 5.

La Supabase CLI ne fonctionne pas ? Configure-la à la main

Dans ton projet Supabase, ouvre SQL Editor. Exécute ces trois fichiers de ton dossier KAITEN, une fois chacun et dans cet ordre. Pour chacun, ouvre-le, copie tout, colle-le dans une nouvelle requête et clique sur Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Copie ta Project URL et ta Publishable key depuis Connect — tu les ajouteras dans Hostinger à l'étape 5. Après avoir créé ton utilisateur administrateur ci-dessus, ajoute ton e-mail ci-dessous et lance 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

Décris ton restaurant à Claude

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

Personnaliser mon restaurant de sushis

Change le nom, les textes et le style, garde le tapis roulant et la commande exactement tels quels, et pousse les changements vers ton propre dépôt GitHub.

This folder is my own copy of the KAITEN sushi restaurant. Before you change anything, read README.md ("How it works"), AGENTS.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the website for my restaurant. Restaurant name: {{RESTAURANT_NAME}} Our concept and story: {{RESTAURANT_STORY}} Visual identity: {{VISUAL_STYLE}} Where each change belongs: - The brand mark and its default name: src/components/site/brand-mark.tsx - Homepage and about copy: src/components/home/ and src/app/(store)/about/page.tsx - Colours and fonts: src/app/globals.css and src/app/layout.tsx The restaurant name guests see in the header, footer and page titles, plus the address, phone, opening hours, dishes, photos and plate prices, come from the database. Don't hard-code them: I'll set them in the admin after launch. Tell me which name to enter there. Keep these exactly as they are: - The sushi conveyor belt in src/components/ui/sushi-conveyor-menu.tsx: dragging, flicking, lifting a plate, the plate stack and every animation, timing and hit area - The menu, the order and checkout, pickup ordering, the admin, the Supabase migrations, KAITEN_MODE and the other environment variables - The dependencies: don't add new ones 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. Then summarize what you changed and wait. I may ask for more changes. Only when I say it's ready: make sure .env.local and any other secrets are not committed, commit everything with a clear message and push it 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.

Nom du restaurant

Sushi Nami

Le concept ou l'histoire de ton restaurant

Un comptoir kaiten familial à Lyon depuis 2009, avec du poisson du marché du matin et du riz cuit toutes les heures.

Identité visuelle

Claude modifie la marque, le design et le code. Tes plats, photos, prix des assiettes, catégories, horaires d'ouverture, infos de retrait et commandes se gèrent dans l'admin après le lancement, à l'Étape 5. Vérifie les changements de Claude, demande-en d'autres dans la même session et dis à Claude quand c'est prêt : il fait un seul push vers ton dépôt GitHub, que l'Étape 5 déploie.

Créer ta Web App

Pas encore d'hébergement ? Prends un plan dans les Prérequis.

Hostinger Websites Create site Web App

Si Hostinger te propose de choisir un domaine, prends ton propre domaine — sinon ton app démarre sur un domaine temporaire Choisis Import Git Repository Autorise GitHub et sélectionne ta propre copie de KAITEN, avec les changements que Claude a poussés à l'Étape 4

Domaine enregistré ailleurs ? Ajoute chez ton registrar les enregistrements DNS qu'affiche Hostinger, et garde tes enregistrements e-mail existants.

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 ou plus récent Vérifie que la commande de build est npm run build et la commande de démarrage npm start — jamais npm run build:demo, qui génère la démo verrouillée

Avant de déployer, ouvre Environment variables, clique sur Edit et ajoute ces trois variables. KAITEN_MODE active les vraies commandes et l'admin — sans elle, ton site est généré comme la démo. Les deux valeurs Supabase sont celles que Claude t'a montrées à l'Étape 3. Elles sont intégrées à la boutique : en changer une plus tard nécessite de redéployer.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

Le mot live, en minuscules

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key Supabase

Les valeurs Supabase se trouvent 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.

Clique sur Finish, puis sur Deploy, et attends la fin du build

Ton app tourne sur un domaine temporaire ?

Pour passer à ton propre domaine, ouvre ta Web App dans Hostinger et connecte le domaine à cet endroit, en ajoutant chez ton registraire les enregistrements DNS affichés. KAITEN ne stocke pas sa propre adresse : il n'y a rien à changer et aucun redéploiement n'est nécessaire.

Configure ton restaurant

Ouvre /admin sur ta boutique en ligne et connecte-toi avec ton e-mail d'admin. Tout ce que tu enregistres dans l'admin va directement dans ta base de données — sans modifier le code.

Dans Restaurant, choisis d'abord ton fuseau horaire sous Hours are in, puis renseigne ton Restaurant name, l'adresse de retrait, le téléphone et les horaires d'ouverture, et clique sur Save restaurant details Dans Plates & prices, fixe le prix de chaque couleur d'assiette et clique sur Save plate prices — tous les plats de cette assiette suivent Dans Menu, clique sur Edit sur un plat, modifie ses informations, utilise Replace photo pour ta propre photo et clique sur Save changes. Utilise Add dish pour en ajouter de nouveaux Désactive On menu pour les plats que tu ne sers pas, et In stock quand l'un d'eux est épuisé pour la journée Dans Categories, renomme, réordonne ou ajoute les rubriques de ta carte

Remplace les photos de départ avant d'ouvrir

Les huit photos de plats de départ viennent de la démo du composant d'origine, et leurs droits ne sont pas vérifiés. Utilise des photos qui t'appartiennent ou sous licence.

Ce qu'il faut pour les photos de tes plats

Carrées, au moins 800 × 800 px

Prises du dessus, avec l'assiette qui remplit le cadre

Un fond transparent (PNG ou WebP), pour que le tapis apparaisse autour de l'assiette

Jusqu'à 5 MB

Vérifier et lancer

Ouvre ton domaine — le cadenas s'affiche, le tapis tourne et l'en-tête indique si tu es ouvert Ajoute quelques assiettes à ta commande, clique sur Review order, puis sur Checkout for pickup Saisis un nom et un numéro de téléphone et clique sur Place pickup order Dans l'admin, ouvre Orders, trouve la commande et clique sur Start preparing Sur la page de confirmation de la commande, clique sur Refresh status : elle affiche maintenant Preparing

La boutique n'accepte des commandes que pendant tes horaires d'ouverture et tant que Taking orders est activé, en haut de chaque page de l'admin. Les clients paient au retrait : il n'y a pas de paiement par carte en ligne.

Plus tard, modifie les plats, photos, prix et horaires dans l'admin — c'est en ligne immédiatement. Pour des changements de design ou de code, demande à Claude et approuve le push : Hostinger reconstruit ta boutique à chaque push sur main.