एडमिन डैशबोर्ड के साथ लग्ज़री AI फ़ैशन स्टोर बनाएँ

Claude Desktop

अपना स्टोर सेट अप और कस्टमाइज़ करने के लिए डेस्कटॉप ऐप में Claude Code इस्तेमाल करें।

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

https://claude.ai/download

GitHub अकाउंट

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

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

https://github.com/signup

Node.js

मौजूदा LTS रिलीज़ डाउनलोड करें। यह आपके कंप्यूटर पर स्टोर चलाता है।

Node.js डाउनलोड करें

https://nodejs.org/en/download

Supabase अकाउंट

मुफ़्त प्लान काफ़ी है। इसमें आपके प्रोडक्ट, फ़ोटो, ऑर्डर और मालिक का साइन-इन रहते हैं।

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

https://supabase.link/r4gdwhi

Cloudflare अकाउंट

मुफ़्त। इसका Turnstile चेक बॉट्स को आपके चेकआउट से दूर रखता है।

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

https://dash.cloudflare.com/sign-up

Hostinger होस्टिंग

STILLFORM मुफ़्त है; आपका लाइव स्टोर यहीं चलता है।

Hostinger प्लान चुनें

Unlimited प्लान या कोई Cloud प्लान इस्तेमाल करें — STILLFORM एक Node.js Web App के रूप में डिप्लॉय होता है।

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

पहले लाइव डेमो में तैयार स्टोर आज़माएँ: कपड़ों की रेल पर माउस ले जाएँ, उसे खींचें और कोई पीस खोलें। वहाँ चेकआउट और Studio बंद हैं।

GitHub पर STILLFORM खोलें

https://github.com/salhiworks/stillform-fashion-store

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

इसे अपने कंप्यूटर पर लाएँ

Claude Desktop Code Local

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

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

आपकी अपनी STILLFORM रिपॉज़िटरी को एक नए सबफ़ोल्डर में डाउनलोड करता है।

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, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

आपकी नई रिपॉज़िटरी का पता

https://github.com/your-name/my-fashion-store

अपना STILLFORM फ़ोल्डर खोलें

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

स्टोर को अपने कंप्यूटर पर लॉन्च करें

अपने STILLFORM सेशन में भेजें:

STILLFORM तैयार करें और लॉन्च करें

प्रोजेक्ट इंस्टॉल करता है और आपके कंप्यूटर पर स्टोर को डेमो मोड में शुरू करता है।

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Claude जो पता देता है उसे खोलें, आमतौर पर http://localhost:5173। Supabase के बिना स्टोर अपने बिल्ट-इन कलेक्शन पर डेमो मोड में चलता है: रेल, प्रोडक्ट पेज और बैग काम करते हैं, और चरण 3 तक चेकआउट बंद रहता है।

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

Supabase डैशबोर्ड खोलें

https://supabase.com/dashboard

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

Supabase Project Settings General

Claude को आपके प्रोजेक्ट की बस यही जानकारी चाहिए: Project ID। आपका Project URL और Publishable key वह Supabase CLI के ज़रिए खुद पढ़ लेता है।

Supabase CLI में साइन इन करें

इससे आपका ब्राउज़र खुलता है, इसलिए इसे आप खुद एक बार चलाएँ:

अपने STILLFORM सेशन में सबसे ऊपर Terminal बटन पर क्लिक करें नीचे दी गई कमांड चलाएँ खुलने वाली ब्राउज़र विंडो में साइन-इन को मंज़ूरी दें

npx supabase login

एक Turnstile विजेट बनाएँ

Cloudflare डैशबोर्ड खोलें

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

विजेट का नाम अपने स्टोर के नाम पर रखें होस्टनेम में localhost जोड़ें अगर आपको अपनी दुकान का डोमेन पहले से पता है, तो उसे भी जोड़ें — नहीं तो आप उसे चरण 5 में जोड़ेंगे Managed मोड चुनें और विजेट बनाएँ पेज खुला रखें: चरण 3 में इसकी साइट की और सीक्रेट की चाहिए

Claude से अपना स्टोर कनेक्ट करवाएँ

अपने STILLFORM सेशन में, नीचे अपना Project ID जोड़ें और भेजें:

STILLFORM को Supabase से कनेक्ट करें

Claude आपका प्रोजेक्ट लिंक करता है, डेटाबेस और स्टार्टर कलेक्शन सेट करता है, और चेकआउट फ़ंक्शन डिप्लॉय करता है।

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

आपका Supabase Project ID

abcdefghijklmnopqrst

Claude हर कमांड से पहले पूछता है — Allow पर क्लिक करें। आपकी बारी आने पर वह रुक जाता है।

Terminal में अपने सीक्रेट्स डालें

जब Claude कहे, तो Terminal में स्टोर का अपना सेटअप चलाएँ। Claude जो कर चुका है उसे यह छोड़ देता है और आपसे सिर्फ़ निजी जानकारी पूछता है:

npm run setup

चेकआउट प्रोटेक्शन वाले चरण में 1 चुनें, फिर अपनी Turnstile साइट की और सीक्रेट की पेस्ट करें अगर यह place-order फ़ंक्शन को दोबारा डिप्लॉय करने को कहे, तो n टाइप करें — Claude इसे पहले ही डिप्लॉय कर चुका है अपने मालिक अकाउंट के लिए अपना ईमेल और कम से कम 12 अक्षरों का पासवर्ड डालें जब यह पूछे, तो अपने Supabase Dashboard में Allow new users to sign up बंद करें, फिर Enter दबाएँ — सेटअप जाँचता है कि यह बंद है Claude को बताएँ कि हो गया

Supabase Authentication Sign In / Providers

इन्हें निजी रखें

अपनी Turnstile सीक्रेट की और पासवर्ड सिर्फ़ Terminal के छिपे हुए प्रॉम्प्ट में टाइप करें। इन्हें कभी चैट में पेस्ट न करें।

सेटअप जाँचें और साइन इन करें

Claude स्टोर की जाँचें चलाता है और उसे रीस्टार्ट करता है। जब वह कहे कि सब पास हो गया:

अपना लोकल स्टोर रीलोड करें — अब यह अपना कलेक्शन आपके डेटाबेस से लोड करता है /admin खोलें और अपने मालिक ईमेल और पासवर्ड से साइन इन करें

आप Studio में हैं, आपके स्टोर का डैशबोर्ड। इसे सिर्फ़ स्टोर की एडमिनिस्ट्रेटर सूची वाले अकाउंट खोल सकते हैं, और कोई साइन अप नहीं कर सकता।

एक प्रोडक्ट जोड़ें

Studio में आप जो भी सेव करते हैं वह सीधे आपके डेटाबेस में जाता है — कोड में कोई बदलाव नहीं।

Studio Products Add a product

Name, Category और One-line summary भरें Photos में एक सामने की फ़ोटो जोड़ें Price, sizes and stock में Price सेट करें और Sizes चुनें पहले रंग को नाम दें, उसका स्वैच चुनें और हर साइज़ के लिए उसका स्टॉक डालें हर दूसरे कलरवे के लिए Add a colour पर क्लिक करें Publish पर क्लिक करें

वैकल्पिक: अपने पीस जोड़ने के बाद, Products में आठ डेमो प्रोडक्ट आर्काइव या डिलीट करें।

फ़ोटो को रेल पर फ़िट करें

सामने की फ़ोटो जोड़ते ही रेल एडिटर खुल जाता है। ऊपर हैंगर हुक वाला पारदर्शी PNG कट-आउट सबसे अच्छा दिखता है; सादी, हल्के रंग की दीवार के सामने ली गई फ़ोटो भी चलती है।

अगर फ़ोटो कट-आउट नहीं है, तो Remove the plain background चालू करें Size और पोज़ीशन एडजस्ट करें, या प्रीव्यू में फ़ोटो को खींचें स्क्रीन रीडर के लिए फ़ोटो का विवरण लिखें Use this photo पर क्लिक करें

Preview on the rail देखें: पीस को घुमाने के लिए उस पर माउस ले जाएँ और क्लोज़-अप खोलने के लिए क्लिक करें। पीछे और बगल की फ़ोटो से यह पूरी तरह घूम पाता है।

रेल सजाएँ

Studio Rail

Add a piece में अपना नया प्रोडक्ट और रंग चुनें पीस को खींचकर क्रम में लगाएँ, या तीरों का इस्तेमाल करें जो पीस होमपेज पर नहीं चाहिए उसे हटा दें Save rail पर क्लिक करें

डेस्कटॉप स्क्रीन के लिए छह से दस पीस ठीक रहते हैं। फ़ोन पर रेल स्वाइप करने वाला कैरोसेल बन जाती है।

कलेक्शन और लुकबुक तैयार करें

Studio Collections

Homepage selection में वे पीस चुनें जो होमपेज पर सबसे आगे दिखें और Save पर क्लिक करें New collection पर क्लिक करें, या किसी कलेक्शन को एडिट करें, और उसके पीस जोड़ें

Studio Lookbook

शीर्षक और परिचय एडिट करें हर स्प्रेड के लिए अपनी फ़ोटो और कैप्शन अपलोड करें स्प्रेड छिपाएँ या उनका क्रम बदलें, फिर Save lookbook पर क्लिक करें

सेटिंग्स अपडेट करें और चेकआउट खोलें

Studio Settings

Store में अपने स्टोर का नाम और करेंसी सेट करें Contact, Shipping और Policies में अपनी जानकारी जोड़ें Homepage में रेल के आसपास के शब्द बदलें Checkout में Cash on delivery, Bank transfer या Pay at studio pickup चालू करें, और उसके निर्देश एडिट करें Open checkout चालू करें Save settings पर क्लिक करें

STILLFORM कार्ड की कोई जानकारी नहीं लेता: खरीदार आपके तरीकों में से एक चुनते हैं, और पैसा आने पर आप हर ऑर्डर को पेड मार्क करते हैं।

एक टेस्ट ऑर्डर दें

अपना लोकल स्टोर खोलें, कोई पीस बैग में डालें और चेकआउट करें कन्फ़र्मेशन पेज पर ऑर्डर रेफ़रेंस नोट करें Studio में Orders खोलें और अपने टेस्ट ऑर्डर पर क्लिक करें Cancel order पर क्लिक करें — उसका स्टॉक फिर से बिक्री पर आ जाता है

अपना Web App बनाएँ

अभी होस्टिंग नहीं है? आवश्यकताएँ में एक प्लान लें।

Hostinger Websites Create website Web App

अपना खुद का डोमेन चुनें, या शुरुआत के लिए एक अस्थायी डोमेन Import your Git repository चुनें Continue with GitHub चुनें और Hostinger को अपनी STILLFORM रिपॉज़िटरी का एक्सेस दें रिपॉज़िटरी और main ब्रांच चुनें

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

Hostinger जो Vite फ़्रेमवर्क प्रीसेट पहचानता है, उसे ही रखें Node.js 22 चुनें बिल्ड कमांड npm run build सेट करें — कभी build:demo नहीं आउटपुट डायरेक्टरी dist सेट करें और एंट्री फ़ाइल खाली छोड़ दें

पहले बिल्ड से पहले ये तीन एनवायरनमेंट वेरिएबल जोड़ें — मान वही हैं जो आपकी .env.local में हैं, Claude आपको दिखा सकता है। ये स्टोर में बिल्ड हो जाते हैं, इसलिए बाद में किसी को बदलने पर दोबारा डिप्लॉय करना होगा।

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Supabase Publishable key

VITE_TURNSTILE_SITE_KEY

Turnstile साइट की

Supabase के मान Connect में हैं। साइट की आपके Turnstile विजेट पर है।

Connect खोलें

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

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

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

Claude से npm run preflight चलवाएँ, जो स्टोर का लॉन्च चेक है — पास होने पर ही डिप्लॉय करें Deploy पर क्लिक करें और बिल्ड पूरा होने का इंतज़ार करें अपना लाइव पता खोलें

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

Supabase Authentication URL Configuration

Site URL को अपने लाइव पते पर सेट करें, जो https:// से शुरू हो वही पता Redirect URLs में जोड़ें Save पर क्लिक करें

Cloudflare Turnstile

अपना STILLFORM विजेट खोलें उसके होस्टनेम में अपना लाइव डोमेन जोड़ें और सेव करें

Supabase में Allow new users to sign up बंद ही रहता है।

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

अपना कोई प्रोडक्ट पेज सीधे उसके पते से खोलें, फिर उसे रिफ़्रेश करें अपने लाइव पते पर /admin में साइन इन करें कोई पीस बैग में डालें और चेकआउट पूरा करें — Turnstile चेक दिखता नहीं या बस एक टिक बॉक्स होता है Orders में अपना टेस्ट ऑर्डर ढूँढें, फिर उसे कैंसल करें

Hostinger इस स्टोर के डायरेक्ट लिंक कैसे संभालता है, इसकी अभी पुष्टि नहीं हुई है। अगर किसी प्रोडक्ट पेज को खोलने या रिफ़्रेश करने पर 404 दिखे, तो Claude से docs/DEPLOY.md का Hostinger सेक्शन अपने साथ देखने को कहें।

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

प्रोडक्ट, फ़ोटो, स्टॉक, ऑर्डर और सेटिंग्स: इन्हें Studio में बदलें — ये तुरंत लाइव हो जाते हैं

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