AI से एक इंटरैक्टिव लाइटिंग स्टोर बनाएँ (Supabase + Hostinger)

Claude Desktop

Claude Code इसके अंदर चलता है और आपके स्टोर को कस्टमाइज़ करता है। इसके लिए पेड Claude प्लान चाहिए।

Claude Desktop डाउनलोड करें

https://claude.ai/download

GitHub अकाउंट

मुफ़्त। LUMIÈRE की आपकी अपनी कॉपी यहीं रहती है, और Hostinger यहीं से डिप्लॉय करता है।

GitHub अकाउंट बनाएँ

https://github.com/signup

Hostinger होस्टिंग

आपका लाइव स्टोर यहीं चलता है। प्लान आप चरण 2 में चुनेंगे।

आपको Node.js, कोड एडिटर या टर्मिनल की ज़रूरत नहीं है। Hostinger आपका स्टोर बनाता और चलाता है, और एडिटिंग Claude करता है।

LUMIÈRE का प्रीव्यू देखें और कॉपी करें

पहले तैयार स्टोर आज़माएँ: पेंडेंट लैंप जलाने के लिए पीतल की रेल पर कर्सर फेरें, उन्हें खींचें, और किसी एक पर क्लिक करके उसका डिमर खोलें। डेमो में न एडमिन है, न चेकआउट।

LUMIÈRE का लाइव डेमो खोलें

तैयार स्टोरफ़्रंट, आपके ब्राउज़र में चलता हुआ।

https://lumiere-lighting-store.vercel.app/

GitHub पर LUMIÈRE खोलें

https://github.com/salhiworks/lumiere-lighting-store

Use this template पर क्लिक करें, फिर Create a new repository पर इसे नाम दें और Public या Private चुनें Create repository पर क्लिक करें

पक्का करें कि यह आपकी अपनी कॉपी है

रिपॉज़िटरी का पता github.com/ से शुरू होता है और उसके बाद आपका अपना यूज़रनेम होता है

नाम के नीचे GitHub बताता है कि इसे salhiworks/lumiere-lighting-store से बनाया गया है

अब से आप सिर्फ़ अपनी रिपॉज़िटरी इस्तेमाल करेंगे। Hostinger इसे चरण 2 में डिप्लॉय करता है, और Claude Desktop इसे चरण 3 में एडिट करता है। मूल स्टार्टर कभी नहीं बदलता।

Node.js होस्टिंग लें

पहले पब्लिश करें, बाद में कस्टमाइज़ करें: कुछ ही मिनटों में आपका स्टोर एक असली वेबसाइट बन जाता है, और इसके बाद हर बदलाव उसी पर दिखता है।

Hostinger प्लान चुनें

Unlimited प्लान या Cloud प्लान इस्तेमाल करें — LUMIÈRE एक Node.js Web App के रूप में डिप्लॉय होता है, स्टैटिक वेबसाइट के रूप में नहीं।

अपनी रिपॉज़िटरी इंपोर्ट करें

Hostinger Websites Create site Web App

शुरुआत के लिए एक अस्थायी डोमेन चुनें — अपना डोमेन आप चरण 5 में कनेक्ट करेंगे Import Git Repository चुनें GitHub को अधिकृत करें और LUMIÈRE की अपनी कॉपी चुनें, जो आपने चरण 1 में बनाई थी — मूल स्टार्टर नहीं

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

Hostinger जो Next.js सेटिंग्स पहचानता है, उन्हें ही रहने दें — वह स्टोर को खुद बिल्ड और स्टार्ट करता है Node.js 22 चुनें पक्का करें कि बिल्ड स्क्रिप्ट build है — कभी build:demo नहीं, वह लॉक्ड डेमो बनाता है

डिप्लॉय करने से पहले अपनी साइट का पता एनवायरनमेंट वेरिएबल के रूप में जोड़ें: वही अस्थायी पता जो आपने अभी चुना है। अभी आपको अपना अंतिम डोमेन नहीं चाहिए — चरण 5 उसे बदलता है और दोबारा डिप्लॉय करता है।

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

आपका अस्थायी पता, https:// से शुरू होता हुआ

स्टोर को बस इतना ही चाहिए। Supabase और Stripe दोनों वैकल्पिक हैं, इसलिए इन्हें बाद के लिए छोड़ दें।

Deploy पर क्लिक करें और बिल्ड पूरा होने का इंतज़ार करें अपना अस्थायी पता खोलें

अपना स्टोर लाइव देखें

आपका अस्थायी पता आपका LUMIÈRE स्टोर खोलता है

रेल पर कर्सर फेरने से लैंप जलते हैं, और हर फ़ोटो लोड होती है

शॉप और एक प्रोडक्ट पेज खुलते हैं

आपका स्टोर लाइव है। अब से आपकी रिपॉज़िटरी की main ब्रांच पर पुश किया गया हर बदलाव Hostinger अपने-आप दोबारा बनाकर पब्लिश करता है।

Claude Desktop में अपना प्रोजेक्ट खोलें

Claude Desktop Code Local

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

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

आपकी अपनी LUMIÈRE रिपॉज़िटरी को एक नए सबफ़ोल्डर में डाउनलोड करता है और जाँचता है कि 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-lighting-store

अपना LUMIÈRE फ़ोल्डर खोलें

एक नया Local सेशन शुरू करें वह फ़ोल्डर खोलें जो Claude ने अभी बनाया है — वही जिसके अंदर README.md है अगर Claude Desktop पूछे, तो फ़ोल्डर पर भरोसा करें

Claude आपके स्टोर की इस कॉपी में बदलाव करता है और उन्हें आपकी अपनी GitHub रिपॉज़िटरी में भेजता है। फिर Hostinger आपकी लाइव वेबसाइट अपडेट करता है।

Claude को अपने स्टोर के बारे में बताएँ

जो पता है वह भरें — बाकी खाली छोड़ दें, Claude उसके लिए LUMIÈRE का वर्ज़न रखेगा। फिर इसे अपने LUMIÈRE सेशन में भेजें:

मेरा लाइटिंग स्टोर कस्टमाइज़ करें

नाम, प्रोडक्ट, टेक्स्ट और लुक बदलता है, और लैंप एनिमेशन व फ़ोटो जोड़ियों को बिल्कुल वैसा ही रखता है।

This folder is my own copy of the LUMIÈRE lighting store. Before you change anything, read README.md, AGENTS.md, docs/ARCHITECTURE.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the store for my business. Store name: {{STORE_NAME}} What makes us different: {{STORE_STORY}} Visual identity: {{VISUAL_STYLE}} Products: {{PRODUCTS}} Photos: {{PHOTOS}} Where each change belongs: - Name, description and navigation: lib/site.ts and the wordmark in components/layout/wordmark.tsx - Products and collections: lib/catalog/demo-data.ts. Make the same changes in supabase/seed.sql, so a database I connect later starts with the same catalog. - Homepage and studio copy: components/home/ - Colours and fonts: app/globals.css and app/layout.tsx Keep these exactly as they are: - The Pendant Lamp Rail in components/ui/pendant-lamp-rail.tsx: brushing the rail to switch lamps on, dragging, the detail view with its dimmer, and every animation, timing and hit area - The paired photos: every product keeps one OFF and one ON photo of the same size, at /lamps/<product-id>-off.webp and /lamps/<product-id>-on.webp, following the rules in docs/ASSETS.md - The admin, checkout, Supabase migrations and environment variables - The dependencies: don't add new ones Prices are in cents, as the catalog already stores them ($240 = 24000). The store uses one currency, USD by default. 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 and don't push anything yet: I'll ask you to publish when I'm ready.

स्टोर का नाम

Atelier Nord

आपके लाइटिंग स्टूडियो को क्या अलग बनाता है?

छोटे बैच में बने सिरेमिक और पीतल के पेंडेंट लैंप, लिस्बन में हाथ से बने और पूरे यूरोप में भेजे जाते हैं।

विज़ुअल पहचान

आपके लैंप — हर लाइन में एक: नाम, फ़िनिश, कीमत

सिरेमिक डोम, सैंड, $240 ब्रास कोन, ब्रश्ड, $310

लैंप की फ़ोटो

मंज़ूरी देने से पहले प्लान पढ़ें। जब तक स्टोर आपका अपना न लगे, उसी सेशन में Claude से और बदलाव माँगते रहें।

अपने लैंप की फ़ोटो इस्तेमाल करें

बेचने से पहले डेमो फ़ोटो बदलें

16 डेमो लैंप फ़ोटो मूल कंपोनेंट के डेमो से ली गई हैं, और उनके अधिकार सत्यापित नहीं हैं। असली स्टोर के लिए ऐसी फ़ोटो इस्तेमाल करें जो आपकी हों या जिनका लाइसेंस आपके पास हो।

हर लैंप को दो फ़ोटो चाहिए: एक बुझी हुई और एक जली हुई। रेल इन दोनों को क्रॉसफ़ेड करके लैंप जलाती है, इसलिए दोनों का बिल्कुल मेल खाना ज़रूरी है:

वही कैमरा, पोज़िशन और स्केल — सिर्फ़ रोशनी बदले

पारदर्शी बैकग्राउंड, उसमें कोई छाया न हो

तार ऊपरी किनारे से, बीच में से निकले

पोर्ट्रेट, हर फ़ोटो के लिए एक जैसा कैनवास — डेमो 557 × 900 px इस्तेमाल करता है

Supabase के बिना, हर जोड़ी को अपने प्रोजेक्ट के इस फ़ोल्डर में प्रोडक्ट के नाम पर रखें — जैसे dome-enamel-off.webp और dome-enamel-on.webp — फिर Claude से उन्हें इस्तेमाल करने और पब्लिश करने को कहें। Supabase के साथ, आप जोड़ियाँ एडमिन में अपलोड करते हैं, और वह उन्हें आपके लिए जाँच लेता है।

public/lamps/

अपने बदलाव पब्लिश करें

Claude आपका कस्टमाइज़ किया हुआ स्टोर आपकी अपनी GitHub रिपॉज़िटरी में भेजता है, और Hostinger उसी से आपकी लाइव वेबसाइट दोबारा बनाता है। बदलावों से संतुष्ट होने पर यह भेजें:

मेरे बदलाव पब्लिश करें

स्टोर की जाँच करता है, फिर आपके बदलाव कमिट करता है और उन्हें आपकी रिपॉज़िटरी की main ब्रांच पर पुश करता है।

Publish my customized store. 1. Make sure npm run lint, npm run typecheck and npm run build all pass, and fix anything that fails. 2. Make sure .env.local and any other secrets are not committed. 3. Commit all my changes with a clear message and push them 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.

अपने बदलाव लाइव देखें

Hostinger के आपका स्टोर दोबारा बनाने तक कुछ मिनट इंतज़ार करें अपना लाइव पता रीलोड करें रेल पर कर्सर फेरें — हर लैंप जलता है और उसका तार ट्रैक से मिलता है किसी लैंप पर क्लिक करें और उसका डिमर खिसकाएँ — सिर्फ़ रोशनी बदलती है शॉप और एक प्रोडक्ट पेज खोलें, और कार्ट में एक लैंप जोड़ें

कुछ मिनट बाद भी कुछ नहीं बदला? अपने Web App में Settings & Redeploy खोलें और दोबारा डिप्लॉय करें। कुछ गड़बड़ लग रहा है? उसी सेशन में Claude को बताएँ, उससे लैंप रेल को छुए बिना ठीक करने को कहें, फिर दोबारा पब्लिश करें।

अपने कंप्यूटर पर प्रीव्यू देखना चाहते हैं? (वैकल्पिक)

ऐसा करना ज़रूरी नहीं है। अगर पब्लिश करने से पहले बदलाव देखना चाहते हैं, तो अपने सेशन में Claude से कहें: डिपेंडेंसी इंस्टॉल करो, npm run dev से डेवलपमेंट सर्वर शुरू करो, और मुझे लोकल पता दो। इसके लिए Node.js 22 या नया संस्करण चाहिए, और अगर वह नहीं है तो Claude बता देगा। आपका लाइव स्टोर इस पर कभी निर्भर नहीं करता।

एक Supabase प्रोजेक्ट बनाएँ

आपका लाइव स्टोर Supabase के बिना भी पहले से काम करता है — अगर आपको बस इतना चाहिए तो चरण 5 पर जाएँ। /admin पर अपने एडमिन में प्रोडक्ट, फ़ोटो, स्टॉक और ऑर्डर मैनेज करने के लिए इसे कनेक्ट करें।

Supabase अकाउंट बनाएँ

https://supabase.link/r4gdwhi

New project पर क्लिक करें — कोई भी रीजन और Free प्लान ठीक हैं डेटाबेस पासवर्ड किसी सुरक्षित जगह सेव करें प्रोजेक्ट तैयार होने पर उसका Project ID कॉपी करें

Supabase Project Settings General

Claude को अपने प्रोजेक्ट तक पहुँचने दें

इससे Claude आपके लिए आपका डेटाबेस सेट अप कर देता है। Claude Desktop में अपने LUMIÈRE सेशन में:

साइडबार में Customize खोलें, फिर Connectors, और Supabase जोड़ें — या प्रॉम्प्ट बॉक्स के बगल में + पर क्लिक करके Add connectors चुनें Connect पर क्लिक करें और ब्राउज़र में एक्सेस मंज़ूर करें, वह ऑर्गनाइज़ेशन चुनते हुए जिसमें आपका प्रोजेक्ट है उसी फ़ोल्डर में नया Local सेशन शुरू करें, ताकि Claude कनेक्शन उठा सके

आप ब्राउज़र में Supabase के ज़रिए साइन इन करते हैं — किसी प्रॉम्प्ट में कोई की या पासवर्ड नहीं डाला जाता। यह कनेक्शन आपके मंज़ूर किए ऑर्गनाइज़ेशन के हर प्रोजेक्ट को देख सकता है, इसलिए अगला प्रॉम्प्ट Claude को सिर्फ़ आपके LUMIÈRE प्रोजेक्ट तक सीमित करता है।

Supabase कनेक्टर नहीं मिल रहा, या उसका उपयोग नहीं करना चाहते? अगला प्रॉम्प्ट छोड़ दें और चरण 4 के अंत में दिया गया मैनुअल सेटअप इस्तेमाल करें: वही तीन SQL फ़ाइलें, कनेक्टर की ज़रूरत नहीं।

Claude से डेटाबेस सेट अप करवाएँ

Supabase पर LUMIÈRE सेट अप करें

Claude स्टार्टर के माइग्रेशन और प्रोडक्ट लागू करता है, सुरक्षा और स्टोरेज जाँचता है, फिर आपको Hostinger के लिए दो सार्वजनिक वैल्यू देता है।

Connect this LUMIÈRE store to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md ("Connect Supabase"), docs/SUPABASE.md and docs/ADMIN.md first, and follow them. 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. How to reach Supabase: - Use the Supabase connection in this session if it is connected. - Otherwise, use the Supabase CLI if I'm signed in, with the commands in docs/SUPABASE.md. - If neither works, stop and tell me exactly what to do. Never ask me for a password, an access token or a Secret key. Tell me what each step does before you run it: 1. Apply supabase/migrations/20261101120000_catalog_and_admin.sql, then supabase/migrations/20261101150000_orders_checkout.sql, in that order. They create the tables, the Row Level Security policies and the lamp-photos storage bucket. 2. Run supabase/seed.sql to add the three collections and the eight pendants. 3. Verify the setup: Row Level Security is on for every table, the lamp-photos bucket exists, there are 8 products and 3 collections, and Supabase's security advisor shows no warnings. Fix nothing by hand: tell me what's wrong. 4. Read my Project URL and Publishable key from the project, and show them to me as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger. 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/ADMIN.md, check that the row exists, and tell me to sign in at /admin on my live store.

आपका Supabase Project ID

abcdefghijklmnopqrst

Claude हर कार्रवाई से पहले पूछता है — उसे पढ़ें, फिर अनुमति दें। जब आपकी बारी होती है, तो वह रुक जाता है।

अपना एडमिन अकाउंट बनाएँ

Supabase Authentication Users

Add user पर क्लिक करें, फिर Create new user पर अपना ईमेल और एक मज़बूत पासवर्ड डालें Auto Confirm User को टिक रहने दें और यूज़र बनाएँ Claude को अपना एडमिन ईमेल बताएँ — पासवर्ड कभी नहीं

Supabase Authentication Sign In / Providers

Allow new users to sign up बंद करें और सेव करें — स्टोर में ग्राहक अकाउंट नहीं हैं

Supabase कनेक्शन नहीं है? इसे हाथ से सेट अप करें

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

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Connect से अपना Project URL और Publishable key कॉपी करके Hostinger में डालें, जैसा अगले चरण में दिखाया गया है। ऊपर अपना एडमिन यूज़र बनाने के बाद, नीचे अपना ईमेल जोड़ें और इसे SQL Editor में चलाएँ:

मुझे एडमिनिस्ट्रेटर बनाएँ

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

आपका एडमिन ईमेल

you@example.com

Hostinger पर Supabase वेरिएबल्स जोड़ें

आपका लाइव स्टोर दो सार्वजनिक वैल्यू के ज़रिए Supabase पढ़ता है। अपने Web App के डैशबोर्ड में Environment Variables खोलें और ये जोड़ें:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

Claude ने आपको दोनों वैल्यू दी थीं। वे Connect में भी मिलती हैं।

Connect खोलें

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

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

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

वेरिएबल्स सेव करें — Hostinger इनके साथ आपका स्टोर दोबारा बनाता है दोबारा नहीं बना? Settings & Redeploy से दोबारा डिप्लॉय करें अपने लाइव पते पर /admin खोलें और अपने एडमिन ईमेल से साइन इन करें

एडमिन में आप प्रोडक्ट जोड़ते और एडिट करते हैं, OFF/ON फ़ोटो जोड़ियाँ अपलोड करते हैं, और स्टॉक व ऑर्डर मैनेज करते हैं। हर सेव रेल, शॉप और प्रोडक्ट पेजों को अपडेट करता है।

अपना डोमेन कनेक्ट करें

Hostinger Your Web App Connect domain

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

DNS बदलावों को सब तक पहुँचने में कुछ घंटे लग सकते हैं — 24 घंटे तक।

अपनी वेबसाइट या Web App से कस्टम डोमेन कनेक्ट करें

पूरी गाइड, कहीं और रजिस्टर्ड डोमेन सहित।

/video/connect-a-custom-domain-to-your-website-or-web-app

अपने डोमेन पर स्विच करें और दोबारा डिप्लॉय करें

आपका स्टोर अपने लिंक, साइटमैप और एडमिन का सुरक्षित साइन-इन इसी एक पते से बनाता है। अपने Web App के डैशबोर्ड में Environment Variables खोलें और इसे अपने डोमेन में बदलें:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

आपका डोमेन, https:// से शुरू होता हुआ

वेरिएबल सेव करें Settings & Redeploy से दोबारा डिप्लॉय करें, ताकि नया पता बिल्ड में शामिल हो जाए बिल्ड पूरा होने तक प्रतीक्षा करें

अपना लाइव स्टोर टेस्ट करें

अपना डोमेन खोलें और जाँचें:

पता https:// से शुरू होता है और ताले का निशान दिखता है

रेल पर कर्सर फेरने से लैंप जलते हैं, और हर फ़ोटो लोड होती है

शॉप और एक प्रोडक्ट पेज खुलते हैं, और एक लैंप कार्ट में चला जाता है

Supabase के साथ: आप /admin पर साइन इन कर सकते हैं

कोई काल्पनिक पता, जैसे /shop/no-such-lamp, "नहीं मिला" पेज दिखाता है

आपका लाइटिंग स्टोर आपके अपने डोमेन पर लाइव है। बाद में बदलाव करने के लिए एडमिन में प्रोडक्ट एडिट करें — या Claude से कोड बदलने और उन्हें पब्लिश करने को कहें: main पर हर पुश के साथ Hostinger आपका स्टोर दोबारा बनाता है।