DEV Community

Cover image for Implementei o BR-Code do Pix do zero em TypeScript
r4martins1
r4martins1

Posted on

Implementei o BR-Code do Pix do zero em TypeScript

Toda vez que eu precisava de um CPF de teste, eu caía em algum site
cheio de pop-ups, banners e tracker. Mesma coisa pra paleta de cores,
gerador de slogan, lorem ipsum, hashtags. Resolvi construir uma coleção
limpa em PT-BR — sem cadastro, sem ruído, sem rastros.

Resultado: geradores.digital — 30 geradores
gratuitos + 3 ferramentas Pro. Stack: Next.js 16 + Vercel + zero backend.

Aproveito pra compartilhar duas coisas que aprendi no processo.

A coleção

30 grátis, agrupados em 8 categorias:

  • Negócios — CPF, CNPJ, RG, telefone, CEP, placa Mercosul, chave PIX, domínios, nomes de empresa, slogan
  • Design — paleta de cores, gradiente CSS, box-shadow, border-radius, cor aleatória
  • Marketing — hashtags por nicho, bio Instagram, ideias de conteúdo
  • Dev — UUID v4, Lorem Ipsum (latim e português), hash MD5/SHA-1/SHA-256
  • Vida — cardápio semanal, treino, citações
  • Segurança — senhas (com crypto.getRandomValues) e PIN
  • Nomes — bebê, usuário
  • Diversão — sorteador, personagem RPG

3 Pro (R$ 49 vitalício, sem assinatura):

  • Pix QR Code com chave/valor/identificador customizados
  • Banco de Usuários Mock (até 1000 perfis BR completos com CSV/JSON export — perfeito pra QA)
  • Pacote de Favicons (1 imagem → 8 tamanhos + manifest + snippet HTML)

Stack & decisões

  • Next.js 16 com App Router, tudo prerendered estático
  • Vercel edge — gru1 (São Paulo) entrega em ~50ms pra Brasil
  • Tailwind CSS 3 + Inter/Nunito (Google Fonts via next/font)
  • Sem backend — toda lógica roda no navegador via Web APIs
  • Sem analytics invasivo — só Vercel Analytics nativo
  • Pagamentos — Stripe Checkout (BRL nativo, suporte a Pix)
  • Pro statelocalStorage com chave do Stripe Session ID

Decisão importante: rejeitei autenticação. Pro key fica em localStorage
do navegador. Phase 2 vou adicionar login, mas pra v1 fricção zero ganhou.

A parte técnica que mais curti: BR-Code do Pix

O Banco Central do Brasil definiu o BR-Code — extensão do padrão EMV
QR Code internacional pra Pix. É TLV (Tag-Length-Value) com checksum
CRC-16/CCITT. Implementei do zero porque as bibliotecas existentes ou
estão desatualizadas ou trazem dependências pesadas.

Top comments (0)