Yapay Zekâ ile Etkileşimli Bir Suşi Restoranı Web Sitesi Oluşturun

Claude Desktop

Restoran web sitenizi kurmak ve özelleştirmek için masaüstü uygulamasındaki Claude Code'u kullanın.

Claude Desktop'ı İndirin

https://claude.ai/download

GitHub hesabı

Ücretsiz. KAITEN'in size ait kopyası burada durur ve Hostinger onu buradan yayına alır.

GitHub Hesabı Oluşturun

https://github.com/signup

Node.js

LTS sürümünü indirin. Claude mağazanızı kurmak ve kontrol etmek için kullanır.

Node.js'i İndirin

https://nodejs.org/en/download

Supabase hesabı

Ücretsiz paket yeterlidir. Menünüz, fotoğraflarınız, çalışma saatleriniz, siparişleriniz ve yönetici girişiniz burada tutulur.

Supabase Hesabı Oluşturun

https://supabase.link/r4gdwhi

Hostinger barındırma

Hostinge Adım 5'te, mağazanız yayına girerken ihtiyacınız olur.

Bir Hostinger Paketi Seçin

Unlimited paketini ya da bir Cloud paketini kullanın — KAITEN statik bir web sitesi olarak değil, bir Node.js Web App olarak yayına alınır.

Kendi Kopyanızı Oluşturun

KAITEN'i GitHub'da Açın

https://github.com/salhiworks/kaiten-sushi-store

Use this template'e, ardından Create a new repository'ye tıklayın Bir ad verin ve Public ya da Private seçin Create repository'ye tıklayın ve adresini kopyalayın

Bir Supabase Projesi Oluşturun

Supabase Dashboard'u Açın

https://supabase.com/dashboard

New project'e tıklayın — herhangi bir bölge ve Free paketi uygundur Veritabanı şifresini güvenli bir yere kaydedin — Claude'un buna hiç ihtiyacı olmaz Proje hazır olduğunda Project ID'sini kopyalayın

Supabase Project Settings General

Project ID, Claude'un ihtiyaç duyduğu tek proje bilgisidir. Hiç tablo oluşturmaz ve SQL yazmazsınız: Claude veritabanını 3. Adımda kurar.

Claude Desktop'a Getirin

Claude Desktop Code Local

Documents gibi bir klasörde bir Local oturumu başlatın, deponuzun adresini aşağıya ekleyin ve gönderin:

Kopyanızı Klonlayın

Size ait KAITEN deposunu yeni bir alt klasöre indirir ve Claude'un onu güncelleyebildiğini kontrol eder.

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.

Deponuzun adresi

https://github.com/your-name/my-sushi-restaurant

KAITEN Klasörünüzü Açın

Yeni bir Local oturumu başlatın Claude'un az önce oluşturduğu klasörü açın — içinde README.md olanı Claude Desktop sorarsa klasöre güvenin

Claude'dan Mağazanızı Bağlamasını İsteyin

KAITEN oturumunuzda aşağıya Project ID'nizi ekleyin ve gönderin:

KAITEN'i Supabase'e Bağlayın

Claude, başlangıç projesinin üç migration'ını ve başlangıç menüsünü Supabase CLI ile uygular, güvenliği ve depolamayı kontrol eder, ardından size Hostinger için iki herkese açık değeri verir.

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.

Supabase Project ID'niz

abcdefghijklmnopqrst

Claude her işlemden önce sorar — Allow'a tıklayın. Sıra size geldiğinde durur.

Supabase CLI'a Giriş Yapın

Claude istediğinde bunu bir kez kendiniz çalıştırın — tarayıcınızı açar:

Oturumunuzun başlık çubuğundaki Terminal'e tıklayın Aşağıdaki komutu çalıştırın Açılan tarayıcı penceresinde girişi onaylayın Claude'a giriş yaptığınızı söyleyin

npx supabase login

Yönetici Hesabınızı Oluşturun

Supabase Authentication Users

Add user'a, ardından Create new user'a tıklayın E-postanızı ve güçlü bir şifre girin Auto Confirm User işaretli kalsın ve kullanıcıyı oluşturun Claude'a yönetici e-postanızı söyleyin — asla şifrenizi değil

Supabase Authentication Sign In / Providers

Allow new users to sign up'ı kapatın ve kaydedin — mağazada müşteri hesabı yoktur

Claude e-postanızı mağazanın yönetici listesine ekler. Adım 5'te canlı mağazanızda /admin adresinden giriş yaparsınız.

Supabase CLI Çalışmıyor mu? Elle Kurun

Supabase projenizde SQL Editor'ı açın. KAITEN klasörünüzdeki bu üç dosyayı, her birini bir kez ve bu sırayla çalıştırın. Her biri için dosyayı açın, tamamını kopyalayın, yeni bir sorguya yapıştırın ve Run'a tıklayın.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Project URL ve Publishable key'inizi Connect'ten kopyalayın — bunları Adım 5'te Hostinger'a eklersiniz. Yukarıda yönetici kullanıcınızı oluşturduktan sonra aşağıya e-postanızı ekleyin ve bunu SQL Editor'da çalıştırın:

Beni Yönetici Yap

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

Yönetici e-postanız

you@example.com

Restoranınızı Claude'a Anlatın

Bildiklerinizi doldurun — gerisini boş bırakın, Claude KAITEN'in sürümünü korur. Ardından KAITEN oturumunuzda gönderin:

Suşi Restoranımı Özelleştir

Adı, metinleri ve görünümü yeniden markalar, konveyör bandı ve sipariş akışını olduğu gibi korur ve değişiklikleri size ait GitHub deposuna gönderir.

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.

Restoran adı

Sushi Nami

Restoranınızın konsepti veya hikâyesi

2009'dan beri Lyon'da hizmet veren, balığını sabah pazarından alan ve pirincini her saat taze pişiren bir aile işletmesi kaiten tezgâhı.

Görsel kimlik

Claude markayı, tasarımı ve kodu değiştirir. Yemekleriniz, fotoğraflarınız, tabak fiyatlarınız, kategorileriniz, çalışma saatleriniz, gel-al bilgileriniz ve siparişleriniz yayına aldıktan sonra 5. Adımda yönetici panelinden yönetilir. Claude'un değişikliklerini gözden geçirin, aynı oturumda daha fazlasını isteyin ve hazır olduğunda Claude'a söyleyin: Claude, 5. Adımda yayına alınacak GitHub deponuza bir kez gönderir.

Web App'inizi Oluşturun

Henüz hosting'iniz yok mu? Gereksinimler bölümünden bir paket edinin.

Hostinger Websites Create site Web App

Hostinger alan adı seçimi sunarsa kendi alan adınızı seçin — aksi halde uygulamanız geçici bir alan adında başlar Import Git Repository'yi seçin GitHub'ı yetkilendirin ve Claude'un 4. Adımda gönderdiği değişiklikleri içeren KAITEN kopyanızı seçin

Alan adınız başka bir yerde mi kayıtlı? Hostinger'ın gösterdiği DNS kayıtlarını kayıt şirketinize ekleyin ve mevcut e-posta kayıtlarınızı koruyun.

Yapılandırın ve Dağıtın

Hostinger'ın algıladığı Next.js ayarlarını koruyun — mağazayı kendisi build eder ve başlatır Node.js 22 veya daha yenisini seçin Derleme komutunun npm run build, başlatma komutunun npm start olduğundan emin olun — asla kilitli demoyu derleyen npm run build:demo değil

Yayına almadan önce Environment variables bölümünü açın, Edit'e tıklayın ve şu üçünü ekleyin. KAITEN_MODE gerçek siparişleri ve yönetici panelini açar — o olmadan siteniz demo olarak derlenir. İki Supabase değeri, Claude'un size 3. Adımda gösterdikleridir. Bunlar mağazanın içine derlenir, bu yüzden birini sonradan değiştirmek yeniden yayına almayı gerektirir.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

live kelimesi, küçük harflerle

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

Supabase değerleri Connect'te bulunur.

Connect'i açın

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

Yalnızca herkese açık değerler

Supabase Secret key veya service_role anahtarını buraya asla eklemeyin. NEXT_PUBLIC_ ile başlayan her şey tarayıcıda görünür.

Finish'e, ardından Deploy'a tıklayın ve build'in bitmesini bekleyin

Geçici Bir Alan Adında mı Çalışıyor?

Kendi alan adınıza geçmek için Hostinger'da Web App'inizi açın ve alan adını orada bağlayın; gösterdiği DNS kayıtlarını alan adı kayıt firmanıza ekleyin. KAITEN kendi adresini saklamaz, bu yüzden değiştirilecek bir şey yoktur ve yeniden yayına almak gerekmez.

Restoranınızı Kurun

Canlı mağazanızda /admin sayfasını açın ve yönetici e-postanızla giriş yapın. Yönetici panelinde kaydettiğiniz her şey doğrudan veritabanınıza gider — kod değişikliği gerekmez.

Restaurant bölümünde önce Hours are in altından saat diliminizi seçin, ardından Restaurant name, gel-al adresi, telefon ve çalışma saatlerinizi girin ve Save restaurant details'a tıklayın Plates & prices bölümünde her tabak renginin fiyatını belirleyin ve Save plate prices'a tıklayın — o tabaktaki her yemek bu fiyatı izler Menu bölümünde bir yemekte Edit'e tıklayın, bilgilerini değiştirin, kendi fotoğrafınız için Replace photo'yu kullanın ve Save changes'a tıklayın. Yenileri için Add dish'i kullanın Sunmadığınız yemeklerde On menu'yü, gün içinde tükenen bir yemekte ise In stock'u kapatın Categories bölümünde menünüzün bölümlerini yeniden adlandırın, yeniden sıralayın veya yenilerini ekleyin

Açılıştan önce başlangıç fotoğraflarını değiştirin

Sekiz başlangıç yemek fotoğrafı orijinal bileşenin demosundan gelir ve hakları doğrulanmamıştır. Size ait veya lisansladığınız fotoğrafları kullanın.

Yemek Fotoğraflarınızın Gereksinimleri

Kare, en az 800 × 800 px

Yukarıdan çekilmiş, tabak kareyi dolduracak şekilde

Şeffaf arka plan (PNG veya WebP), böylece bant tabağın etrafında görünür

En fazla 5 MB

Doğrulayın ve Yayına Alın

Alan adınızı açın — asma kilit görünür, bant döner ve üst bilgi alanı çalışma durumunuzu gösterir Birkaç tabağı siparişinize alın, Review order'a, ardından Checkout for pickup'a tıklayın Bir ad ve telefon numarası girin ve Place pickup order'a tıklayın Yönetici panelinde Orders'ı açın, siparişi bulun ve Start preparing'e tıklayın Siparişin onay sayfasında Refresh status'a tıklayın: artık Preparing gösterir

Mağaza yalnızca çalışma saatlerinizde ve her yönetici sayfasının üstündeki Taking orders açıkken sipariş alır. Misafirler siparişi teslim alırken öder: çevrim içi kart ödemesi yoktur.

Daha sonra yemekleri, fotoğrafları, fiyatları ve saatleri yönetici panelinden değiştirin — hemen yayına girer. Tasarım veya kod değişiklikleri için Claude'a sorun ve gönderimi onaylayın: Hostinger, main'e yapılan her gönderimde mağazanızı yeniden derler.