HOSTINGER HORIZONS + SUPABASE: Como transformar um site estático em um sistema dinâmico (passo a passo)

Criar um site bonito é só o começo. Se você precisa atualizar conteúdos com frequência — projetos, portfólios, números da empresa, posts ou mesmo uma carteira de clientes — ter uma área administrativa ligada a um banco de dados muda tudo. Vou mostrar como eu transformei um site feito no Hostinger Horizons em um sistema dinâmico usando o Supabase, sem precisar programar uma linha e com recursos como login, upload de imagens, CRUD e até um CRM com quadro Kanban.

Este guia segue um fluxo prático: contratar o Horizons, criar o projeto no Supabase, conectar as duas plataformas, pedir para a ferramenta gerar o painel administrativo e depois estender para um CRM. Vou incluir dicas de prompt para o gerador de interface e cuidados importantes de segurança e usabilidade.

Passo 1: Por que usar Hostinger Horizons + Supabase?

Hostinger Horizons é um editor que permite criar sites com auxílio de inteligência artificial direto no painel da Hostinger. O grande diferencial aqui é a integração pronta com serviços como o Supabase, que funciona como o backend (banco de dados, autenticação e storage). A combinação elimina a necessidade de instalar ferramentas locais ou conhecer profundamente linguagens de programação.

Vantagens principais:

• Velocidade: você monta um painel administrativo e funcionalidades dinâmicas em minutos.
• Economia: evita atualizações recorrentes via IA que consumiriam créditos toda vez que algo mudar.
• Escalabilidade: dá para adicionar módulos (ex: CRM, orçamentos, blog) conforme a necessidade.
• Sem servidor local: tudo funciona direto do painel da Hostinger e do Supabase.

Passo 2: Contratar o Horizons e acessar o editor

Se você ainda não tem o Horizons, escolha um dos planos do Hostinger que inclui essa ferramenta. Após o checkout, entre no painel da Hostinger e vá em Sites para ver a lista de projetos. Clique em Adicionar site com Horizons ou, se já tiver criado o site, clique em Editar sobre o projeto desejado.

O editor abre uma interface visual. A partir daqui conseguimos conectar o Supabase via integrações e pedir à própria IA do Horizons para construir painéis administrativos e módulos dinâmicos.

Passo 3: Criar o projeto no Supabase

O Supabase fornece banco de dados PostgreSQL, autenticação e storage (para uploads de imagens). Você pode criar uma conta gratuita e, normalmente, ter até dois projetos no plano grátis.

Passos no Supabase:

1. Crie uma conta no Supabase e vá ao dashboard.
2. Clique em Start your project e escolha um nome de projeto e organização.
3. Gere uma senha segura para o banco (será usada apenas para criar o projeto inicialmente).
4. Aguarde a criação e confirme que o projeto aparece no dashboard.

Passo 4: Conectar o Supabase ao Hostinger Horizons

Volte ao painel do Hostinger e abra as Integrações. Selecione Supabase e autorize a conexão. O Horizons solicita permissão para criar um projeto dentro da sua conta Supabase; aprove e siga os passos para vincular o projeto que você criou.

Depois de conectado, o site está pronto para usar o Supabase como fonte de dados. O próximo passo é pedir à IA do editor que construa a interface administrativa que vai manipular esses dados.

Passo 5: Pedir para a IA criar o painel administrativo (prompt prático)

Uma das partes mais legais: você fala com a IA do Horizons em linguagem natural e ela monta o CRUD para você. CRUD significa Create, Read, Update, Delete — criar, ler, atualizar e apagar registros.

Exemplo de instrução prática que usei (você pode adaptar):

Cria para mim um painel administrativo com login e senha para que eu possa gerenciar os projetos do meu site.
Sessão na home chamada "Nossos Projetos". Preciso de um CRUD para cadastrar, ler, editar e remover projetos.
Campos: título, descrição, upload de imagem com máscara de crop no formato do frontend.
Cria um usuário padrão: admin / admin123 (eu vou trocar depois).

Detalhes importantes que você pode especificar no prompt:

• Campos obrigatórios e tipos (texto, textarea, imagem, data, número).
• Máscara de crop e proporção para as imagens do front-end.
• Regras de validação (tamanho mínimo do título, limite do arquivo, etc.).
• Layout desejado do dashboard (colunas, botões de ação, filtros).

Passo 6: Criar o usuário no Supabase Authentication

Mesmo que a IA gere o formulário de login, é necessário criar o usuário no painel do Supabase para autenticar. No Supabase, vá em Authentication > Users e Create new user. Insira o e-mail sugerido pelo painel e a senha que preferir.

Depois, acesse o painel administrativo via URL do site com o sufixo indicado (por exemplo, /admin/login). Faça o login com o usuário criado para testar o CRUD.

Passo 7: Testar o CRUD e ajustar o front-end

Ao cadastrar um novo projeto no painel administrativo, verifique se os dados aparecem no front-end. Teste:

• Upload de imagem e crop.
• Exibição do título e descrição no componente “Nossos Projetos”.
• Edição e exclusão de registros.

Se houver problemas de layout ou visual, você pode pedir à IA do Horizons para ajustar o CSS ou o arranjo dos elementos. Um pedido direto e simples funciona bem:

O design do dashboard administrativo está com problemas de layout e CSS. Ajuste a aparência: alinhe os botões, corrija espaçamentos e melhore a tipografia para ficar mais limpo e legível.

Na prática, a IA muitas vezes corrige pequenas falhas rapidamente. Ainda assim, sempre percorra o fluxo — criar, editar, excluir e visualizar — para garantir que tudo funcione como você espera.

Passo 8: Expandir — criar um CRM com Kanban

Depois do sistema de projetos, é natural querer um módulo para gerir clientes. Pedi um módulo chamado CRM com quadro Kanban e foi criado em minutos. Elementos que incluí no prompt:

• Formulário de cadastro de cliente: nome, e-mail, telefone, observações.
• Funil com 5 etapas: Novo, Em atendimento, Proposta, Contrato fechado, Cancelado.
• Possibilidade de arrastar cards entre colunas (drag and drop).
• Campos personalizados e anotações dentro do card.

Com isso, eu tenho um funil visual para cada cliente e posso anotar o histórico do atendimento. Também é possível pedir integrações posteriores, como envio de e-mails automáticos ou geração de propostas em PDF.

Dicas de prompts para módulos avançados

Algumas sugestões úteis para comunicar melhor suas necessidades à IA do Horizons:

• Seja específico: liste campos, tipos e regras de validação.
• Descreva comportamento esperado: ex: “Ao salvar o projeto, envie um thumbnail otimizado para o storage”.
• Peça versões iterativas: primeiro peça o CRUD básico, depois peça melhorias de design e novas funcionalidades.
• Use exemplos: envie prints ou textos de exemplo para que a IA alinhe aparência e linguagem.

Como economizar créditos e tempo usando banco de dados

Muita gente usa IA para alterar conteúdo do site sempre que quer uma atualização. Isso consome créditos e tempo. Se os conteúdos seguem um padrão (título, descrição, foto), vale muito a pena criar um painel administrativo e armazenar tudo no banco de dados.

Benefícios práticos:

• Você edita de um formulário e o front-end atualiza automaticamente.
• Evita re-gerar páginas com IA para mudanças simples.
• Cliente final pode administrar conteúdos sem pedir ajuda técnica.

Boas práticas de segurança e configuração

Alguns pontos importantes para deixar seu sistema mais seguro e profissional:

• Troque a senha padrão: nunca deixe admin/admin123 em produção.
• Configuração de roles: no Supabase, configure políticas de segurança (Row Level Security) para limitar acesso.
• HTTPS: garanta que o site esteja publicado via HTTPS para proteger credenciais e uploads.
• Backups: mesmo usando Supabase, faça exportações periódicas do banco.
• Limites de upload: defina tamanho máximo de arquivos e valide tipos permitidos.

O que é possível construir depois

Depois de ter o básico, as possibilidades crescem rápido. Aqui vão ideias que você pode pedir para adicionar:

• Gerador de orçamentos/propostas com templates e PDF export.
• Envio de e-mails/transações com modelos para notificações e follow-ups.
• Integração com gateways de pagamento para recebimento de depósitos.
• Relatórios e dashboards com métricas de vendas, projetos ou clientes.
• Blog dinâmico com tags, categorias e buscas.

Exemplo prático: prompt completo para CRM com Kanban

Cria um módulo CRM dentro do painel administrativo.
Requisitos:
- Tela de cadastro de cliente: nome (obrigatório), e-mail, telefone, observação (textarea).
- Funil com 5 colunas: Novo, Em atendimento, Proposta, Contrato fechado, Cancelado.
- Cada cliente aparece como card com nome e e-mail, ao abrir o card mostra telefone e observações.
- Permitir arrastar cards entre colunas e salvar a posição no banco.
- CRUD completo para clientes (criar, ler, atualizar, deletar).
- Adicione campo de "última interação" que atualiza automaticamente quando uma nota for adicionada.

Quando contratar alguém para fazer por você

Se você não quer mexer com a interface ou não tem tempo, contratar alguém para executar dentro do seu painel é uma alternativa válida. Eu mesmo presto esse serviço: entro no seu painel do Horizons, crio os módulos necessários e ajusto a segurança. Mas se preferir aprender, esse processo é ótimo para dominar o que chamo de vibe coding — criar sistemas rápidos sem programar tradicionalmente.

Erros comuns e como resolver

• Login não funciona: verifique se o usuário foi criado no Supabase Authentication e se o endpoint de autenticação está corretamente ligado ao painel.
• Imagens não aparecem: cheque permissões do storage e as rotas de acesso público ou geradas pelo Supabase.
• Layouts quebrados: peça para a IA ajustar CSS ou faça pequenas correções manuais no editor do Horizons.
• Dados não sincronizam: confirme se as tabelas do banco estão mapeadas com os campos do formulário do painel.

Conclusão

Transformar um site estático em um sistema dinâmico com Hostinger Horizons e Supabase é rápido, acessível e permite que profissionais de qualquer área — arquitetos, médicos, psicólogos, veterinários — montem ferramentas sob medida para seu trabalho. A chave é pensar quais partes do site serão dinâmicas e pedir à IA para criar formulários e fluxos que alimentem o banco de dados.

Se a prioridade é ter algo funcionando rápido sem se tornar refém de alterações constantes via IA, invista em um painel administrativo conectado a um banco. Você vai economizar créditos, ganhar autonomia para atualizar conteúdos e criar funcionalidades que realmente apoiem seu negócio.

Resumo rápido

1. Contrate o Hostinger Horizons e abra o editor.
2. Crie um projeto no Supabase.
3. Conecte o Supabase via integrações do Horizons.
4. Peça à IA para gerar o CRUD e o painel administrativo.
5. Crie um usuário no Supabase Authentication e teste o login.
6. Publique e valide o front-end dinâmico.
7. Expanda com módulos como CRM, orçamentos e relatórios.

Se quiser, comece com um módulo simples hoje: transforme “Nossos Projetos” em dinâmico e depois evolua para um CRM. Em pouco tempo você terá um sistema funcional sem precisar programar. Aproveite a praticidade e foque no que realmente importa: seu serviço e seus clientes.