MVP Paycheck BR - Validador
Validação rápida e simples de Pix, Boletos e Cartões. Um projeto que evoluiu para uma interface Neobrutalista vibrante com o poder da IA assistida.
O PayCheckBR é um projeto pessoal para estudar as validações dos meios de pagamento mais comuns no Brasil.
Aplicando SDD (Spec-Driven Design, Design Orientado por Especificações) nos novos fluxos de trabalho, atualizei o layout, o código e a documentação do projeto.
Conceitos fundamentais
| Conceito | O que é |
|---|---|
| SDD (Spec-Driven Design, Design Orientado por Especificações) | Metodologia que exige um contrato de intenção antes de qualquer linha de código. |
| TLV (Tag-Length-Value, Marcador-Comprimento-Valor) | Estrutura de codificação para organizar campos de pagamento em sequência de bytes. |
| FEBRABAN (Federação Brasileira de Bancos) | Define o padrão do formato de boletos bancários no Brasil. |
| IIN/BIN (Issuer/Bank Identification Number, Número de Identificação do Emissor) | Prefixo numérico que identifica a bandeira e o emissor de um cartão de crédito. |
| Neobrutalism (neobrutalismo) | Estilo visual com bordas rígidas, sombras projetadas e alto contraste cromático. |
Stack
Backend
| Tecnologia | Papel |
|---|---|
| Vitest | Suíte de testes determinísticos |
| GitHub Actions | CI para validação de algoritmos |
| ES Modules | Módulos nativos sem bundler adicional |
Frontend
| Tecnologia | Papel |
|---|---|
| React 18 & Vite | SPA client-side |
| Tailwind CSS | Design System Neobrutalista |
| Lucide React | Iconografia técnica |
Arquitetura e Engenharia
| Padrão | Descrição | Detalhes |
|---|---|---|
| PIX - TLV Linear | Estrutura baseada em intervalos de bytes | Mapeamento Tag-Length-Value conforme EMV QRCPS |
| Boleto - FEBRABAN | Mapeamento sequencial FEBRABAN | Estrutura das 47 posições da linha digitável |
| Cartão - ISO/IEC 7812 | Auditoria estrutural de cartões | Identificação de IIN/BIN, bandeira e país |
| Tema - Neobrutalism | Interface de alto contraste | Bordas rígidas (3px) e sombras projetadas (4px) |
| Código - Narrative Coding | Lógica auto-explicativa | Variáveis que explicam o 'porquê' do protocolo |
Destaques UI
Em cada tipo de validação, as tags TLV (Pix) recebem destaque visual e os Dígitos Verificadores (Boleto e Cartão) ganham backgrounds vibrantes (bg-danger), facilitando a identificação dos dados mais relevantes.
Validando um cartão de crédito
