Xây dựng cửa hàng đèn tương tác bằng AI (Supabase + Hostinger)

Claude Desktop

Claude Code chạy bên trong đó và tùy chỉnh cửa hàng của bạn. Cần có gói Claude trả phí.

Tải Claude Desktop

https://claude.ai/download

Tài khoản GitHub

Miễn phí. Bản sao LUMIÈRE của riêng bạn nằm ở đây, và Hostinger triển khai từ đó.

Tạo tài khoản GitHub

https://github.com/signup

Hosting Hostinger

Cửa hàng trực tuyến của bạn chạy ở đây. Bạn chọn gói ở Bước 2.

Bạn không cần Node.js, trình soạn thảo mã hay terminal. Hostinger build và chạy cửa hàng, còn Claude lo phần chỉnh sửa.

Xem trước và sao chép LUMIÈRE

Hãy thử cửa hàng hoàn chỉnh trước: lướt dọc thanh ray đồng thau để bật các đèn thả, kéo chúng, và nhấn vào một chiếc để mở bộ chỉnh độ sáng. Bản demo không có trang quản trị và không có thanh toán.

Mở Live Demo của LUMIÈRE

Mặt tiền cửa hàng hoàn chỉnh, chạy ngay trong trình duyệt của bạn.

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

Mở LUMIÈRE trên GitHub

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

Nhấn Use this template, rồi Create a new repository Đặt tên và chọn Public hoặc Private Nhấn Create repository

Xác nhận đây là bản sao của riêng bạn

Địa chỉ của kho bắt đầu bằng github.com/ và tên người dùng của chính bạn

Bên dưới tên kho, GitHub ghi rằng nó được tạo từ salhiworks/lumiere-lighting-store

Từ đây, bạn chỉ dùng kho của riêng mình. Hostinger deploy nó ở Bước 2, và Claude Desktop chỉnh sửa nó ở Bước 3. Bộ khởi đầu gốc không bao giờ bị thay đổi.

Mua hosting Node.js

Xuất bản trước, tùy chỉnh sau: chỉ sau vài phút cửa hàng của bạn đã là một website thật, và mọi thay đổi về sau đều hiện lên đó.

Chọn gói Hostinger

Dùng gói Unlimited hoặc gói Cloud — LUMIÈRE được triển khai dưới dạng Node.js Web App, không phải website tĩnh.

Nhập repository của bạn

Hostinger Websites Create site Web App

Chọn một tên miền tạm thời để bắt đầu — bạn sẽ kết nối tên miền riêng ở Bước 5 Chọn Import Git Repository Cấp quyền cho GitHub và chọn bản sao LUMIÈRE của riêng bạn, bản bạn đã tạo ở Bước 1 — không phải bộ khởi đầu gốc

Cấu hình và triển khai

Giữ các thiết lập Next.js mà Hostinger phát hiện — nó tự build và khởi động cửa hàng Chọn Node.js 22 Đảm bảo script build là build — không bao giờ dùng build:demo, lệnh đó build bản demo bị khóa

Trước khi triển khai, hãy thêm địa chỉ website của bạn làm biến môi trường: địa chỉ tạm thời bạn vừa chọn. Bạn chưa cần tên miền chính thức — Bước 5 sẽ thay nó và triển khai lại.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Địa chỉ tạm thời của bạn, bắt đầu bằng https://

Cửa hàng chỉ cần bấy nhiêu thôi. Supabase và Stripe đều là tùy chọn, nên hãy để sau.

Nhấn Deploy và chờ build hoàn tất Mở địa chỉ tạm thời của bạn

Xem cửa hàng của bạn hoạt động trực tuyến

Địa chỉ tạm thời của bạn mở ra cửa hàng LUMIÈRE

Lướt thanh ray làm đèn sáng lên, và mọi ảnh đều tải được

Trang cửa hàng và một trang sản phẩm mở được

Cửa hàng của bạn đã trực tuyến. Từ giờ, mọi thay đổi được đẩy lên nhánh main của kho sẽ được Hostinger tự động build lại và xuất bản.

Mở dự án của bạn trong Claude Desktop

Claude Desktop Code Local

Bắt đầu một phiên Local trong một thư mục như Documents, thêm địa chỉ repository của bạn bên dưới rồi gửi:

Clone bản sao của bạn

Tải kho LUMIÈRE của riêng bạn về một thư mục con mới và kiểm tra xem Claude có thể cập nhật nó không.

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.

Địa chỉ kho của bạn

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

Mở thư mục LUMIÈRE của bạn

Bắt đầu một phiên Local mới Mở thư mục Claude vừa tạo — thư mục có README.md bên trong Nếu Claude Desktop hỏi, hãy tin cậy thư mục này

Claude thay đổi bản sao cửa hàng này và gửi các thay đổi lên kho GitHub của riêng bạn. Sau đó Hostinger cập nhật website trực tuyến của bạn.

Mô tả cửa hàng của bạn cho Claude

Điền những gì bạn biết — để trống phần còn lại và Claude sẽ giữ phiên bản của LUMIÈRE. Rồi gửi trong phiên LUMIÈRE của bạn:

Tùy chỉnh cửa hàng đèn của tôi

Đổi tên, sản phẩm, nội dung và giao diện, đồng thời giữ nguyên hiệu ứng đèn và các cặp ảnh.

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.

Tên cửa hàng

Atelier Nord

Điều gì làm studio đèn của bạn khác biệt?

Đèn thả gốm và đồng thau sản xuất số lượng nhỏ, làm thủ công tại Lisbon và giao khắp châu Âu.

Nhận diện thương hiệu

Đèn của bạn — mỗi dòng một chiếc: tên, lớp hoàn thiện, giá

Chụp gốm, Màu cát, $240 Chóp đồng thau, Xước mờ, $310

Ảnh đèn

Đọc kế hoạch trước khi duyệt. Yêu cầu Claude thay đổi thêm trong cùng phiên cho đến khi cửa hàng thật sự là của bạn.

Dùng ảnh đèn của riêng bạn

Thay ảnh demo trước khi bán

16 ảnh đèn demo lấy từ bản demo của component gốc, và bản quyền của chúng chưa được xác minh. Với cửa hàng thật, hãy dùng ảnh bạn sở hữu hoặc đã được cấp phép.

Mỗi đèn cần hai ảnh: một khi tắt và một khi bật. Thanh ray bật đèn bằng cách chuyển mờ giữa hai ảnh, nên chúng phải khớp nhau tuyệt đối:

Cùng máy ảnh, vị trí và tỷ lệ — chỉ ánh sáng thay đổi

Nền trong suốt, không có bóng đổ dính vào ảnh

Dây đèn đi ra từ cạnh trên, ở chính giữa

Ảnh dọc, cùng một khung cho mọi ảnh — bản demo dùng 557 × 900 px

Nếu không dùng Supabase, hãy đặt từng cặp vào thư mục này trong dự án của bạn, đặt tên theo sản phẩm — ví dụ dome-enamel-off.webp và dome-enamel-on.webp — rồi nhờ Claude dùng chúng và xuất bản. Nếu dùng Supabase, bạn tải các cặp lên trong trang admin, và trang đó sẽ kiểm tra giúp bạn.

public/lamps/

Xuất bản các thay đổi của bạn

Claude gửi cửa hàng đã tùy chỉnh của bạn lên kho GitHub của riêng bạn, và Hostinger build lại website trực tuyến từ đó. Khi bạn hài lòng với các thay đổi, hãy gửi:

Xuất bản các thay đổi của tôi

Kiểm tra cửa hàng, sau đó commit các thay đổi và đẩy chúng lên nhánh main của kho của bạn.

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.

Xem các thay đổi hoạt động trực tuyến

Chờ vài phút để Hostinger build lại cửa hàng của bạn Tải lại địa chỉ trực tuyến của bạn Lướt dọc thanh ray — mọi đèn đều sáng và dây đèn chạm vào ray Nhấn vào một đèn và kéo bộ chỉnh độ sáng — chỉ có ánh sáng thay đổi Mở trang cửa hàng và một trang sản phẩm, rồi thêm một chiếc đèn vào giỏ hàng

Sau vài phút vẫn chưa thấy thay đổi? Mở Settings & Redeploy trong Web App của bạn và redeploy. Thấy có gì đó lạ? Hãy mô tả cho Claude ngay trong cùng phiên, yêu cầu nó sửa mà không đụng đến thanh đèn, rồi xuất bản lại.

Muốn xem trước trên máy tính của bạn? (Tùy chọn)

Bạn không bắt buộc phải làm vậy. Nếu muốn xem các thay đổi trước khi xuất bản, hãy nhờ Claude trong phiên của bạn: cài các dependency, khởi động development server bằng npm run dev và cho tôi địa chỉ local. Cần có Node.js 22 trở lên, và Claude sẽ báo nếu thiếu. Cửa hàng trực tuyến của bạn không bao giờ phụ thuộc vào bước này.

Tạo một dự án Supabase

Cửa hàng trực tuyến của bạn đã chạy được mà không cần Supabase — nếu chỉ cần vậy, hãy chuyển thẳng sang Bước 5. Hãy kết nối nó để quản lý sản phẩm, ảnh, tồn kho và đơn hàng trong trang admin riêng của bạn tại /admin.

Tạo tài khoản Supabase

https://supabase.link/r4gdwhi

Nhấn New project — khu vực nào và gói Free đều được Lưu mật khẩu cơ sở dữ liệu ở nơi an toàn Khi dự án sẵn sàng, sao chép Project ID của nó

Supabase Project Settings General

Cho phép Claude truy cập dự án của bạn

Cách này cho phép Claude thiết lập cơ sở dữ liệu giúp bạn. Trong phiên LUMIÈRE của bạn ở Claude Desktop:

Mở Customize trong thanh bên, rồi Connectors, và thêm Supabase — hoặc nhấp + bên cạnh ô nhập prompt rồi chọn Add connectors Nhấp Connect và chấp thuận quyền truy cập trong trình duyệt, chọn tổ chức chứa dự án của bạn Bắt đầu một phiên Local mới trong cùng thư mục, để Claude nhận kết nối

Bạn đăng nhập qua Supabase trong trình duyệt — không có khóa hay mật khẩu nào được đưa vào prompt. Kết nối này có thể thấy mọi dự án trong tổ chức bạn chấp thuận, vì vậy prompt tiếp theo giới hạn Claude chỉ làm việc với dự án LUMIÈRE của bạn.

Không tìm thấy trình kết nối Supabase, hoặc không muốn dùng? Bỏ qua prompt tiếp theo và dùng phần thiết lập thủ công ở cuối Bước 4: cùng ba tệp SQL đó, không cần trình kết nối.

Nhờ Claude thiết lập cơ sở dữ liệu

Thiết lập LUMIÈRE trên Supabase

Claude áp dụng các migration và sản phẩm của bộ khởi đầu, kiểm tra bảo mật và lưu trữ, rồi đưa cho bạn hai giá trị công khai để dùng cho 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 của bạn

abcdefghijklmnopqrst

Claude hỏi trước mỗi thao tác — hãy đọc, rồi cho phép. Nó dừng lại khi đến lượt bạn.

Tạo tài khoản quản trị

Supabase Authentication Users

Nhấn Add user, rồi Create new user Nhập email và một mật khẩu mạnh Để nguyên Auto Confirm User được đánh dấu và tạo người dùng Cho Claude biết email quản trị của bạn — không bao giờ cho mật khẩu

Supabase Authentication Sign In / Providers

Tắt Allow new users to sign up và lưu — cửa hàng không có tài khoản khách hàng

Chưa có kết nối Supabase? Thiết lập thủ công

Trong dự án Supabase, mở SQL Editor. Chạy ba tệp này từ thư mục LUMIÈRE của bạn, theo đúng thứ tự. Với mỗi tệp, mở ra, sao chép toàn bộ, dán vào một query mới và nhấn Run. Chạy lại tệp nào cũng an toàn.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Sao chép Project URL và Publishable key từ Connect vào Hostinger, như hướng dẫn ở bước tiếp theo. Sau khi tạo người dùng admin ở trên, hãy thêm email của bạn bên dưới và chạy đoạn này trong SQL Editor:

Đặt tôi làm quản trị viên

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

Email quản trị của bạn

you@example.com

Thêm các biến Supabase trên Hostinger

Cửa hàng trực tuyến của bạn đọc Supabase qua hai giá trị công khai. Trong dashboard của Web App, mở Environment Variables và thêm:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Project URL của Supabase

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key của Supabase

Claude đã đưa cho bạn cả hai giá trị. Chúng cũng có trong Connect.

Mở Connect

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

Chỉ giá trị công khai

Tuyệt đối không thêm Secret key hay service_role key của Supabase vào đây. Mọi biến bắt đầu bằng NEXT_PUBLIC_ đều hiển thị được trong trình duyệt.

Lưu các biến — Hostinger sẽ build lại cửa hàng của bạn với chúng Chưa build lại? Redeploy từ Settings & Redeploy Mở /admin trên địa chỉ trực tuyến của bạn và đăng nhập bằng email admin

Trong trang quản trị, bạn thêm và sửa sản phẩm, tải lên các cặp ảnh OFF/ON, và quản lý tồn kho cùng đơn hàng. Mỗi lần lưu đều cập nhật thanh ray, trang cửa hàng và các trang sản phẩm.

Kết nối tên miền của bạn

Hostinger Your Web App Connect domain

Nhập tên miền và làm theo các bước kết nối Tên miền đăng ký ở nơi khác? Thêm các bản ghi DNS mà Hostinger hiển thị tại nhà đăng ký tên miền Giữ lại mọi bản ghi email hiện có Đợi đến khi tên miền hiện là đã kết nối và SSL đang hoạt động

Thay đổi DNS có thể mất vài giờ để đến được với mọi người — tối đa 24 giờ.

Kết nối tên miền tùy chỉnh với website hoặc Web App của bạn

Hướng dẫn đầy đủ, bao gồm cả tên miền đăng ký ở nơi khác.

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

Chuyển sang tên miền của bạn và deploy lại

Cửa hàng xây dựng các liên kết, sitemap và đăng nhập bảo mật của trang quản trị từ chính địa chỉ này. Trong bảng điều khiển Web App, mở Environment Variables và đổi nó thành tên miền của bạn:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Tên miền của bạn, bắt đầu bằng https://

Lưu biến Deploy lại từ Settings & Redeploy, để địa chỉ mới được đưa vào bản build Chờ build hoàn tất

Kiểm tra cửa hàng trực tuyến

Mở tên miền của bạn và kiểm tra:

Địa chỉ bắt đầu bằng https:// và có biểu tượng ổ khóa

Lướt thanh ray làm đèn sáng lên, và mọi ảnh đều tải được

Trang cửa hàng và trang sản phẩm mở được, và một chiếc đèn được thêm vào giỏ hàng

Có Supabase: bạn đăng nhập được tại /admin

Một địa chỉ bịa ra, như /shop/no-such-lamp, hiển thị trang không tìm thấy

Cửa hàng đèn của bạn đã trực tuyến trên tên miền riêng. Để thay đổi sau này, hãy chỉnh sản phẩm trong trang admin — hoặc nhờ Claude thay đổi mã và xuất bản: Hostinger build lại cửa hàng của bạn sau mỗi lần push lên main.