Como Engenharia de Software Resolveu um Problema Real na Operação do maker.mourao.info
Construção de uma aplicação de gerador de orçamentos de impressão 3D usando React, TypeScript, Tailwind CSS v4, i18n e arquitetura disciplinada com Git Flow.
Quem opera um serviço de manufatura aditiva sabe que gerenciar pedidos por mensagens informais é uma receita para falhas. O cliente envia o modelo no WhatsApp, esquece de especificar o tipo de filamento (PLA, TPU flexível, PETG), não informa o percentual de preenchimento (infill) ou envia links truncados.
Para resolver essa dor operacional na maker.mourao.info, desenvolvi uma plataforma web de geração de orçamentos estruturados que padroniza o fluxo de pedidos antes de chegar ao atendimento via WhatsApp.
🎯 O Problema de Negócio vs. A Solução Arquitetural
| Gargalo Operacional Anterior | Solução Implementada no Web App |
|---|---|
| Pedidos incompletos e especificações perdidas no chat | Formulário padronizado com campos obrigatórios (modelo, material, cor, quantidade e observações) |
| Perda do carrinho ao atualizar a página | Persistência automática de estado via LocalStorage |
| Dificuldade para atender clientes internacionais | Internacionalização nativa (i18n) em PT-BR e EN com detecção do navegador |
| Retrabalho na digitação de dados | Serialização de payload com codificação URI enviada direto ao WhatsApp |
🛠️ Highlights da Stack & Decisões Técnicas
A aplicação foi construída com foco em performance, tipagem estrita e desacoplamento de responsabilidades.
1. Tipagem Estrita do Domínio (TypeScript)
Todo o contrato de dados da aplicação reside em interfaces estritas no domínio de impressão 3D, garantindo autocompletar e prevenindo bugs no formulário e na listagem:
export type FilamentMaterial = 'PLA' | 'TPU (Flexível)' | 'PETG' | 'ABS';
export interface PrintItem {
id: string;
projectName: string;
fileUrl: string;
material: FilamentMaterial;
color: string;
quantity: number;
notes?: string;
}2. Custom Hook para Gestão de Estado (useCart)
A UI foi completamente desacoplada da regra de negócio e da persistência. O hook customizado useCart gerencia as ações do carrinho e sincroniza a leitura e escrita no LocalStorage.
3. Internacionalização Nativa (react-i18next)
Pensando no ecossistema global, o app suporta alternância dinâmica de idioma (pt-BR / en), ajustando não apenas a interface, mas também a mensagem enviada na API do WhatsApp.
🔀 Engenharia na Prática: Git Flow Disciplinado
Mesmo sendo um projeto individual, a esteira de entrega seguiu estritamente o modelo de branches Git Flow, simulando o padrão de times de alta performance:
main [v1.0.0] (Produção / Netlify)
▲
│ (Release Merge)
release/v1.0.0
▲
│
develop ──────────────────────────────────────────────►
▲ ▲ ▲
│ │ │
feature/cart-hook feature/whatsapp-ui docs/readmemain: Código em produção, sincronizado e testado no ambiente Linux da Netlify.develop: Branch de integração contínua.feature/*: Branches isoladas para cada requisito técnico (custom hook, componente UI, formulário WhatsApp).docs/*: Branch dedicada para documentação técnica.