أنشئ موقعًا تفاعليًا لمطعم سوشي بالذكاء الاصطناعي

Claude Desktop

استخدم Claude Code في تطبيق سطح المكتب لإعداد موقع مطعمك وتخصيصه.

نزّل Claude Desktop

https://claude.ai/download

حساب GitHub

مجاني. هنا توجد نسختك الخاصة من KAITEN، ومنها ينشر Hostinger موقعك.

أنشئ حساب GitHub

https://github.com/signup

Node.js

نزّل إصدار LTS. يستخدمه Claude لتثبيت متجرك وفحصه.

نزّل Node.js

https://nodejs.org/en/download

حساب Supabase

الخطة المجانية تكفي. فهي تحفظ قائمة طعامك وصورك ومواعيد العمل والطلبات وتسجيل دخول الإدارة.

أنشئ حساب Supabase

https://supabase.link/r4gdwhi

استضافة Hostinger

تحتاج إلى الاستضافة في الخطوة 5، عندما يصبح متجرك مباشرًا.

اختر باقة Hostinger

استخدم باقة Unlimited أو باقة Cloud — يُنشر KAITEN كـ Node.js Web App، وليس كموقع ثابت.

أنشئ نسختك الخاصة

افتح KAITEN على GitHub

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

انقر على Use this template، ثم على Create a new repository سمِّه واختر Public أو Private انقر على Create repository وانسخ عنوانه

أنشئ مشروع Supabase

افتح لوحة تحكم Supabase

https://supabase.com/dashboard

انقر على New project — أي منطقة والباقة Free مناسبتان احفظ كلمة مرور قاعدة البيانات في مكان آمن — لن يحتاج إليها Claude أبدًا عندما يصبح المشروع جاهزًا، انسخ Project ID الخاص به

Supabase Project Settings General

Project ID هو التفصيل الوحيد من مشروعك الذي يحتاجه Claude. لن تنشئ أي جداول ولن تكتب أي SQL: يُعدّ Claude قاعدة البيانات في الخطوة 3.

انقله إلى Claude Desktop

Claude Desktop Code Local

ابدأ جلسة Local في مجلد مثل Documents، وأضف عنوان مستودعك أدناه، ثم أرسل:

استنسخ نسختك

ينزّل مستودع KAITEN الخاص بك في مجلد فرعي جديد ويتحقق من قدرة Claude على تحديثه.

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.

عنوان مستودعك

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

افتح مجلد KAITEN الخاص بك

ابدأ جلسة Local جديدة افتح المجلد الذي أنشأه Claude للتو — المجلد الذي يحتوي على README.md إذا سألك Claude Desktop، فاختر الوثوق بالمجلد

اطلب من Claude ربط متجرك

في جلسة KAITEN الخاصة بك، أضف Project ID أدناه ثم أرسل:

اربط KAITEN بـ Supabase

يطبّق Claude عمليات الترحيل الثلاث الخاصة بالقالب وقائمة الطعام الأولية باستخدام Supabase CLI، ويتحقق من الأمان والتخزين، ثم يعطيك القيمتين العامتين اللازمتين لـ 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

abcdefghijklmnopqrst

يسألك Claude قبل كل إجراء — انقر على Allow. ويتوقف عندما يحين دورك.

سجّل الدخول إلى Supabase CLI

عندما يطلب Claude ذلك، شغّل هذا بنفسك مرة واحدة — سيفتح متصفحك:

انقر على Terminal في شريط عنوان جلستك شغّل الأمر أدناه وافِق على تسجيل الدخول في نافذة المتصفح التي تُفتح أخبر Claude أنك سجّلت الدخول

npx supabase login

أنشئ حساب المسؤول

Supabase Authentication Users

انقر على Add user، ثم على Create new user أدخل بريدك الإلكتروني وكلمة مرور قوية اترك Auto Confirm User محددًا وأنشئ المستخدم أخبر Claude ببريد المسؤول الإلكتروني — وليس بكلمة المرور أبدًا

Supabase Authentication Sign In / Providers

أوقف Allow new users to sign up واحفظ — لا توجد حسابات عملاء في المتجر

يضيف Claude بريدك الإلكتروني إلى قائمة مسؤولي المتجر. ستسجّل الدخول عبر /admin في متجرك المباشر في الخطوة 5.

لا تعمل Supabase CLI؟ أعدّه يدويًا

في مشروع Supabase الخاص بك، افتح SQL Editor. شغّل هذه الملفات الثلاثة من مجلد KAITEN، كل ملف مرة واحدة وبهذا الترتيب. لكل ملف: افتحه، وانسخ كل محتواه، والصقه في استعلام جديد، ثم انقر على Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

انسخ Project URL وPublishable key من Connect — ستضيفهما إلى Hostinger في الخطوة 5. بعد إنشاء مستخدم المسؤول أعلاه، أضف بريدك الإلكتروني أدناه ثم شغّل SQL هذا في SQL Editor:

اجعلني مسؤولًا

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

بريد المسؤول الإلكتروني

you@example.com

صِف مطعمك لـ Claude

املأ ما تعرفه — واترك الباقي فارغًا ليحتفظ Claude بنسخة KAITEN منه. ثم أرسله في جلسة KAITEN:

خصّص مطعم السوشي الخاص بي

يغيّر الاسم والنصوص والمظهر، ويُبقي السير الناقل والطلبات كما هي تمامًا، ثم يدفع التغييرات إلى مستودعك الخاص على 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.

اسم المطعم

Sushi Nami

فكرة مطعمك أو قصته

مطعم كايتن عائلي في ليون منذ 2009، بأسماك من سوق الصباح وأرز يُطهى كل ساعة.

الهوية البصرية

يغيّر Claude العلامة التجارية والتصميم والكود. أما أطباقك وصورك وأسعار الصحون والفئات ومواعيد العمل وتفاصيل الاستلام والطلبات فتُدار من لوحة الإدارة بعد الإطلاق، في الخطوة 5. راجع تغييرات Claude، واطلب المزيد في الجلسة نفسها، وأخبر Claude عندما يصبح كل شيء جاهزًا: فيدفع مرة واحدة إلى مستودعك على GitHub، والذي تنشره الخطوة 5.

أنشئ Web App الخاص بك

لا توجد استضافة بعد؟ احصل على باقة من المتطلبات.

Hostinger Websites Create site Web App

إذا عرضت عليك Hostinger اختيار نطاق، فاختر نطاقك الخاص — وإلا فسيبدأ تطبيقك على نطاق مؤقت اختر Import Git Repository امنح الإذن لـ GitHub واختر نسختك الخاصة من KAITEN، مع التغييرات التي دفعها Claude في الخطوة 4

نطاقك مسجّل في مكان آخر؟ أضف سجلات DNS التي يعرضها Hostinger لدى مسجّل النطاق، واحتفظ بسجلات البريد الإلكتروني الحالية.

اضبط الإعدادات وانشر

أبقِ إعدادات Next.js التي يكتشفها Hostinger — فهو يبني المتجر ويشغّله بنفسه اختر Node.js 22 أو أحدث تأكّد من أن أمر البناء هو npm run build وأمر التشغيل هو npm start — وليس أبدًا npm run build:demo، الذي يبني العرض التجريبي المقفل

قبل النشر، افتح Environment variables، وانقر على Edit وأضف هذه الثلاثة. يفعّل KAITEN_MODE الطلبات الحقيقية ولوحة الإدارة — وبدونه يُبنى موقعك كعرض تجريبي. وقيمتا Supabase هما اللتان عرضهما Claude عليك في الخطوة 3. تُضمَّن هذه القيم في المتجر عند بنائه، لذا يحتاج تغيير أيٍّ منها لاحقًا إلى إعادة النشر.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

الكلمة live بأحرف صغيرة

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

قيم Supabase موجودة في Connect.

افتح Connect

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

قيم عامة فقط

لا تضف Secret key أو مفتاح service_role الخاص بـ Supabase هنا أبدًا. كل ما يبدأ بـ NEXT_PUBLIC_ يظهر في المتصفح.

انقر على Finish، ثم Deploy، وانتظر حتى ينتهي البناء

هل يعمل موقعك على نطاق مؤقت؟

للانتقال إلى نطاقك الخاص، افتح Web App الخاص بك في Hostinger واربط النطاق هناك، مع إضافة أي سجلات DNS يعرضها لدى مسجّل نطاقك. لا يخزّن KAITEN عنوانه بنفسه، لذا لا يوجد ما تغيّره ولا حاجة إلى إعادة النشر.

أعدّ مطعمك

افتح /admin على متجرك المباشر وسجّل الدخول ببريد الإدارة. كل ما تحفظه في لوحة الإدارة يذهب مباشرة إلى قاعدة بياناتك — دون أي تغيير في الكود.

في Restaurant، اختر أولًا منطقتك الزمنية تحت Hours are in، ثم اضبط Restaurant name وعنوان الاستلام والهاتف ومواعيد العمل، وانقر على Save restaurant details في Plates & prices، اضبط سعر كل لون من ألوان الصحون وانقر على Save plate prices — فيتبعه كل طبق على ذلك الصحن في Menu، انقر على Edit عند أحد الأطباق، وغيّر تفاصيله، واستخدم Replace photo لوضع صورتك الخاصة، ثم انقر على Save changes. استخدم Add dish للأطباق الجديدة أوقف On menu للأطباق التي لا تقدّمها، وأوقف In stock عندما ينفد أحدها لذلك اليوم في Categories، أعد تسمية أقسام قائمتك أو أعد ترتيبها أو أضف أقسامًا جديدة

استبدل الصور الأولية قبل الافتتاح

صور الأطباق الأولية الثماني مأخوذة من العرض التجريبي للمكوّن الأصلي، وحقوقها غير مؤكَّدة. استخدم صورًا تملكها أو لديك ترخيص لها.

ما تحتاجه صور أطباقك

مربعة، بحجم 800 × 800 px على الأقل

ملتقطة من الأعلى، والصحن يملأ الإطار

خلفية شفافة (PNG أو WebP)، ليظهر السير حول الصحن

حتى 5 MB

تحقّق وأطلق

افتح نطاقك — يظهر رمز القفل، ويدور السير، وتعرض الترويسة حالة فتح مطعمك ارفع بضعة صحون إلى طلبك، وانقر على Review order، ثم على Checkout for pickup أدخل اسمًا ورقم هاتف وانقر على Place pickup order في لوحة الإدارة، افتح Orders، وابحث عن الطلب وانقر على Start preparing في صفحة تأكيد الطلب، انقر على Refresh status: تظهر الآن Preparing

لا يستقبل المتجر الطلبات إلا خلال مواعيد عملك وما دام Taking orders مفعّلًا، أعلى كل صفحة في لوحة الإدارة. يدفع الزبائن عند الاستلام: لا توجد مدفوعات بالبطاقة عبر الإنترنت.

لاحقًا، غيّر الأطباق والصور والأسعار والمواعيد من لوحة الإدارة — فتظهر على الموقع فورًا. ولتغييرات التصميم أو الكود، اطلب من Claude ووافق على الدفع: يعيد Hostinger بناء متجرك عند كل دفع إلى main.