Yapay Zekâ ile Etkileşimli Bir Aydınlatma Mağazası Kurun (Supabase + Hostinger)

Claude Desktop

Claude Code onun içinde çalışır ve mağazanızı özelleştirir. Ücretli bir Claude planı gerektirir.

Claude Desktop'ı İndirin

https://claude.ai/download

GitHub hesabı

Ücretsiz. LUMIÈRE'in size ait kopyası burada durur ve Hostinger onu buradan yayına alır.

GitHub Hesabı Oluşturun

https://github.com/signup

Hostinger barındırma

Canlı mağazanız burada çalışır. Planı 2. Adım'da seçersiniz.

Node.js'e, kod editörüne ya da terminale ihtiyacınız yok. Mağazanızı Hostinger derler ve çalıştırır, düzenlemeyi Claude yapar.

LUMIÈRE'i İnceleyin ve Kopyalayın

Önce bitmiş mağazayı deneyin: sarkıt lambaları yakmak için pirinç rayın üzerinde gezinin, onları sürükleyin ve dimmer'ını açmak için birine tıklayın. Demoda yönetim paneli ve ödeme yoktur.

LUMIÈRE Canlı Demosunu Açın

Bitmiş vitrin, tarayıcınızda çalışır halde.

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

LUMIÈRE'i GitHub'da Açın

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

Use this template'e, ardından Create a new repository'ye tıklayın Bir ad verin ve Public ya da Private seçin Create repository'ye tıklayın

Kopyanın Size Ait Olduğunu Doğrulayın

Deponun adresi github.com/ ile ve sizin kendi kullanıcı adınızla başlar

Adının altında GitHub, salhiworks/lumiere-lighting-store şablonundan oluşturulduğunu söyler

Bundan sonra yalnızca kendi deponuzu kullanırsınız. Hostinger onu 2. Adım'da yayına alır, Claude Desktop ise 3. Adım'da düzenler. Orijinal başlangıç paketi asla değişmez.

Node.js Hosting Edinin

Önce yayınlayın, sonra özelleştirin: birkaç dakika içinde mağazanız gerçek bir web sitesi olur ve sonraki her değişiklik orada görünür.

Bir Hostinger Paketi Seçin

Unlimited paketini ya da bir Cloud paketini kullanın — LUMIÈRE statik bir web sitesi olarak değil, Node.js Web App olarak yayına alınır.

Deponuzu İçe Aktarın

Hostinger Websites Create site Web App

Başlamak için geçici bir alan adı seçin — kendi alan adınızı Adım 5'te bağlarsınız Import Git Repository'yi seçin GitHub'a yetki verin ve 1. Adım'da oluşturduğunuz kendi LUMIÈRE kopyanızı seçin — orijinal başlangıç paketini değil

Yapılandırın ve Dağıtın

Hostinger'ın algıladığı Next.js ayarlarını koruyun — mağazayı kendisi build eder ve başlatır Node.js 22'yi seçin Build betiğinin build olduğundan emin olun — asla build:demo değil, o kilitli demoyu build eder

Yayına almadan önce sitenizin adresini ortam değişkeni olarak ekleyin: az önce seçtiğiniz geçici adres. Nihai alan adınıza henüz ihtiyacınız yok — 5. Adım onu değiştirir ve yeniden yayına alır.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

https:// ile başlayan geçici adresiniz

Mağazanın ihtiyacı olan bu kadar. Supabase ve Stripe ikisi de isteğe bağlıdır, bunları sonraya bırakın.

Deploy'a tıklayın ve build'in bitmesini bekleyin Geçici adresinizi açın

Mağazanızı Canlı Görün

Geçici adresiniz LUMIÈRE mağazanızı açar

Rayın üzerinde gezinmek lambaları yakıyor ve her fotoğraf yükleniyor

Mağaza ve bir ürün sayfası açılıyor

Mağazanız canlı. Bundan sonra deponuzun main branch'ine gönderilen her değişiklik Hostinger tarafından otomatik olarak yeniden derlenir ve yayınlanır.

Projenizi Claude Desktop'ta Açın

Claude Desktop Code Local

Documents gibi bir klasörde bir Local oturumu başlatın, deponuzun adresini aşağıya ekleyin ve gönderin:

Kopyanızı Klonlayın

Kendi LUMIÈRE deponuzu yeni bir alt klasöre indirir ve Claude'un onu güncelleyebildiğini kontrol eder.

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.

Deponuzun adresi

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

LUMIÈRE Klasörünüzü Açın

Yeni bir Local oturumu başlatın Claude'un az önce oluşturduğu klasörü açın — içinde README.md olanı Claude Desktop sorarsa klasöre güvenin

Claude mağazanızın bu kopyasını değiştirir ve değişiklikleri kendi GitHub deponuza gönderir. Ardından Hostinger canlı web sitenizi günceller.

Mağazanızı Claude'a Anlatın

Bildiklerinizi doldurun — gerisini boş bırakın, Claude LUMIÈRE'in sürümünü korur. Ardından LUMIÈRE oturumunuzda gönderin:

Aydınlatma Mağazamı Özelleştir

Adı, ürünleri, metinleri ve görünümü değiştirir; lamba animasyonlarını ve fotoğraf çiftlerini olduğu gibi korur.

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.

Mağaza adı

Atelier Nord

Aydınlatma stüdyonuzu farklı kılan ne?

Lizbon'da el yapımı, Avrupa'nın her yerine gönderilen küçük seri seramik ve pirinç sarkıt lambalar.

Görsel kimlik

Lambalarınız — her satıra bir tane: ad, yüzey, fiyat

Seramik kubbe, Kum, $240 Pirinç koni, Fırçalanmış, $310

Lamba fotoğrafları

Onaylamadan önce planı okuyun. Mağaza size ait gibi hissettirene kadar aynı oturumda Claude'dan başka değişiklikler isteyin.

Kendi Lamba Fotoğraflarınızı Kullanın

Satışa başlamadan önce demo fotoğraflarını değiştirin

16 demo lamba fotoğrafı orijinal bileşenin demosundan gelir ve hakları doğrulanmamıştır. Gerçek bir mağaza için size ait ya da lisansını aldığınız fotoğrafları kullanın.

Her lambanın iki fotoğrafa ihtiyacı vardır: biri sönük, biri yanık. Ray bir lambayı bu iki fotoğraf arasında geçiş yaparak yakar, bu yüzden tam olarak üst üste oturmaları gerekir:

Aynı kamera, konum ve ölçek — yalnızca ışık değişir

Şeffaf arka plan, fotoğrafa işlenmiş gölge olmadan

Kablo üst kenardan, ortadan çıkar

Dikey, her fotoğraf için aynı tuval — demo 557 × 900 px kullanır

Supabase olmadan, her çifti projenizdeki bu klasöre ürünün adıyla koyun — örneğin dome-enamel-off.webp ve dome-enamel-on.webp — ardından Claude'dan bunları kullanmasını ve yayınlamasını isteyin. Supabase ile çiftleri admin panelinden yüklersiniz ve panel bunları sizin için kontrol eder.

public/lamps/

Değişikliklerinizi Yayınlayın

Claude özelleştirilmiş mağazanızı kendi GitHub deponuza gönderir ve Hostinger canlı web sitenizi oradan yeniden derler. Değişikliklerden memnun olduğunuzda şunu gönderin:

Değişikliklerimi Yayınla

Mağazayı kontrol eder, ardından değişikliklerinizi commit'ler ve deponuzun main branch'ine gönderir.

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.

Değişikliklerinizi Canlı Görün

Hostinger'ın mağazanızı yeniden derlemesi için birkaç dakika bekleyin Canlı adresinizi yeniden yükleyin Rayın üzerinde gezinin — her lamba yanar ve kablosu raya değer Bir lambaya tıklayın ve dimmer'ını hareket ettirin — ışık dışında hiçbir şey değişmez Mağazayı ve bir ürün sayfasını açın, sepete bir lamba ekleyin

Birkaç dakika sonra hâlâ bir şey değişmedi mi? Web App'inizde Settings & Redeploy bölümünü açın ve yeniden dağıtın (redeploy). Bir şey yanlış mı görünüyor? Aynı oturumda Claude'a anlatın, lamba rayına dokunmadan düzeltmesini isteyin, ardından tekrar yayınlayın.

Bilgisayarınızda Önizlemek mi İstiyorsunuz? (İsteğe Bağlı)

Buna hiç gerek yok. Değişiklikleri yayınlamadan önce görmek isterseniz oturumunuzda Claude'dan şunu isteyin: bağımlılıkları kur, npm run dev ile geliştirme sunucusunu başlat ve bana yerel adresi ver. Node.js 22 veya daha yenisi gerekir; eksikse Claude size söyler. Canlı mağazanız buna asla bağlı değildir.

Bir Supabase Projesi Oluşturun

Canlı mağazanız Supabase olmadan da çalışır — ihtiyacınız bundan ibaretse 5. Adım'a geçin. Ürünleri, fotoğrafları, stoğu ve siparişleri /admin adresindeki kendi admin panelinizde yönetmek için bağlayın.

Supabase Hesabı Oluşturun

https://supabase.link/r4gdwhi

New project'e tıklayın — herhangi bir bölge ve Free paketi uygundur Veritabanı şifresini güvenli bir yere kaydedin Proje hazır olduğunda Project ID'sini kopyalayın

Supabase Project Settings General

Claude'un Projenize Erişmesine İzin Verin

Bu, Claude'un veritabanınızı sizin için kurmasını sağlar. Claude Desktop'taki LUMIÈRE oturumunuzda:

Kenar çubuğunda Customize'ı, ardından Connectors'ı açın ve Supabase'i ekleyin — veya prompt kutusunun yanındaki + simgesine tıklayıp Add connectors'ı seçin Connect'e tıklayın ve tarayıcınızda erişimi onaylayın; projenizin bulunduğu organizasyonu seçin Claude bağlantıyı alsın diye aynı klasörde yeni bir Local oturumu başlatın

Supabase üzerinden tarayıcınızda oturum açarsınız — prompt'a hiçbir anahtar veya parola girmezsiniz. Bağlantı, onayladığınız organizasyondaki tüm projeleri görebilir; bu yüzden bir sonraki prompt Claude'u yalnızca LUMIÈRE projenizle sınırlar.

Supabase bağlayıcısını bulamıyor musunuz ya da kullanmak mı istemiyorsunuz? Sonraki prompt'u atlayın ve 4. Adım'ın sonundaki manuel kurulumu kullanın: aynı üç SQL dosyası, bağlayıcı gerekmez.

Veritabanını Claude'a Kurdurun

LUMIÈRE'i Supabase'de Kur

Claude başlangıç paketinin migration'larını ve ürünlerini uygular, güvenliği ve depolamayı kontrol eder, ardından size Hostinger için iki herkese açık değeri verir.

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'niz

abcdefghijklmnopqrst

Claude her işlemden önce sorar — okuyun, ardından izin verin. Sıra size geldiğinde durur.

Yönetici Hesabınızı Oluşturun

Supabase Authentication Users

Add user'a, ardından Create new user'a tıklayın E-postanızı ve güçlü bir şifre girin Auto Confirm User işaretli kalsın ve kullanıcıyı oluşturun Claude'a yönetici e-postanızı söyleyin — asla şifrenizi değil

Supabase Authentication Sign In / Providers

Allow new users to sign up'ı kapatın ve kaydedin — mağazada müşteri hesabı yoktur

Supabase Bağlantısı Yok mu? Elle Kurun

Supabase projenizde SQL Editor'ı açın. LUMIÈRE klasörünüzdeki bu üç dosyayı bu sırayla çalıştırın. Her birini açın, tamamını kopyalayın, yeni bir sorguya yapıştırın ve Run'a tıklayın. Her biri güvenle yeniden çalıştırılabilir.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Project URL ve Publishable key değerlerinizi Connect'ten kopyalayıp bir sonraki adımda gösterildiği gibi Hostinger'a yapıştırın. Yukarıda admin kullanıcınızı oluşturduktan sonra e-postanızı aşağıya ekleyin ve bunu SQL Editor'da çalıştırın:

Beni Yönetici Yap

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

Yönetici e-postanız

you@example.com

Supabase Değişkenlerini Hostinger'a Ekleyin

Canlı mağazanız Supabase'e iki herkese açık değerle erişir. Web App'inizin panelinde Environment Variables bölümünü açın ve şunları ekleyin:

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 size iki değeri de verdi. Bunlar Connect içinde de bulunur.

Connect'i açın

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

Yalnızca herkese açık değerler

Supabase Secret key veya service_role anahtarını buraya asla eklemeyin. NEXT_PUBLIC_ ile başlayan her şey tarayıcıda görünür.

Değişkenleri kaydedin — Hostinger mağazanızı bunlarla yeniden derler Yeniden derlenmedi mi? Settings & Redeploy üzerinden yeniden dağıtın (redeploy) Canlı adresinizde /admin sayfasını açın ve admin e-postanızla giriş yapın

Yönetim panelinde ürün ekler ve düzenler, OFF/ON fotoğraf çiftleri yükler, stoku ve siparişleri yönetirsiniz. Her kayıt rayı, mağazayı ve ürün sayfalarını günceller.

Alan Adınızı Bağlayın

Hostinger Your Web App Connect domain

Alan adınızı girin ve bağlantı adımlarını izleyin Alan adınız başka bir yerde mi kayıtlı? Hostinger'ın gösterdiği DNS kayıtlarını kayıt şirketinize ekleyin Mevcut e-posta kayıtlarını koruyun Alan adı bağlı olarak görünene ve SSL etkin olana kadar bekleyin

DNS değişikliklerinin herkese ulaşması birkaç saat sürebilir — en fazla 24 saat.

Web Sitenize veya Web App'inize Özel Alan Adı Bağlayın

Başka yerde kayıtlı alan adları da dahil, adım adım tam anlatım.

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

Alan Adınıza Geçin ve Yeniden Dağıtın

Mağazanız bağlantılarını, site haritasını ve yönetim panelinin güvenli girişini bu tek adresten oluşturur. Web App'inizin panelinde Environment Variables'ı açın ve bunu alan adınızla değiştirin:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

https:// ile başlayan alan adınız

Değişkeni kaydedin Yeni adresin build'e eklenmesi için Settings & Redeploy'dan yeniden dağıtın Build'in bitmesini bekleyin

Canlı Mağazanızı Test Edin

Alan adınızı açın ve kontrol edin:

Adres https:// ile başlıyor ve kilit simgesi görünüyor

Rayın üzerinde gezinmek lambaları yakıyor ve her fotoğraf yükleniyor

Mağaza ve bir ürün sayfası açılır, bir lamba sepete eklenir

Supabase ile: /admin adresinden giriş yapabiliyorsunuz

/shop/no-such-lamp gibi uydurma bir adres, bulunamadı sayfasını gösteriyor

Aydınlatma mağazanız kendi alan adınızda canlı. Sonradan değiştirmek için ürünleri admin panelinden düzenleyin — veya Claude'dan kod değişiklikleri yapmasını ve bunları yayınlamasını isteyin: Hostinger, main'e yapılan her push'ta mağazanızı yeniden derler.