AI से एक इंटरैक्टिव सुशी रेस्टोरेंट वेबसाइट बनाएँ

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 के रूप में डिप्लॉय होता है, स्टैटिक वेबसाइट के रूप में नहीं।

अपनी खुद की कॉपी बनाएँ

GitHub पर KAITEN खोलें

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

Claude को प्रोजेक्ट की सिर्फ़ Project ID चाहिए। आपको कोई टेबल नहीं बनानी और कोई SQL नहीं लिखना है: Claude चरण 3 में डेटाबेस सेट अप करता है।

इसे Claude Desktop में लाएँ

Claude Desktop Code Local

Documents जैसे किसी फ़ोल्डर में एक Local सेशन शुरू करें, नीचे अपनी रिपॉज़िटरी का पता जोड़ें और भेजें:

अपनी कॉपी क्लोन करें

आपकी अपनी 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.

आपका Supabase Project ID

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 आपका ईमेल स्टोर की एडमिनिस्ट्रेटर सूची में जोड़ देता है। आप चरण 5 में अपने लाइव स्टोर पर /admin पर साइन इन करेंगे।

Supabase CLI काम नहीं कर रहा? इसे हाथ से सेट अप करें

अपने Supabase प्रोजेक्ट में SQL Editor खोलें। अपने KAITEN फ़ोल्डर से ये तीन फ़ाइलें इसी क्रम में चलाएँ, हर फ़ाइल सिर्फ़ एक बार। हर फ़ाइल को खोलें, सब कॉपी करें, नई query में पेस्ट करें और Run पर क्लिक करें।

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Connect से अपनी Project URL और Publishable key कॉपी करें — इन्हें आप चरण 5 में Hostinger में जोड़ेंगे। ऊपर अपना एडमिन उपयोगकर्ता बनाने के बाद, नीचे अपना ईमेल डालें और यह 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 में पुश किए बदलाव हैं

डोमेन कहीं और रजिस्टर्ड है? Hostinger जो DNS रिकॉर्ड दिखाता है, उन्हें अपने रजिस्ट्रार पर जोड़ें, और अपने मौजूदा ईमेल रिकॉर्ड बनाए रखें।

कॉन्फ़िगर और डिप्लॉय करें

Hostinger जो Next.js सेटिंग्स पहचानता है, उन्हें ही रहने दें — वह स्टोर को खुद बिल्ड और स्टार्ट करता है 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

सिर्फ़ सार्वजनिक मान

यहाँ Supabase की Secret key या service_role key कभी न जोड़ें। NEXT_PUBLIC_ से शुरू होने वाली हर चीज़ ब्राउज़र में दिखती है।

Finish, फिर Deploy पर क्लिक करें, और बिल्ड पूरा होने तक इंतज़ार करें

अस्थायी डोमेन पर चल रहा है?

अपने डोमेन पर स्विच करने के लिए Hostinger में अपना Web App खोलें और वहीं डोमेन कनेक्ट करें, और जो 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 से कहें और पुश को मंज़ूरी दें: main पर हर पुश के साथ Hostinger आपका स्टोर दोबारा बनाता है।