The latest articles on DEV Community by r4martins1 (@r4martins1). https://dev.to/r4martins1 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3909187%2F26096ec3-b1c2-4a2b-9956-04f7b320062a.png https://dev.to/r4martins1 en r4martins1 Sat, 02 May 2026 14:50:23 +0000 https://dev.to/r4martins1/implementei-o-br-code-do-pix-do-zero-em-typescript-1ga7 https://dev.to/r4martins1/implementei-o-br-code-do-pix-do-zero-em-typescript-1ga7 <p>Toda vez que eu precisava de um CPF de teste, eu caía em algum site<br> cheio de pop-ups, banners e tracker. Mesma coisa pra paleta de cores,<br> gerador de slogan, lorem ipsum, hashtags. Resolvi construir uma coleção<br> limpa em PT-BR — sem cadastro, sem ruído, sem rastros.</p> <p>Resultado: <a href="https://geradores.digital" rel="noopener noreferrer">geradores.digital</a> — 30 geradores<br> gratuitos + 3 ferramentas Pro. Stack: Next.js 16 + Vercel + zero backend.</p> <p>Aproveito pra compartilhar duas coisas que aprendi no processo.</p> <h2> A coleção </h2> <p><strong>30 grátis</strong>, agrupados em 8 categorias:</p> <ul> <li> <strong>Negócios</strong> — CPF, CNPJ, RG, telefone, CEP, placa Mercosul, chave PIX, domínios, nomes de empresa, slogan</li> <li> <strong>Design</strong> — paleta de cores, gradiente CSS, box-shadow, border-radius, cor aleatória</li> <li> <strong>Marketing</strong> — hashtags por nicho, bio Instagram, ideias de conteúdo</li> <li> <strong>Dev</strong> — UUID v4, Lorem Ipsum (latim e português), hash MD5/SHA-1/SHA-256</li> <li> <strong>Vida</strong> — cardápio semanal, treino, citações</li> <li> <strong>Segurança</strong> — senhas (com <code>crypto.getRandomValues</code>) e PIN</li> <li> <strong>Nomes</strong> — bebê, usuário</li> <li> <strong>Diversão</strong> — sorteador, personagem RPG</li> </ul> <p><strong>3 Pro</strong> (R$ 49 vitalício, sem assinatura):</p> <ul> <li>Pix QR Code com chave/valor/identificador customizados</li> <li>Banco de Usuários Mock (até 1000 perfis BR completos com CSV/JSON export — perfeito pra QA)</li> <li>Pacote de Favicons (1 imagem → 8 tamanhos + manifest + snippet HTML)</li> </ul> <h2> Stack &amp; decisões </h2> <ul> <li> <strong>Next.js 16</strong> com App Router, tudo prerendered estático</li> <li> <strong>Vercel</strong> edge — <code>gru1</code> (São Paulo) entrega em ~50ms pra Brasil</li> <li> <strong>Tailwind CSS 3</strong> + Inter/Nunito (Google Fonts via <code>next/font</code>)</li> <li> <strong>Sem backend</strong> — toda lógica roda no navegador via Web APIs</li> <li> <strong>Sem analytics invasivo</strong> — só Vercel Analytics nativo</li> <li> <strong>Pagamentos</strong> — Stripe Checkout (BRL nativo, suporte a Pix)</li> <li> <strong>Pro state</strong> — <code>localStorage</code> com chave do Stripe Session ID</li> </ul> <p>Decisão importante: rejeitei autenticação. Pro key fica em <code>localStorage</code><br> do navegador. Phase 2 vou adicionar login, mas pra v1 fricção zero ganhou.</p> <h2> A parte técnica que mais curti: BR-Code do Pix </h2> <p>O Banco Central do Brasil definiu o <strong>BR-Code</strong> — extensão do padrão EMV<br> QR Code internacional pra Pix. É TLV (Tag-Length-Value) com checksum<br> CRC-16/CCITT. Implementei do zero porque as bibliotecas existentes ou<br> estão desatualizadas ou trazem dependências pesadas.</p> showdev braziliandevs sideprojects nextjs