Como criar um encurtador de links com QR Code e analytics

Aprenda a criar um encurtador de links próprio com QR Code e contador de cliques usando Lovable e Supabase. Tutorial passo a passo para iniciantes, sem código.

Ferramentas usadas:

• Lovable — constrói a interface e a lógica sem código

• Supabase — guarda os links e os cliques

O que é um banco de dados? É um lugar organizado onde a informação fica guardada — como uma planilha que o app consulta e atualiza sozinho. Aqui, ele guarda cada link curto e quantas vezes foi clicado.

Como um encurtador de links funciona por dentro

Antes de construir, vale entender a lógica — é mais simples do que parece.

Quando alguém acessa seusite.com/abc123, o sistema:

1. Lê o código abc123 no final do endereço

2. Procura no banco de dados qual link longo corresponde a esse código

3. Registra que aconteceu um clique

4. Redireciona a pessoa para o link longo original

Todo encurtador de links do mundo funciona nesse princípio. Você vai construir exatamente isso.

Passo 1 — Crie o projeto no Lovable

Acesse o Lovable e use este prompt inicial:

Crie um encurtador de links chamado "LinkCurto".

TELA PRINCIPAL:
- Campo para colar um link longo
- Botão "Encurtar"
- Ao encurtar, mostra: o link curto gerado, um botão de copiar, 
  e o QR Code correspondente para baixar
- Abaixo, lista dos links já criados com: link curto, 
  link original, número de cliques e data de criação

PÁGINA DE REDIRECIONAMENTO (/:codigo):
- Quando alguém acessa um link curto, registra o clique 
  no banco e redireciona para o link original

PAINEL DE ESTATÍSTICAS:
- Total de links criados
- Total de cliques somados
- Link mais clicado

GERAÇÃO DE CÓDIGO:
- Cada link curto deve ter um código aleatório de 6 caracteres 
  (letras e números)

Use Supabase como banco de dados.
Design: fundo escuro, azul como cor de destaque, 
visual limpo e responsivo.

Passo 2 — Conecte o Supabase

Vá em Settings → Integrations → Supabase no Lovable e conecte (conta gratuita em supabase.com).

Confirme que a tabela de links tem estas colunas:

create table links (
  id          uuid primary key default gen_random_uuid(),
  codigo      text unique not null,
  url_destino text not null,
  cliques     int default 0,
  criado_em   timestamp default now()
);

O campo codigo é o que aparece no final do link curto (o abc123). O unique garante que não existam dois links com o mesmo código — cada um é único.

Passo 3 — Gere os códigos curtos

O coração do encurtador é gerar um código curto e único para cada link. Instrua o Lovable:

Quando o usuário encurtar um link:
1. Gere um código aleatório de 6 caracteres (letras minúsculas 
   e números)
2. Verifique se esse código já existe no banco; se existir, 
   gere outro
3. Salve o código junto com a URL de destino
4. Monte o link curto no formato: [seu domínio]/[código]

O código em JavaScript para gerar o código curto:

function gerarCodigo() {
  const caracteres = 'abcdefghijklmnopqrstuvwxyz0123456789';
  let codigo = '';
  for (let i = 0; i < 6; i++) {
    codigo += caracteres.charAt(
      Math.floor(Math.random() * caracteres.length)
    );
  }
  return codigo;
}

Com 6 caracteres entre letras e números, são bilhões de combinações possíveis — você nunca vai esgotar os códigos.

Passo 4 — Adicione o QR Code

O QR Code é o que torna o link útil para material impresso, stories e divulgação offline. Instrua o Lovable:

Após gerar o link curto, crie automaticamente um QR Code 
que aponta para esse link.
Use uma biblioteca de geração de QR Code (como qrcode.react 
ou similar disponível).
Mostre o QR Code na tela com um botão "Baixar QR Code" 
que salva como imagem PNG.

Por que QR Code importa? Ele conecta o offline ao online. Um QR Code num panfleto, num cartão ou num story leva a pessoa direto ao link sem precisar digitar nada. Para divulgação, é poderoso.

Passo 5 — Faça o redirecionamento e a contagem funcionarem

Essa é a parte que faz tudo se conectar. Quando alguém acessa o link curto, o sistema precisa contar o clique e redirecionar. Instrua o Lovable:

Crie a lógica de redirecionamento:
- Quando alguém acessar /[codigo], busque o link no banco
- Incremente o campo "cliques" daquele link em 1
- Redirecione a pessoa para a url_destino
- Se o código não existir, mostre uma página de "link não encontrado"

Faça a contagem antes do redirecionamento, mas de forma 
que o usuário não perceba nenhum atraso.

Passo 6 — Conecte seu próprio domínio

Um encurtador de links fica muito mais profissional com domínio próprio — seudominio.com.br/abc em vez de um endereço genérico.

Se você já tem hospedagem na Hostinger, pode apontar um subdomínio (ex: link.seusite.com.br) para o projeto publicado. No Lovable, depois de publicar via Vercel, é só adicionar o domínio personalizado nas configurações.

Domínio curto faz diferença: quanto menor o endereço, mais fácil de compartilhar e mais confiável ele parece.

Erros comuns de quem está começando