ابنِ متجر إضاءة تفاعليًا بالذكاء الاصطناعي (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/

افتح LUMIÈRE على GitHub

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، وليس القالب الأصلي

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

أبقِ إعدادات Next.js التي يكتشفها Hostinger — فهو يبني المتجر ويشغّله بنفسه اختر 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

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

استنسخ نسختك

ينزّل مستودع 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 بناء موقعك المباشر منه. عندما ترضى عن التغييرات، أرسل:

انشر تغييراتي

يفحص المتجر، ثم يسجّل تغييراتك (commit) ويدفعها إلى الفرع 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 بناء متجرك أعد تحميل عنوانك المباشر مرّر المؤشر على السكة — يُضاء كل مصباح ويلتقي سلكه بالمسار انقر على مصباح وحرّك مخفّت إضاءته — لا يتغيّر شيء سوى الضوء افتح المتجر وصفحة منتج، وأضف مصباحًا إلى السلة

لم يتغير شيء بعد بضع دقائق؟ افتح Settings & Redeploy في Web App الخاص بك وأعد النشر. هل يبدو شيء غير صحيح؟ صفه لـ 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 إعداد قاعدة بياناتك نيابةً عنك. في جلسة LUMIÈRE الخاصة بك داخل Claude Desktop:

افتح Customize في الشريط الجانبي، ثم Connectors، وأضف Supabase — أو انقر على + بجانب مربع الأمر ثم اختر Add connectors انقر على Connect ووافق على الوصول في متصفحك، مع اختيار المؤسسة التي تضم مشروعك ابدأ جلسة Local جديدة في المجلد نفسه، ليلتقط Claude الاتصال

تسجّل الدخول عبر Supabase في متصفحك — فلا يُدخَل أي مفتاح أو كلمة مرور في Prompt. يستطيع الاتصال رؤية كل المشاريع في المؤسسة التي توافق عليها، لذلك يحصر الـ Prompt التالي عمل Claude في مشروع LUMIÈRE الخاص بك.

لا تجد موصّل Supabase، أم تفضّل عدم استخدامه؟ تخطَّ الأمر التالي واستخدم الإعداد اليدوي في نهاية الخطوة 4: ملفات SQL الثلاثة نفسها، دون الحاجة إلى موصّل.

اطلب من Claude إعداد قاعدة البيانات

أعدّ LUMIÈRE على Supabase

يطبّق Claude عمليات الترحيل (migrations) والمنتجات الخاصة بالقالب، ويفحص الأمان والتخزين، ثم يعطيك القيمتين العامتين الخاصتين بـ 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.

Project ID الخاص بمشروع Supabase

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، بهذا الترتيب. لكل ملف: افتحه، وانسخ كل محتواه، والصقه في استعلام جديد وانقر على Run. يمكن تشغيل كل ملف مرة أخرى بأمان.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

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

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

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

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

you@example.com

أضف متغيرات Supabase في Hostinger

يقرأ متجرك المباشر بيانات 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

قيم عامة فقط

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

احفظ المتغيرات — يعيد Hostinger بناء متجرك بها لم تتم إعادة البناء؟ أعد النشر من Settings & Redeploy افتح /admin على عنوانك المباشر وسجّل الدخول ببريد الإدارة

في لوحة الإدارة تضيف المنتجات وتعدّلها، وترفع أزواج صور OFF/ON، وتدير المخزون والطلبات. كل حفظ يحدّث السكة والمتجر وصفحات المنتجات.

اربط نطاقك

Hostinger Your Web App Connect domain

أدخل نطاقك واتبع خطوات الربط نطاقك مسجّل في مكان آخر؟ أضف سجلات DNS التي يعرضها Hostinger لدى مسجّل النطاق احتفظ بأي سجلات بريد إلكتروني موجودة انتظر حتى يظهر النطاق مربوطًا ويصبح 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 تغييرات في الكود ونشرها: يعيد Hostinger بناء متجرك عند كل دفع إلى main.