~/orcamento
Quer um site ou sistema feito por mim?
Os projetos para clientes passam pela Web4Business, onde a equipe faz o orçamento.
~/redes
Onde me encontrar
- GitHubRepositórios, experimentos e projetos abertos.@cmacetko (abre em nova aba)
- LinkedInA trajetória profissional: mais de duas décadas construindo a web./in/cmacetko (abre em nova aba)
- InstagramO lado colorido: maquiagens, dia a dia e bastidores.@paloma_macetko (abre em nova aba)
- FacebookOnde compartilho a jornada com amigos e comunidade./cmacetko (abre em nova aba)
paloma_macetko:~/projetos/beco $ cat README.md
Beco dos Scripts
Caixa de ferramentas de dev que roda inteira no navegador: geradores, formatador de JSON, JWT, UUID, QR Code — sem anúncios e sem enviar dados.
- React 18
- TypeScript
- Tailwind CSS
- shadcn/ui
- 100% client-side
01 · Visão geral
Caixa de ferramentas de dev, direto no navegador
Uma caixa de utilitários que uso no dia a dia de quem desenvolve — geradores, conversores e validadores organizados por categoria. Cada ferramenta roda inteira no navegador, sem instalação e sem enviar seus dados para lugar nenhum.
Ferramentas de dev vivem espalhadas por dezenas de sites cheios de anúncios. O Beco reúne as essenciais numa interface só, limpa e client-side.
O que faz
- Geradores de CPF, CNPJ e cartão de crédito para testes
- Segurança: gerador de senhas, decodificador de JWT e gerador de UUID
- Dev: formatador de JSON, diff checker, gerador de QR Code e Base64
- Texto: Lorem Ipsum e conversor de HTML Entities
- Busca rápida por ferramenta e navegação por atalho de teclado
02 · Galeria
Telas do produto no ar
Capturadas de becodosscripts.palomamacetko.com.br. Clique numa tela para ver em tamanho real.
/A caixa de ferramentas: categorias na lateral e todas as ferramentas em cards./json-formatterFormatador de JSON com o editor do VS Code (Monaco), validação e visão em árvore./password-generatorGerador de senhas com tamanho, tipos de caractere e exclusão de ambíguos./qrcode-generatorGerador de QR Code para texto, URL ou Wi-Fi, com download em PNG ou SVG./jwt-decoderDecodificador de JWT: cabeçalho e payload lidos localmente, sem enviar o token.
03 · Stack
Do que é feito, camada por camada
Tirado do código-fonte e do que roda em produção.
Front-end
React 18 + TypeScript- SPA com Vite 6 (SWC) e React Router; cada ferramenta carrega sob demanda.
Tailwind CSS + shadcn/ui- Interface com componentes Radix acessíveis e tema claro, escuro ou do sistema.
cmdk- Paleta de comandos global com Ctrl/⌘+K.
Bibliotecas das ferramentas
Monaco Editor- O editor do VS Code no formatador de JSON.
diff- Comparação por caractere, palavra ou linha no Diff Checker.
jwt-decode · react-qr-code- Decodificação de tokens e geração de QR Code no navegador.
Back-end
Nenhum- Tudo roda no navegador: nenhuma chamada fetch no código, nada sai da sua máquina.
SEO e plataforma
react-helmet-async- Título e descrição próprios em cada ferramenta.
Capacitor 7- Projetos Android e iOS prontos para empacotar o mesmo código.
Qualidade
TypeScript + ESLint 9- Tipagem em todo o código e lint com typescript-eslint.
Hospedagem e métricas
Vercel- Build estático do Vite, com toda rota reescrita para a SPA.
Google Tag Manager- Um page_view a cada troca de rota, mesmo sem recarregar a página.
04 · Destaques
Decisões técnicas que valem a leitura
Geradores com dígito verificador correto
CPF e CNPJ saem válidos — inclusive no novo formato alfanumérico de CNPJ — e os cartões de teste passam no algoritmo de Luhn para várias bandeiras.
Paleta de comandos global
Ctrl/⌘+K abre uma busca que acha qualquer ferramenta de qualquer página, sem tirar a mão do teclado.
O editor do VS Code no navegador
O formatador de JSON usa o Monaco, com validação ao vivo, formatar e minificar, e uma visão em árvore para JSON grande.
Privacidade por arquitetura
Sem back-end não há o que vazar: tokens, JSONs e textos processados ficam no navegador. As preferências também ficam só nele.
O conversor que imita o PHP
Reproduz o utf8_encode e o utf8_decode com TextEncoder e TextDecoder em ISO-8859-1: gera o "é" de propósito ou conserta o texto que já chegou quebrado.
Termos e política gerados ao vivo
Os geradores de termos de uso e de política de privacidade refazem o texto a cada tecla, em texto puro ou HTML, e copiam com um clique.