Crie um clone o Linktree em 30 minutos

O Linktree resolve um problema real: centralizar todos os seus links num só lugar para colocar na bio do Instagram. Mas cobra pelo que tem de melhor — analytics, domínio próprio, remoção da marca deles — a partir de US$ 5/mês.

Hoje você vai construir o seu próprio, do zero, com tudo que o plano pago do Linktree oferece. E ainda vai adicionar rastreamento de cliques por link — algo que o Linktree cobra extra.

Tempo estimado: 30 minutos.

---

O que vamos construir

• Página pública com seus links (ex: seusite.com/links)

• Visual 100% personalizável — sua cara, suas cores

• Contador de cliques por link em tempo real

• Painel privado para adicionar, editar e reordenar links

• Deploy gratuito via Vercel

Stack: Lovable para interface e lógica, Supabase para banco de dados e contagem de cliques.

---

Passo 1 — Prompt inicial no Lovable

Crie uma aplicação de link-in-bio chamada "Meus Links".

PÁGINA PÚBLICA (/links):
- Lista de cards verticais, um por link
- Cada card tem: ícone emoji, título do link e URL de destino
- Ao clicar, abre o link em nova aba E registra o clique no banco
- Design: fundo escuro #0A0A0A, cards com borda sutil, 
  destaque azul #2563EB no hover
- Foto de perfil circular no topo + nome + bio curta
- Totalmente responsivo para mobile

PAINEL PRIVADO (/admin) — protegido por senha simples:
- Tabela com todos os links: título, URL, cliques, ordem, ativo/inativo
- Botões para adicionar novo link, editar, reordenar (drag and drop) 
  e ativar/desativar sem deletar
- Gráfico simples de cliques por link nos últimos 7 dias

Use Supabase como banco de dados.

---

Passo 2 — Estrutura no Supabase

O Lovable vai criar as tabelas automaticamente, mas confirme que tem:

Tabela links:

sql

create table links (
  id         uuid primary key default gen_random_uuid(),
  titulo     text not null,
  url        text not null,
  emoji      text default '🔗',
  ordem      int default 0,
  ativo      boolean default true,
  cliques    int default 0,
  criado_em  timestamp default now()
);

Tabela cliques_log (para o gráfico por período):

sql

create table cliques_log (
  id         uuid primary key default gen_random_uuid(),
  link_id    uuid references links(id),
  clicado_em timestamp default now()
);

A tabela cliques_log registra cada clique individual com timestamp — isso permite filtrar por período (últimos 7 dias, mês, etc.) sem perder o histórico.

---

Passo 3 — A lógica de clique que faz a diferença

O comportamento padrão de um link em nova aba é simples. Mas para registrar o clique antes de redirecionar, você precisa de um intermediário.

Instrua o Lovable:

Quando o usuário clicar em um link na página pública:
1. Chame a função que incrementa o campo "cliques" na tabela links
2. Insira um novo registro na tabela cliques_log com o link_id e timestamp atual
3. Depois abra o URL de destino em nova aba

Use uma Edge Function do Supabase chamada "registrar-clique" 
para fazer as duas operações em uma chamada só, evitando 
que o usuário perceba qualquer delay.

Essa Edge Function vai ser algo assim:

typescript

Deno.serve(async (req) => {
  const { link_id } = await req.json()
  const supabase = createClient(...)

  await Promise.all([
    supabase.from('links').update({ 
      cliques: supabase.rpc('increment', { x: 1 }) 
    }).eq('id', link_id),
    supabase.from('cliques_log').insert({ link_id })
  ])

  return new Response(JSON.stringify({ ok: true }))
})

Com Promise.all, as duas operações rodam em paralelo — sem delay perceptível para o usuário.

---

Passo 4 — Personalize o visual

Aqui é onde você sai do "clone do Linktree" e cria algo com a sua identidade. Instrua o Lovable com as suas preferências:

Atualize o visual da página pública:
- Foto de perfil: [URL da sua foto]
- Nome: [seu nome]
- Bio: [sua bio curta]
- Cor principal: [sua cor]
- Fonte: Inter ou Poppins (Google Fonts)
- Adicione um gradiente sutil no fundo
- Cards com glass effect (backdrop-filter: blur)
- Animação suave de entrada nos cards (fade + slide up)

O visual final vai ser completamente diferente do Linktree padrão — e vai parecer um projeto profissional.

---

Passo 5 — Proteja o painel

O Lovable vai criar uma rota /admin. Instrua como proteger:

Proteja a rota /admin com autenticação simples:
- Ao acessar, mostra um campo de senha
- Se a senha correta for digitada, libera o painel e salva 
  o acesso no sessionStorage
- A senha deve ser verificada contra uma variável de ambiente 
  ADMIN_PASSWORD no Supabase
- Adicione botão de logout que limpa a sessão

Para um projeto pessoal, autenticação por senha única é suficiente e evita a complexidade de criar conta de usuário.

---

Deploy e domínio

Conecte o projeto ao GitHub pelo Lovable e faça o deploy na Vercel. Você vai ter uma URL como meus-links.vercel.app gratuitamente.

Para usar seu próprio domínio (ex: links.seusite.com.br), vá em Vercel → Domains → Add Domain. Se você já tem hospedagem na Hostinger, é só apontar um subdomínio para a Vercel com um registro CNAME.

---

O que você tem que o Linktree não tem

• Dados 100% seus — nenhum terceiro tem acesso às suas métricas

• Sem branding de terceiros na sua página

• Histórico completo de cliques com timestamp — você sabe não só quantos clicaram, mas quando

• Controle total do visual — qualquer mudança é uma instrução no Lovable

• Custo zero para manter no ar

---

Vire isso num produto

Se você gostou do que construiu, esse projeto tem potencial de micro SaaS. Com algumas adições:

• Multi-usuário: cada pessoa cria sua conta e tem sua própria página

• Domínio personalizado: cada usuário conecta o próprio domínio

• Analytics avançado: origem do tráfego, dispositivo, país

Ferramentas como Linktree, Beacons e Milkshake cobram exatamente por isso. Você acabou de construir a fundação.