Crie uma loja de iluminação interativa com IA (Supabase + Hostinger)

Claude Desktop

O Claude Code roda dentro dele e personaliza a sua loja. É necessário um plano pago do Claude.

Baixar o Claude Desktop

https://claude.ai/download

Conta no GitHub

Gratuito. Sua própria cópia do LUMIÈRE fica aqui, e a Hostinger faz a implantação a partir dela.

Criar conta no GitHub

https://github.com/signup

Hospedagem Hostinger

Sua loja no ar roda aqui. Você escolhe um plano no Passo 2.

Você não precisa de Node.js, de um editor de código nem de um terminal. A Hostinger compila e executa a sua loja, e o Claude faz a edição.

Veja e copie o LUMIÈRE

Experimente primeiro a loja pronta: passe o mouse pelo trilho de latão para acender os pendentes, arraste-os e clique em um para abrir o dimmer dele. A demo não tem painel admin nem checkout.

Abrir a demo ao vivo do LUMIÈRE

A loja pronta, rodando no seu navegador.

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

Abrir o LUMIÈRE no GitHub

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

Clique em Use this template e depois em Create a new repository Dê um nome e escolha Public ou Private Clique em Create repository

Confirme que é a sua própria cópia

O endereço do repositório começa com github.com/ e o seu próprio nome de usuário

Abaixo do nome, o GitHub indica que ele foi gerado a partir de salhiworks/lumiere-lighting-store

Daqui em diante, você usa só o seu próprio repositório. A Hostinger faz o deploy dele no Passo 2, e o Claude Desktop o edita no Passo 3. O starter original nunca é alterado.

Contrate hospedagem Node.js

Primeiro publique, depois personalize: em poucos minutos a sua loja é um site de verdade, e cada mudança posterior aparece nele.

Escolha um plano da Hostinger

Use o plano Unlimited ou um plano Cloud — o LUMIÈRE é implantado como uma Node.js Web App, não como um site estático.

Importe seu repositório

Hostinger Websites Create site Web App

Escolha um domínio temporário para começar — você conecta o seu no Passo 5 Selecione Import Git Repository Autorize o GitHub e selecione a sua própria cópia do LUMIÈRE, a que você criou no Passo 1 — não o starter original

Configure e implante

Mantenha as configurações de Next.js que a Hostinger detecta — ela mesma faz o build e inicia a loja Escolha Node.js 22 Confira se o script de build é build — nunca build:demo, que gera a demo bloqueada

Antes de publicar, adicione o endereço do seu site como variável de ambiente: o endereço temporário que você acabou de escolher. Você ainda não precisa do domínio definitivo — a Etapa 5 o troca e publica de novo.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Seu endereço temporário, começando com https://

É só isso que a loja precisa. Supabase e Stripe são opcionais, então deixe para depois.

Clique em Deploy e espere o build terminar Abra o seu endereço temporário

Veja a sua loja no ar

O seu endereço temporário abre a sua loja LUMIÈRE

Passar o mouse pelo trilho acende as luminárias, e todas as fotos carregam

A loja e uma página de produto abrem

Sua loja está no ar. A partir de agora, cada mudança enviada para a branch main do seu repositório é recompilada e publicada pela Hostinger automaticamente.

Abra o seu projeto no Claude Desktop

Claude Desktop Code Local

Inicie uma sessão Local em uma pasta como Documentos, adicione o endereço do seu repositório abaixo e envie:

Clone sua cópia

Baixa o seu próprio repositório do LUMIÈRE em uma nova subpasta e verifica se o Claude consegue atualizá-lo.

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.

O endereço do seu repositório

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

Abra a sua pasta do LUMIÈRE

Inicie uma nova sessão Local Abra a pasta que o Claude acabou de criar — a que tem o README.md dentro Se o Claude Desktop pedir, confie na pasta

O Claude altera esta cópia da sua loja e envia as mudanças para o seu próprio repositório do GitHub. Depois, a Hostinger atualiza o seu site no ar.

Descreva sua loja para o Claude

Preencha o que você sabe — deixe o resto em branco e o Claude mantém a versão do LUMIÈRE. Depois envie na sua sessão do LUMIÈRE:

Personalize minha loja de iluminação

Muda o nome, os produtos, os textos e o visual, e mantém as animações das luminárias e os pares de fotos exatamente como estão.

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.

Nome da loja

Atelier Nord

O que torna seu estúdio de iluminação diferente?

Pendentes de cerâmica e latão em pequenos lotes, feitos à mão em Lisboa e enviados para toda a Europa.

Identidade visual

Suas luminárias — uma por linha: nome, acabamento, preço

Cúpula de cerâmica, Areia, $240 Cone de latão, Escovado, $310

Fotos das luminárias

Leia o plano antes de aprová-lo. Peça mais mudanças ao Claude na mesma sessão até a loja ficar com a sua cara.

Use suas próprias fotos de luminárias

Substitua as fotos de demonstração antes de vender

As 16 fotos de luminárias de demonstração vêm da demo do componente original, e os direitos delas não foram verificados. Para uma loja de verdade, use fotos que sejam suas ou que você tenha licenciado.

Cada luminária precisa de duas fotos: uma apagada e uma acesa. O trilho acende uma luminária com uma transição suave entre elas, então as duas precisam se alinhar exatamente:

Mesma câmera, posição e escala — só a luz muda

Fundo transparente, sem sombra embutida

O fio sai da borda superior, centralizado

Retrato, com a mesma tela para todas as fotos — a demo usa 557 × 900 px

Sem Supabase, coloque cada par nesta pasta do seu projeto, com o nome do produto — por exemplo dome-enamel-off.webp e dome-enamel-on.webp — e peça ao Claude para usá-los e publicar. Com Supabase, você envia os pares pelo admin, que também os verifica para você.

public/lamps/

Publique as suas mudanças

O Claude envia a sua loja personalizada para o seu próprio repositório do GitHub, e a Hostinger recompila o seu site no ar a partir dele. Quando estiver satisfeito com as mudanças, envie:

Publicar minhas mudanças

Verifica a loja, depois faz commit das suas mudanças e as envia para a branch main do seu repositório.

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.

Veja as suas mudanças no ar

Espere alguns minutos para a Hostinger recompilar a sua loja Recarregue o seu endereço no ar Passe o mouse pelo trilho — cada luminária acende e o fio dela encosta no trilho Clique em uma luminária e mova o dimmer dela — só a luz muda Abra a loja e uma página de produto, e adicione uma luminária ao carrinho

Nada mudou depois de alguns minutos? Abra Settings & Redeploy no seu Web App e faça o redeploy. Algo parece errado? Descreva para o Claude na mesma sessão, peça para ele corrigir sem mexer no trilho de lâmpadas e publique de novo.

Quer visualizar no seu computador? (Opcional)

Você nunca precisa fazer isso. Se quiser ver as mudanças antes de publicar, peça ao Claude na sua sessão: instale as dependências, inicie o servidor de desenvolvimento com npm run dev e me dê o endereço local. É preciso ter o Node.js 22 ou mais recente, e o Claude avisa se estiver faltando. Sua loja no ar nunca depende disso.

Criar um projeto no Supabase

Sua loja no ar já funciona sem o Supabase — pule para o Passo 5 se for só isso que você precisa. Conecte-o para gerenciar produtos, fotos, estoque e pedidos no seu próprio admin em /admin.

Criar conta no Supabase

https://supabase.link/r4gdwhi

Clique em New project — qualquer região e o plano Free servem Guarde a senha do banco de dados em um lugar seguro Quando o projeto estiver pronto, copie o Project ID dele

Supabase Project Settings General

Deixe o Claude acessar o seu projeto

Isso permite que o Claude configure o seu banco de dados por você. Na sua sessão do LUMIÈRE no Claude Desktop:

Abra Customize na barra lateral, depois Connectors, e adicione o Supabase — ou clique em + ao lado da caixa do prompt e selecione Add connectors Clique em Connect e aprove o acesso no navegador, escolhendo a organização que contém o seu projeto Inicie uma nova sessão Local na mesma pasta, para o Claude reconhecer a conexão

Você entra no Supabase pelo navegador — nenhuma chave ou senha vai em um prompt. A conexão consegue ver todos os projetos da organização que você aprovar, então o próximo prompt limita o Claude ao seu projeto LUMIÈRE.

Não encontra o conector do Supabase ou prefere não usar um? Pule o próximo prompt e use a configuração manual no final da Etapa 4: os mesmos três arquivos SQL, sem conector.

Peça ao Claude para configurar o banco de dados

Configure o LUMIÈRE no Supabase

O Claude aplica as migrações e os produtos do starter, verifica a segurança e o armazenamento e depois entrega os dois valores públicos para a 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.

Seu Project ID do Supabase

abcdefghijklmnopqrst

O Claude pergunta antes de cada ação — leia e depois permita. Ele para quando for a sua vez.

Crie sua conta de administrador

Supabase Authentication Users

Clique em Add user e depois em Create new user Digite seu e-mail e uma senha forte Deixe Auto Confirm User marcado e crie o usuário Informe ao Claude seu e-mail de administrador — nunca sua senha

Supabase Authentication Sign In / Providers

Desative Allow new users to sign up e salve — a loja não tem contas de clientes

Sem conexão com o Supabase? Configure manualmente

No seu projeto do Supabase, abra o SQL Editor. Execute estes três arquivos da sua pasta do LUMIÈRE, nesta ordem. Para cada um, abra o arquivo, copie tudo, cole em uma nova consulta e clique em Run. Todos podem ser executados de novo com segurança.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Copie o seu Project URL e a Publishable key de Connect para a Hostinger, como mostrado no próximo passo. Depois de criar o seu usuário admin acima, adicione o seu e-mail abaixo e execute isto no SQL Editor:

Torne-me administrador

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

Seu e-mail de administrador

you@example.com

Adicione as variáveis do Supabase na Hostinger

Sua loja no ar lê o Supabase por meio de dois valores públicos. No painel do seu Web App, abra Environment Variables e adicione:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key do Supabase

O Claude entregou os dois valores. Eles também estão em Connect.

Abrir o Connect

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

Somente valores públicos

Nunca adicione aqui a Secret key nem a chave service_role do Supabase. Tudo que começa com NEXT_PUBLIC_ fica visível no navegador.

Salve as variáveis — a Hostinger recompila a sua loja com elas Não recompilou? Faça o redeploy em Settings & Redeploy Abra /admin no seu endereço no ar e entre com o seu e-mail de admin

No painel admin, você adiciona e edita produtos, envia pares de fotos OFF/ON e gerencia estoque e pedidos. Cada vez que você salva, o trilho, a loja e as páginas de produto são atualizados.

Conecte seu domínio

Hostinger Your Web App Connect domain

Digite seu domínio e siga as etapas de conexão Domínio registrado em outro lugar? Adicione no seu registrador os registros DNS que a Hostinger mostrar Mantenha os registros de e-mail existentes Espere até o domínio aparecer como conectado e o SSL estar ativo

As alterações de DNS podem levar algumas horas para chegar a todos — até 24 horas.

Conecte um domínio personalizado ao seu site ou Web App

O passo a passo completo, incluindo domínios registrados em outro lugar.

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

Mude para o seu domínio e implante de novo

Sua loja gera os links, o sitemap e o login seguro do painel admin a partir deste único endereço. No painel da sua Web App, abra Environment Variables e troque-o pelo seu domínio:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Seu domínio, começando com https://

Salve a variável Implante de novo em Settings & Redeploy para que o novo endereço seja incorporado Espere o build terminar

Teste sua loja no ar

Abra seu domínio e confira:

O endereço começa com https:// e o cadeado aparece

Passar o mouse pelo trilho acende as luminárias, e todas as fotos carregam

A loja e uma página de produto abrem, e uma luminária vai para o carrinho

Com Supabase: você consegue fazer login em /admin

Um endereço inventado, como /shop/no-such-lamp, mostra a página de não encontrado

Sua loja de iluminação está no ar no seu próprio domínio. Para alterá-la depois, edite os produtos no admin — ou peça ao Claude mudanças de código e que as publique: a Hostinger recompila a sua loja a cada push para main.