Aplicação web single page responsiva para busca de CEP, geração e preenchimento automatizado de etiquetas de endereçamento de encomendas.
| Desktop, Tablet e Mobile |
|---|
 |
| Desktop | Remetente e Visualização da Impressão | Destinatário e Footer |
|---|---|---|
 |
 |
 |
| Remetente Mobile | Destinatário Mobile | Preview de Impressão e Footer Mobile |
|---|---|---|
 |
 |
 |
O Endereçador é uma Single Page Application (SPA) robusta desenvolvida para resolver o problema da geração manual de etiquetas de postagem.
A aplicação automatiza o preenchimento de endereços utilizando a API ViaCEP, gera códigos de barras (Code 128) para rastreio automatizado e suporta envios internacionais com tradução de campos e seleção de países.
O sistema permite criar lotes de etiquetas para múltiplos destinatários mantendo o mesmo remetente.
A aplicação foi feita utilizando como modelo as etiquetas dos Correios do Brasil, focando em agilidade logística e padronização de envios de encomendas nacionais e internacionais.
- React - Biblioteca principal de UI
- TypeScript - Tipagem estática e segurança de código
- Tailwind CSS - Estilização utilitária e responsividade
- Vite - Build tool de alta performance
- React-to-print - Gerenciamento de impressão e renderização de componentes
- React-barcode - Geração de códigos de barras (Code 128)
- Lucide React - Ícones vetoriais modernos
- Clsx - Construção condicional de classes CSS
-
ViaCEP - API de consulta de endereços brasileiros
-
Netlify - Hospedagem e CI/CD
-
Google Fonts - Tipografia (Inter/Roboto)
Google AI Tools - Assistência de Desenvolvimento
1 - Google AI Studio - Vibe Coding e Refinamento de Código
ViaCEP - API de consulta de endereços brasileiros
Netlify - Hospedagem e CI/CD
Google Fonts - Tipografia (Inter/Roboto)
- ✅ Busca Automática de CEP: Integração com ViaCEP para preenchimento rápido.
- ✅ Geração de Código de Barras: Facilita a triagem automatizada nos Correios.
- ✅ Modo Internacional: Suporte a envios para o exterior com base de dados de países e tradução (PT/EN).
- ✅ Impressão em Lote: Adicione múltiplos destinatários e imprima tudo de uma vez.
- ✅ Design Print-Friendly: Layout otimizado para economia de tinta e leitura por scanners.
- ✅ Identificação de Contato: Suporte visual para telefone Fixo ☎️ ou Celular 📱.
- ✅ Modos de Envio (Carta vs. Encomenda): Seleção de layout específico. O modo Carta gera uma grade de até 16 etiquetas por página, enquanto o modo Encomenda gera etiquetas detalhadas com declaração.
- ✅ Declaração de Conteúdo Automatizada: Geração da declaração obrigatória dos Correios com cálculo automático de totais, lista de itens e texto legal atualizado (Lei 8.137/90).
- ✅ Suporte a Aviso de Recebimento (AR): Opção para gerar automaticamente as etiquetas pequenas (Remetente e Destinatário) para colagem no cartão de AR.
- ✅ Layouts de Impressão Dinâmicos:
- Encomenda sem AR: 2 conjuntos por página (40% Etiqueta / 60% Declaração).
- Encomenda com AR: 2 conjuntos completos por página, incluindo as etiquetas de AR no topo.
- ✅ Paginação Inteligente de Itens: Caso a lista de itens da declaração exceda o limite do layout, o sistema cria automaticamente páginas de continuação.
- ✅ Modal de Ajuda: Guia interativo integrado à interface para auxiliar novos usuários.
- Identidade Visual: Cor primária
#07426B(Azul Naval) transmitindo confiança e profissionalismo. - Feedback Visual: Botões interativos com estados de hover, disabled e active (Teal/Red).
- Tipografia: Fontes sem serifa para máxima legibilidade na impressão.
- Acessibilidade: Campos com labels claros, foco visível e ícones de suporte.
- ✅ Aplicação Client-Side leve e rápida (Vite).
- ✅ Sem dependência de banco de dados (Dados voláteis para privacidade).
- ✅ Estilização atômica (Tailwind) para menor CSS bundle size.
Hospedagem: Netlify
Site de Produção: Acesse o Endereçador Aqui.
Desenvolvido por Carlos Lopes "Sk8"
# Clone o repositório
git clone https://github.com/CHCLopes/ProjetoEnderecador
# Instale as dependências
npm install
# Execute em modo desenvolvimento
npm run dev
# Build para produção
npm run build