Bangun Toko Lampu Interaktif dengan AI (Supabase + Hostinger)

Claude Desktop

Claude Code berjalan di dalamnya dan menyesuaikan toko Anda. Anda memerlukan paket Claude berbayar.

Unduh Claude Desktop

https://claude.ai/download

Akun GitHub

Gratis. Salinan LUMIÈRE milik Anda tersimpan di sini, dan Hostinger melakukan deploy dari sini.

Buat Akun GitHub

https://github.com/signup

Hosting Hostinger

Toko live Anda berjalan di sini. Anda memilih paket di Langkah 2.

Anda tidak perlu Node.js, editor kode, atau terminal. Hostinger membangun dan menjalankan toko Anda, dan Claude yang mengeditnya.

Pratinjau dan Salin LUMIÈRE

Coba dulu toko yang sudah jadi: sapukan kursor di sepanjang rel kuningan untuk menyalakan lampu gantung, seret lampunya, dan klik salah satunya untuk membuka peredupnya. Demo ini tidak punya admin dan checkout.

Buka Live Demo LUMIÈRE

Etalase toko yang sudah jadi, berjalan di browser Anda.

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

Buka LUMIÈRE di GitHub

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

Klik Use this template, lalu Create a new repository Beri nama dan pilih Public atau Private Klik Create repository

Pastikan Ini Salinan Milik Anda

Alamat repository diawali github.com/ dan nama pengguna Anda sendiri

Di bawah namanya, GitHub menyebutkan repository ini dibuat dari salhiworks/lumiere-lighting-store

Mulai sekarang, Anda hanya memakai repository milik Anda sendiri. Hostinger melakukan deploy-nya di Langkah 2, dan Claude Desktop mengeditnya di Langkah 3. Starter aslinya tidak pernah diubah.

Dapatkan Hosting Node.js

Publikasikan dulu, sesuaikan kemudian: dalam beberapa menit toko Anda sudah menjadi website sungguhan, dan setiap perubahan berikutnya langsung tampil di sana.

Pilih Paket Hostinger

Gunakan paket Unlimited atau paket Cloud — LUMIÈRE di-deploy sebagai Node.js Web App, bukan situs statis.

Impor Repository Anda

Hostinger Websites Create site Web App

Pilih domain sementara untuk memulai — Anda menghubungkan domain sendiri di Langkah 5 Pilih Import Git Repository Beri izin kepada GitHub dan pilih salinan LUMIÈRE milik Anda sendiri, yang Anda buat di Langkah 1 — bukan starter aslinya

Konfigurasi & Deploy

Pertahankan pengaturan Next.js yang terdeteksi oleh Hostinger — Hostinger sendiri yang membangun dan menjalankan toko Pilih Node.js 22 Pastikan script build adalah build — jangan pernah build:demo, yang membangun demo terkunci

Sebelum men-deploy, tambahkan alamat situsmu sebagai environment variable: alamat sementara yang baru saja kamu pilih. Kamu belum perlu domain finalmu — Langkah 5 menggantinya dan men-deploy ulang.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Alamat sementara Anda, diawali https://

Hanya itu yang dibutuhkan toko. Supabase dan Stripe sama-sama opsional, jadi biarkan untuk nanti.

Klik Deploy dan tunggu build selesai Buka alamat sementara Anda

Lihat Toko Anda Tayang

Alamat sementara Anda membuka toko LUMIÈRE Anda

Menyapu rel menyalakan lampu, dan setiap foto termuat

Toko dan halaman produk terbuka

Toko Anda sudah live. Mulai sekarang, setiap perubahan yang di-push ke branch main repository Anda akan dibangun ulang dan dipublikasikan oleh Hostinger secara otomatis.

Buka Proyek Anda di Claude Desktop

Claude Desktop Code Local

Mulai sesi Local di folder seperti Documents, tambahkan alamat repositori Anda di bawah, lalu kirim:

Clone Salinan Anda

Mengunduh repository LUMIÈRE milik Anda ke subfolder baru dan memeriksa apakah Claude dapat memperbaruinya.

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.

Alamat repository Anda

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

Buka Folder LUMIÈRE Anda

Mulai sesi Local baru Buka folder yang baru dibuat Claude — yang berisi README.md Jika Claude Desktop bertanya, percayai folder tersebut

Claude mengubah salinan toko Anda ini dan mengirim perubahannya ke repository GitHub milik Anda. Hostinger kemudian memperbarui website live Anda.

Jelaskan Toko Anda kepada Claude

Isi yang Anda ketahui — biarkan sisanya kosong, dan Claude akan mempertahankan versi LUMIÈRE. Lalu kirimkan di sesi LUMIÈRE Anda:

Sesuaikan Toko Lampu Saya

Mengganti nama, produk, teks, dan tampilan, serta mempertahankan animasi lampu dan pasangan fotonya persis seperti aslinya.

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.

Nama toko

Atelier Nord

Apa yang membuat studio lampu Anda berbeda?

Lampu gantung keramik dan kuningan produksi terbatas, dibuat tangan di Lisbon dan dikirim ke seluruh Eropa.

Identitas visual

Lampu Anda — satu per baris: nama, finishing, harga

Kubah keramik, Pasir, $240 Kerucut kuningan, Brushed, $310

Foto lampu

Baca rencananya sebelum Anda menyetujuinya. Minta Claude melakukan perubahan lain di sesi yang sama sampai toko terasa seperti milik Anda.

Gunakan Foto Lampu Anda Sendiri

Ganti foto demo sebelum Anda berjualan

16 foto lampu demo berasal dari demo komponen aslinya, dan hak penggunaannya belum terverifikasi. Untuk toko sungguhan, gunakan foto milik Anda atau yang sudah Anda lisensikan.

Setiap lampu membutuhkan dua foto: satu saat mati dan satu saat menyala. Rel menyalakan lampu dengan crossfade di antara keduanya, jadi keduanya harus sejajar persis:

Kamera, posisi, dan skala sama — hanya cahayanya yang berubah

Latar belakang transparan, tanpa bayangan yang menempel

Kabel keluar dari tepi atas, di tengah

Potret, dengan kanvas yang sama untuk setiap foto — demo memakai 557 × 900 px

Tanpa Supabase, letakkan setiap pasangan di folder ini pada proyek Anda, dengan nama sesuai produk — misalnya dome-enamel-off.webp dan dome-enamel-on.webp — lalu minta Claude menggunakannya dan mempublikasikan. Dengan Supabase, Anda mengunggah pasangan di admin, dan admin akan memeriksanya untuk Anda.

public/lamps/

Publikasikan Perubahan Anda

Claude mengirim toko yang sudah Anda sesuaikan ke repository GitHub milik Anda, dan Hostinger membangun ulang website live Anda dari sana. Saat Anda puas dengan perubahannya, kirim:

Publikasikan Perubahan Saya

Memeriksa toko, lalu melakukan commit atas perubahan Anda dan mem-push-nya ke branch main repository Anda.

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.

Lihat Perubahan Anda Tayang

Tunggu beberapa menit sampai Hostinger selesai membangun ulang toko Anda Muat ulang alamat live Anda Sapukan kursor di sepanjang rel — setiap lampu menyala dan kabelnya bertemu dengan rel Klik sebuah lampu dan geser peredupnya — hanya cahayanya yang berubah Buka toko dan halaman produk, lalu tambahkan lampu ke keranjang

Tidak ada yang berubah setelah beberapa menit? Buka Settings & Redeploy di Web App Anda lalu deploy ulang. Ada yang terlihat janggal? Jelaskan ke Claude di sesi yang sama, minta ia memperbaikinya tanpa menyentuh rel lampu, lalu publikasikan lagi.

Ingin Pratinjau di Komputer Anda? (Opsional)

Anda tidak wajib melakukannya. Jika ingin melihat perubahan sebelum dipublikasikan, minta Claude di sesi Anda: instal dependensi, jalankan server pengembangan dengan npm run dev, dan berikan alamat lokalnya. Ini memerlukan Node.js 22 atau lebih baru, dan Claude akan memberi tahu jika belum ada. Toko live Anda tidak pernah bergantung padanya.

Buat Proyek Supabase

Toko live Anda sudah berfungsi tanpa Supabase — langsung ke Langkah 5 jika itu cukup. Hubungkan untuk mengelola produk, foto, stok, dan pesanan di admin Anda sendiri di /admin.

Buat Akun Supabase

https://supabase.link/r4gdwhi

Klik New project — region apa pun dan paket Free sudah cukup Simpan kata sandi database di tempat yang aman Setelah proyek siap, salin Project ID-nya

Supabase Project Settings General

Izinkan Claude Menjangkau Proyek Anda

Ini memungkinkan Claude menyiapkan database untuk Anda. Di sesi LUMIÈRE Anda di Claude Desktop:

Buka Customize di sidebar, lalu Connectors, dan tambahkan Supabase — atau klik + di sebelah kotak prompt lalu pilih Add connectors Klik Connect dan setujui akses di browser Anda, dengan memilih organisasi yang berisi proyek Anda Mulai sesi Local baru di folder yang sama, agar Claude mengenali koneksinya

Anda masuk melalui Supabase di browser — tidak ada kunci atau kata sandi yang dimasukkan ke prompt. Koneksi ini dapat melihat semua proyek di organisasi yang Anda setujui, jadi prompt berikutnya membatasi Claude hanya pada proyek LUMIÈRE Anda.

Tidak menemukan konektor Supabase, atau lebih suka tidak memakainya? Lewati prompt berikutnya dan gunakan penyiapan manual di akhir Langkah 4: tiga file SQL yang sama, tanpa konektor.

Minta Claude Menyiapkan Database

Siapkan LUMIÈRE di Supabase

Claude menerapkan migrasi dan produk dari starter, memeriksa keamanan dan storage, lalu memberi Anda dua nilai publik untuk 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 Anda

abcdefghijklmnopqrst

Claude bertanya sebelum setiap tindakan — baca dulu, lalu izinkan. Claude berhenti saat giliran Anda.

Buat Akun Admin Anda

Supabase Authentication Users

Klik Add user, lalu Create new user Masukkan email Anda dan kata sandi yang kuat Biarkan Auto Confirm User tetap dicentang, lalu buat user Beri tahu Claude email admin Anda — jangan pernah kata sandinya

Supabase Authentication Sign In / Providers

Matikan Allow new users to sign up dan simpan — toko ini tidak punya akun pelanggan

Tidak Ada Koneksi Supabase? Siapkan Secara Manual

Di proyek Supabase Anda, buka SQL Editor. Jalankan tiga file ini dari folder LUMIÈRE Anda, sesuai urutan ini. Untuk setiap file, buka, salin semuanya, tempel ke query baru, lalu klik Run. Setiap file aman dijalankan ulang.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Salin Project URL dan Publishable key Anda dari Connect ke Hostinger, seperti ditunjukkan di langkah berikutnya. Setelah membuat pengguna admin Anda di atas, tambahkan email Anda di bawah dan jalankan ini di SQL Editor:

Jadikan Saya Administrator

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

Email admin Anda

you@example.com

Tambahkan Variabel Supabase di Hostinger

Toko live Anda membaca Supabase melalui dua nilai publik. Di dashboard Web App Anda, buka Environment Variables dan tambahkan:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key Supabase

Claude sudah memberi Anda kedua nilai tersebut. Nilainya juga ada di Connect.

Buka Connect

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

Hanya nilai publik

Jangan pernah menambahkan Secret key atau service_role key Supabase di sini. Apa pun yang diawali NEXT_PUBLIC_ terlihat di browser.

Simpan variabelnya — Hostinger membangun ulang toko Anda dengan variabel tersebut Belum dibangun ulang? Deploy ulang dari Settings & Redeploy Buka /admin di alamat live Anda dan masuk dengan email admin Anda

Di admin, Anda menambah dan mengedit produk, mengunggah pasangan foto OFF/ON, serta mengelola stok dan pesanan. Setiap penyimpanan memperbarui rel, toko, dan halaman produk.

Hubungkan Domain Anda

Hostinger Your Web App Connect domain

Masukkan domain Anda dan ikuti langkah koneksinya Domain terdaftar di tempat lain? Tambahkan record DNS yang ditampilkan Hostinger di registrar Anda Pertahankan record email yang sudah ada Tunggu sampai domain tampil sebagai terhubung dan SSL aktif

Perubahan DNS bisa butuh beberapa jam untuk menjangkau semua orang — hingga 24 jam.

Hubungkan Domain Kustom ke Website atau Web App Anda

Panduan lengkap, termasuk domain yang terdaftar di tempat lain.

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

Beralih ke Domain Anda dan Deploy Ulang

Toko Anda membangun tautan, sitemap, dan login aman admin dari satu alamat ini. Di dashboard Web App Anda, buka Environment Variables dan ubah menjadi domain Anda:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Domain Anda, diawali https://

Simpan variabelnya Deploy ulang dari Settings & Redeploy, agar alamat baru ikut dibangun Tunggu hingga build selesai

Uji Toko Live Anda

Buka domain Anda dan periksa:

Alamatnya diawali https:// dan ikon gembok tampil

Menyapu rel menyalakan lampu, dan setiap foto termuat

Toko dan halaman produk terbuka, dan sebuah lampu masuk ke keranjang

Dengan Supabase: Anda bisa masuk di /admin

Alamat asal-asalan, seperti /shop/no-such-lamp, menampilkan halaman tidak ditemukan

Toko lampu Anda sudah live di domain Anda sendiri. Untuk mengubahnya nanti, edit produk di admin — atau minta Claude melakukan perubahan kode dan mempublikasikannya: Hostinger membangun ulang toko Anda setiap ada push ke main.