Build an Interactive Lighting Store with AI (Supabase + Hostinger)

Claude Desktop

Claude Code runs inside it and customizes your store. It needs a paid Claude plan.

Download Claude Desktop

https://claude.ai/download

GitHub account

Free. Your own copy of LUMIÈRE lives here, and Hostinger deploys from it.

Create GitHub Account

https://github.com/signup

Hostinger hosting

Your live store runs here. You choose a plan in Step 2.

You don't need Node.js, a code editor or a terminal. Hostinger builds and runs your store, and Claude does the editing.

Preview and Copy LUMIÈRE

Try the finished store first: brush along the brass rail to switch the pendants on, drag them, and click one to open its dimmer. The demo has no admin and no checkout.

Open the LUMIÈRE Live Demo

The finished storefront, running in your browser.

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

Open LUMIÈRE on GitHub

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

Click Use this template, then Create a new repository Name it and choose Public or Private Click Create repository

Confirm It's Your Own Copy

The repository's address starts with github.com/ and your own username

Under its name, GitHub says it was generated from salhiworks/lumiere-lighting-store

From here on, you only use your own repository. Hostinger deploys it in Step 2, and Claude Desktop edits it in Step 3. The original starter is never changed.

Get Node.js Hosting

Publish first, customize second: in a few minutes your store is a real website, and every later change shows up on it.

Choose a Hostinger Plan

Use the Unlimited plan or a Cloud plan — LUMIÈRE deploys as a Node.js Web App, not a static website.

Import Your Repository

Hostinger Websites Create site Web App

Choose a temporary domain to start — you connect your own in Step 5 Select Import Git Repository Authorize GitHub and select your own copy of LUMIÈRE, the one you created in Step 1 — not the original starter

Configure & Deploy

Keep the Next.js settings Hostinger detects — it builds and starts the store itself Choose Node.js 22 Make sure the build script is build — never build:demo, which builds the locked demo

Before you deploy, add your site's address as an environment variable: the temporary address you just chose. You don't need your final domain yet — Step 5 switches it and redeploys.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Your temporary address, starting with https://

That's all the store needs. Supabase and Stripe are both optional, so leave them for later.

Click Deploy and wait for the build to finish Open your temporary address

See Your Store Live

Your temporary address opens your LUMIÈRE store

Brushing the rail lights the lamps, and every photo loads

The shop and a product page open

Your store is live. From now on, every change pushed to the main branch of your repository is rebuilt and published by Hostinger automatically.

Open Your Project in Claude Desktop

Claude Desktop Code Local

Start a Local session in a folder such as Documents, add your repository's address below, and send:

Clone Your Copy

Downloads your own LUMIÈRE repository into a new subfolder and checks that Claude can update it.

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.

Your repository's address

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

Open Your LUMIÈRE Folder

Start a new Local session Open the folder Claude just created — the one with README.md inside If Claude Desktop asks, trust the folder

Claude changes this copy of your store and sends the changes to your own GitHub repository. Hostinger then updates your live website.

Describe Your Store to Claude

Fill in what you know — leave the rest blank and Claude keeps LUMIÈRE's version. Then send it in your LUMIÈRE session:

Customize My Lighting Store

Rebrands the name, products, copy and look, and keeps the lamp animations and photo pairs exactly as they are.

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.

Store name

Atelier Nord

What makes your lighting studio different?

Small-batch ceramic and brass pendants, made by hand in Lisbon and shipped across Europe.

Visual identity

Your lamps — one per line: name, finish, price

Ceramic dome, Sand, $240 Brass cone, Brushed, $310

Lamp photos

Read the plan before you approve it. Ask Claude for more changes in the same session until the store feels like yours.

Use Your Own Lamp Photos

Replace the demo photos before you sell

The 16 demo lamp photos come from the original component's demo, and their rights are unverified. Use photos you own or have licensed for a real store.

Each lamp needs two photos: one unlit and one lit. The rail switches a lamp on by crossfading them, so they must line up exactly:

Same camera, position and scale — only the light changes

Transparent background, with no shadow baked in

The cord comes from the top edge, centred

Portrait, the same canvas for every photo — the demo uses 557 × 900 px

Without Supabase, put each pair in this folder of your project, named after the product — for example dome-enamel-off.webp and dome-enamel-on.webp — then ask Claude to use them and publish. With Supabase, you upload pairs in the admin instead, and it checks them for you.

public/lamps/

Publish Your Changes

Claude sends your customized store to your own GitHub repository, and Hostinger rebuilds your live website from it. When you're happy with the changes, send:

Publish My Changes

Checks the store, then commits your changes and pushes them to the main branch of your repository.

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.

See Your Changes Live

Wait a few minutes for Hostinger to rebuild your store Reload your live address Brush along the rail — every lamp lights up and its cord meets the track Click a lamp and move its dimmer — nothing but the light changes Open the shop and a product page, and add a lamp to the cart

Nothing changed after a few minutes? Open Settings & Redeploy in your Web App and redeploy. Something looks off? Describe it to Claude in the same session, ask it to fix it without touching the lamp rail, then publish again.

Want to Preview on Your Computer? (Optional)

You never have to. If you'd like to see changes before you publish them, ask Claude in your session: install the dependencies, start the development server with npm run dev, and give me the local address. It needs Node.js 22 or newer, and Claude tells you if it's missing. Your live store never depends on it.

Create a Supabase Project

Your live store already works without Supabase — skip to Step 5 if that's all you need. Connect it to manage products, photos, stock and orders in your own admin at /admin.

Create Supabase Account

https://supabase.link/r4gdwhi

Click New project — any region and the Free plan are fine Save the database password somewhere safe When the project is ready, copy its Project ID

Supabase Project Settings General

Let Claude Reach Your Project

This lets Claude set up your database for you. In your LUMIÈRE session in Claude Desktop:

Open Customize in the sidebar, then Connectors, and add Supabase — or click + next to the prompt box and select Add connectors Click Connect and approve the access in your browser, choosing the organization that holds your project Start a new Local session in the same folder, so Claude picks up the connection

You sign in through Supabase in your browser — no key or password goes into a prompt. The connection can see every project in the organization you approve, so the next prompt limits Claude to your LUMIÈRE project.

Can't find the Supabase connector, or would rather not use one? Skip the next prompt and use the manual setup at the end of Step 4: the same three SQL files, no connector needed.

Ask Claude to Set Up the Database

Set Up LUMIÈRE on Supabase

Claude applies the starter's migrations and products, checks security and storage, then gives you the two public values for 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.

Your Supabase Project ID

abcdefghijklmnopqrst

Claude asks before each action — read it, then allow it. It stops when it's your turn.

Create Your Admin Account

Supabase Authentication Users

Click Add user, then Create new user Enter your email and a strong password Leave Auto Confirm User ticked and create the user Tell Claude your admin email — never your password

Supabase Authentication Sign In / Providers

Turn off Allow new users to sign up and save — the store has no customer accounts

No Supabase Connection? Set It Up by Hand

In your Supabase project, open SQL Editor. Run these three files from your LUMIÈRE folder, in this order. For each one, open it, copy everything, paste it into a new query and click Run. Each is safe to run again.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Copy your Project URL and Publishable key from Connect into Hostinger, as shown in the next step. After creating your admin user above, add your email below and run this in the SQL Editor:

Make Me an Administrator

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

Your admin email

you@example.com

Add the Supabase Variables on Hostinger

Your live store reads Supabase through two public values. In your Web App's dashboard, open Environment Variables and add:

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 gave you both values. They're also in Connect.

Open Connect

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

Public values only

Never add the Supabase Secret key or service_role key here. Anything starting with NEXT_PUBLIC_ is visible in the browser.

Save the variables — Hostinger rebuilds your store with them Not rebuilt? Redeploy from Settings & Redeploy Open /admin on your live address and sign in with your admin email

In the admin you add and edit products, upload OFF/ON photo pairs, and manage stock and orders. Every save updates the rail, the shop and the product pages.

Connect Your Domain

Hostinger Your Web App Connect domain

Enter your domain and follow the connection steps Domain registered somewhere else? Add the DNS records Hostinger shows at your registrar Keep any existing email records Wait until the domain shows as connected and SSL is active

DNS changes can take a few hours to reach everyone — up to 24 hours.

Connect a Custom Domain to Your Website or Web App

The full walkthrough, including domains registered elsewhere.

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

Switch to Your Domain and Redeploy

Your store builds its links, sitemap and the admin's secure sign-in from this one address. In your Web App's dashboard, open Environment Variables and change it to your domain:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Your domain, starting with https://

Save the variable Redeploy from Settings & Redeploy, so the new address is built in Wait for the build to finish

Test Your Live Store

Open your domain and check:

The address starts with https:// and the padlock shows

Brushing the rail lights the lamps, and every photo loads

The shop and a product page open, and a lamp goes into the cart

With Supabase: you can sign in at /admin

A made-up address, such as /shop/no-such-lamp, shows the not-found page

Your lighting store is live on your own domain. To change it later, edit products in the admin — or ask Claude for code changes and to publish them: Hostinger rebuilds your store on every push to main.