Buat Website Restoran Sushi Interaktif dengan AI

Claude Desktop

Gunakan Claude Code di aplikasi desktop untuk menyiapkan dan menyesuaikan website restoran Anda.

Unduh Claude Desktop

https://claude.ai/download

Akun GitHub

Gratis. Salinan KAITEN milik Anda tersimpan di sini, dan Hostinger melakukan deploy dari sini.

Buat Akun GitHub

https://github.com/signup

Node.js

Unduh rilis LTS. Claude memakainya untuk memasang dan memeriksa toko Anda.

Unduh Node.js

https://nodejs.org/en/download

Akun Supabase

Paket gratis sudah cukup. Paket ini menyimpan menu, foto, jam buka, pesanan, dan login admin Anda.

Buat Akun Supabase

https://supabase.link/r4gdwhi

Hosting Hostinger

Anda butuh hosting di Langkah 5, saat toko Anda live.

Pilih Paket Hostinger

Gunakan paket Unlimited atau paket Cloud — KAITEN di-deploy sebagai Node.js Web App, bukan situs statis.

Buat Salinan Anda Sendiri

Buka KAITEN di GitHub

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

Klik Use this template, lalu Create a new repository Beri nama dan pilih Public atau Private Klik Create repository dan salin alamatnya

Buat Proyek Supabase

Buka Dashboard Supabase

https://supabase.com/dashboard

Klik New project — region apa pun dan paket Free sudah cukup Simpan kata sandi database di tempat yang aman — Claude tidak pernah membutuhkannya Setelah proyek siap, salin Project ID-nya

Supabase Project Settings General

Project ID adalah satu-satunya detail proyek yang dibutuhkan Claude. Anda tidak perlu membuat tabel atau menulis SQL apa pun: Claude menyiapkan database di Langkah 3.

Bawa ke Claude Desktop

Claude Desktop Code Local

Mulai sesi Local di folder seperti Documents, tambahkan alamat repositori Anda di bawah, lalu kirim:

Clone Salinan Anda

Mengunduh repository KAITEN milik Anda ke subfolder baru dan memeriksa bahwa Claude dapat memperbaruinya.

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.

Alamat repository Anda

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

Buka Folder KAITEN Anda

Mulai sesi Local baru Buka folder yang baru dibuat Claude — yang berisi README.md Jika Claude Desktop bertanya, percayai folder tersebut

Minta Claude Menghubungkan Toko Anda

Di sesi KAITEN Anda, tambahkan Project ID Anda di bawah, lalu kirim:

Hubungkan KAITEN ke Supabase

Claude menerapkan tiga migrasi dan menu awal dari starter dengan Supabase CLI, memeriksa keamanan dan penyimpanan, lalu memberi Anda dua nilai publik untuk 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.

Project ID Supabase Anda

abcdefghijklmnopqrst

Claude bertanya sebelum setiap tindakan — klik Allow. Claude berhenti saat giliran Anda.

Masuk ke Supabase CLI

Saat Claude meminta, jalankan ini sendiri sekali saja — ini membuka browser Anda:

Klik Terminal di bilah judul sesi Anda Jalankan perintah di bawah Setujui login di jendela browser yang terbuka Beri tahu Claude bahwa Anda sudah masuk

npx supabase login

Buat Akun Admin Anda

Supabase Authentication Users

Klik Add user, lalu Create new user Masukkan email Anda dan kata sandi yang kuat Biarkan Auto Confirm User tetap dicentang, lalu buat user Beri tahu Claude email admin Anda — jangan pernah kata sandinya

Supabase Authentication Sign In / Providers

Matikan Allow new users to sign up dan simpan — toko ini tidak punya akun pelanggan

Claude menambahkan email Anda ke daftar administrator toko. Anda masuk di /admin pada toko live Anda di Langkah 5.

Supabase CLI Tidak Berfungsi? Siapkan Secara Manual

Di proyek Supabase Anda, buka SQL Editor. Jalankan tiga file ini dari folder KAITEN Anda, masing-masing sekali dan sesuai urutan ini. Untuk setiap file, buka, salin semuanya, tempel ke query baru, lalu klik Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Salin Project URL dan Publishable key Anda dari Connect — Anda menambahkannya ke Hostinger di Langkah 5. Setelah membuat pengguna admin di atas, tambahkan email Anda di bawah dan jalankan ini di SQL Editor:

Jadikan Saya Administrator

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

Email admin Anda

you@example.com

Jelaskan Restoran Anda kepada Claude

Isi yang Anda ketahui — biarkan sisanya kosong, dan Claude akan mempertahankan versi KAITEN. Lalu kirimkan di sesi KAITEN Anda:

Sesuaikan Restoran Sushi Saya

Mengganti nama, teks, dan tampilan, mempertahankan conveyor belt dan pemesanan persis seperti apa adanya, lalu melakukan push perubahan ke repository GitHub milik Anda.

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.

Nama restoran

Sushi Nami

Konsep atau kisah restoran Anda

Konter kaiten milik keluarga di Lyon sejak 2009, dengan ikan dari pasar pagi dan nasi yang dimasak setiap jam.

Identitas visual

Claude mengubah brand, desain, dan kode. Hidangan, foto, harga piring, kategori, jam buka, detail pengambilan, dan pesanan Anda dikelola di admin setelah peluncuran, di Langkah 5. Tinjau perubahan Claude, minta perubahan lain di sesi yang sama, dan beri tahu Claude saat semuanya siap: Claude melakukan push sekali ke repository GitHub Anda, yang di-deploy di Langkah 5.

Buat Web App Anda

Belum punya hosting? Ambil paket di Persyaratan.

Hostinger Websites Create site Web App

Jika Hostinger menawarkan pilihan domain, pilih domain Anda sendiri — jika tidak, aplikasi Anda dimulai di domain sementara Pilih Import Git Repository Otorisasi GitHub dan pilih salinan KAITEN milik Anda, dengan perubahan yang di-push Claude di Langkah 4

Domain terdaftar di tempat lain? Tambahkan record DNS yang ditampilkan Hostinger di registrar Anda, dan pertahankan record email yang sudah ada.

Konfigurasi & Deploy

Pertahankan pengaturan Next.js yang terdeteksi oleh Hostinger — Hostinger sendiri yang membangun dan menjalankan toko Pilih Node.js 22 atau yang lebih baru Pastikan perintah build adalah npm run build dan perintah start adalah npm start — jangan pernah npm run build:demo, yang membangun demo terkunci

Sebelum deploy, buka Environment variables, klik Edit, lalu tambahkan tiga variabel ini. KAITEN_MODE mengaktifkan pemesanan sungguhan dan admin — tanpanya, situs Anda dibangun sebagai demo. Dua nilai Supabase adalah nilai yang ditunjukkan Claude di Langkah 3. Nilai-nilai ini tertanam di dalam toko, jadi mengubah salah satunya nanti memerlukan redeploy.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

Kata live, dalam huruf kecil

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key Supabase

Nilai Supabase ada di Connect.

Buka Connect

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

Hanya nilai publik

Jangan pernah menambahkan Secret key atau service_role key Supabase di sini. Apa pun yang diawali NEXT_PUBLIC_ terlihat di browser.

Klik Finish, lalu Deploy, dan tunggu hingga build selesai

Berjalan di Domain Sementara?

Untuk beralih ke domain Anda sendiri, buka Web App Anda di Hostinger dan hubungkan domainnya di sana, lalu tambahkan record DNS yang ditampilkan di registrar Anda. KAITEN tidak menyimpan alamatnya sendiri, jadi tidak ada yang perlu diubah dan tidak perlu redeploy.

Siapkan Restoran Anda

Buka /admin di toko live Anda dan masuk dengan email admin Anda. Semua yang Anda simpan di admin langsung masuk ke database Anda — tanpa perubahan kode.

Di Restaurant, pilih zona waktu Anda di Hours are in terlebih dahulu, lalu atur Restaurant name, alamat pengambilan, telepon, dan jam buka, lalu klik Save restaurant details Di Plates & prices, atur harga setiap warna piring lalu klik Save plate prices — setiap hidangan di piring itu ikut menyesuaikan Di Menu, klik Edit pada sebuah hidangan, ubah detailnya, gunakan Replace photo untuk foto Anda sendiri, lalu klik Save changes. Gunakan Add dish untuk hidangan baru Matikan On menu untuk hidangan yang tidak Anda sajikan, dan In stock saat suatu hidangan habis untuk hari itu Di Categories, ganti nama, ubah urutan, atau tambahkan bagian menu Anda

Ganti foto awal sebelum Anda buka

Delapan foto hidangan awal berasal dari demo komponen aslinya, dan hak penggunaannya belum diverifikasi. Gunakan foto milik Anda sendiri atau yang sudah Anda lisensikan.

Yang Dibutuhkan Foto Hidangan Anda

Persegi, minimal 800 × 800 px

Diambil dari atas, dengan piring memenuhi bingkai

Latar belakang transparan (PNG atau WebP), agar belt terlihat di sekitar piring

Maksimal 5 MB

Verifikasi & Luncurkan

Buka domain Anda — ikon gembok muncul, belt berputar, dan header menampilkan status buka Anda Ambil beberapa piring ke pesanan Anda, klik Review order, lalu Checkout for pickup Masukkan nama dan nomor telepon, lalu klik Place pickup order Di admin, buka Orders, temukan pesanannya, lalu klik Start preparing Di halaman konfirmasi pesanan, klik Refresh status: sekarang statusnya Preparing

Toko hanya menerima pesanan selama jam buka Anda dan selama Taking orders aktif, di bagian atas setiap halaman admin. Tamu membayar saat mengambil pesanan: tidak ada pembayaran kartu online.

Nanti, ubah hidangan, foto, harga, dan jam buka di admin — perubahannya langsung live. Untuk perubahan desain atau kode, minta Claude lalu setujui push-nya: Hostinger membangun ulang toko Anda setiap kali ada push ke main.