Este projeto é uma atualização moderna de uma ferramenta criada originalmente há 6 anos. O objetivo continua o mesmo: ajudar microempreendedores individuais (MEIs) e facilitar pagamentos entre amigos (aquela cerveja no trabalho remoto! 🍻).
Ele permite gerar QR Codes Pix estáticos (padrão EMVCo/BRCode) que podem ser lidos por qualquer aplicativo bancário brasileiro.
O projeto foi totalmente refatorado para tecnologias atuais:
- React 18: Atualizado da versão 16/17, utilizando
createRoote Hooks modernos. - React Router v6: Navegação mais declarativa e segura.
- Modo de Impressão (Novo!): Página dedicada
/imprimircom layout limpo e otimizado para papel (sem botões, sem URLs, borda de alto contraste). - Geração de PDF Personalizada: Modal interativo com opções de tamanho (Pequeno, Normal, Médio, Grande) para o QR Code no PDF.
- Validação de Chaves: Suporte para CPF, E-mail, Telefone e Chaves Aleatórias com validação em tempo real.
- Performance: Implementação de debounce para geração de QR Code sem travamentos.
- Testes: Cobertura de testes unitários com Jest e React Testing Library.
- Estrutura Organizada: Seguindo melhores práticas do React com barrel exports e separação clara de responsabilidades.
src/
├── app/ # Configuração principal do aplicativo
│ ├── App.js
│ ├── App.test.js
│ └── routes/
│ └── AppRoutes.js # Configuração de rotas
├── assets/
│ ├── images/ # Imagens e logos
│ │ └── logo.svg
│ └── styles/ # Estilos CSS globais
│ ├── App.css
│ └── index.css
├── components/ # Componentes reutilizáveis
│ └── PixCard/
│ ├── PixCard.js # Componente de exibição do QR Code
│ └── index.js # Barrel export
├── hooks/ # Hooks customizados
│ ├── useDebounce.js
│ └── index.js
├── pages/ # Páginas da aplicação
│ ├── QrCodePage/
│ │ ├── QrCodePage.js
│ │ ├── QrCodePage.test.js
│ │ └── index.js
│ ├── PrintPage/
│ │ ├── PrintPage.js # Página de impressão/PDF
│ │ └── index.js
│ └── ConfirmTransactionPage/
│ ├── ConfirmTransactionPage.js
│ ├── ConfirmTransactionPage.test.js
│ └── index.js
└── utils/ # Utilitários e helpers
├── pix.js # Lógica de geração de payload Pix
├── validators.js # Validadores de chave Pix
├── validators.test.js
└── index.js
- React (v18)
- React Router (v6)
- react-qr-code (v2)
- html2canvas - Captura de elemento para PDF
- jsPDF - Geração de PDF no cliente
- Bootstrap 3 (Mantido para fidelidade visual original)
sequenceDiagram
participant User as Usuário
participant App as QRCode Pix
participant Print as Impressão/PDF
User->>App: Digita Chave Pix (CPF, Email, Phone)
App->>App: Valida Formato (Real-time + Debounce)
alt Chave Válida
App-->>User: Exibe QR Code automaticamente
User->>App: Clica "Imprimir"
App->>Print: Navega para /imprimir
Print-->>User: Exibe Cartão Limpo (Sem botões)
User->>Print: Clica "Gerar PDF"
Print-->>User: Modal com opções de tamanho
User->>Print: Escolhe tamanho (Pequeno/Normal/Médio/Grande)
Print->>Print: Gera PDF com html2canvas + jsPDF
Print-->>User: Download automático do PDF
else Chave Inválida
App-->>User: Oculta QR Code e exibe erro
end
O projeto passou por uma revisão rigorosa de manutenibilidade e legibilidade:
- Arquitetura: Separação clara entre Lógica (
QrCodePage) e Apresentação (PixCard). - Hooks: Lógica complexa extraída para hooks reutilizáveis (
useDebounce). - Barrel Exports: Todos os componentes e páginas utilizam barrel exports para imports limpos.
- Padrões: Código limpo, variáveis semânticas e sem números mágicos.
- Segurança: Nenhum dado sensível é persistido ou enviado para servidores externos. Tudo roda no navegador do cliente.
- Node.js 18+ (recomendado: v22.22.0)
- npm ou yarn
-
Clone o repositório:
git clone https://github.com/LeonardoJaques/qrcodePix.git cd qrcodePix -
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm start
O app abrirá em http://localhost:3000.
Para rodar os testes unitários e de validação:
npm testPara verificar o build de produção:
npm run build- Digite sua chave Pix (CPF, email, telefone ou chave aleatória)
- Preencha os dados opcionais: Nome do beneficiário, cidade e valor
- O QR Code será gerado automaticamente quando a chave for válida
- Clique em "Imprimir" para ir para a página de impressão
- Escolha "Gerar PDF" e selecione o tamanho desejado
- O PDF será baixado automaticamente com o QR Code centralizado em formato A4
O aplicativo salva automaticamente no localStorage:
- Nome do beneficiário
- Cidade
Esses dados serão preenchidos automaticamente na próxima vez que você acessar a aplicação.
✅ Resolvido! A versão atual utiliza configurações otimizadas do html2canvas:
scale: 3- Alta resoluçãoallowTaint: true- Permite captura de elementos SVGforeignObjectRendering: false- Melhor compatibilidade com SVG
Se ainda assim tiver problemas, tente:
- Atualizar o navegador para a versão mais recente
- Desabilitar extensões que bloqueiam canvas/downloads
- Verificar se o JavaScript está habilitado
Contribuições são bem-vindas! Sinta-se à vontade para:
- Fork o projeto
- Criar uma branch para sua feature (
git checkout -b feature/NovaFeature) - Commit suas mudanças (
git commit -m 'Adiciona nova feature') - Push para a branch (
git push origin feature/NovaFeature) - Abrir um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com ❤️ para a comunidade MEI brasileira.