produtofora do ara poeira
Box Boutique
Plataforma web completa de e-commerce para moda de luxo, com catálogo responsivo, sistema de leads e arquitetura escalável.
A identidade desta sala
PESSOAL/- archived/old/app_bestbox
Rodado localmente a partir do arquivo, porque a VPS que hospedava foi decomissionada. A pele é a original, com a saturação baixada: o cliente desistiu e a loja saiu do ar.
A escolha
TypeScript dos dois lados, servidor separado
A loja e o painel de administração mexem no mesmo catálogo, então o modelo de dados tem de ser um só e as regras de negócio precisam morar num lugar onde as duas telas cheguem. Daí um serviço próprio em vez de deixar tudo dentro do site. Manter as duas partes no mesmo repositório foi para o tipo do banco chegar até a tela sem ninguém redigitar a forma dos dados: quando a coluna muda, o que quebra é a compilação, e não a página em produção.
01
O projeto
Box Boutique é uma plataforma de e-commerce focada em moda de luxo que construí do zero. O desafio era criar uma experiência de compra que transmitisse sofisticação e confiança, algo que e-commerces genéricos não conseguem entregar pro segmento de luxo.
O projeto é um monorepo com API backend separada do frontend, pensado desde o início pra escalar: primeiro um catálogo web responsivo, depois e-commerce 3D e app mobile.
O cliente desistiu do projeto antes do lançamento, e o site saiu do ar. As telas abaixo são de uma instância local, revivida pra registrar o trabalho.
02
O painel: o que o cliente ganhava de verdade
A vitrine é a parte que qualquer ferramenta de IA gera hoje. O que ninguém tercerizava era o painel administrativo por trás: dashboard, pedidos, produtos, banners, cupons, promoções, usuários com papéis e permissões, leads e desire closets, tudo numa área própria protegida por login com JWT e roles.
O catálogo tinha 235 produtos importados em lote, cada um entrando com status "revisão" até alguém aprovar preço, categoria e imagem antes de ir pro ar, uma fila de curadoria, não publicação automática. Um toggle de IA em Configurações, visível só pro dono da conta, controlava recursos assistidos por modelo de linguagem sem expor isso pro resto da equipe. Era o mesmo princípio do WordPress, o cliente mexe no próprio site sem me chamar, só que sem plugin de terceiro abrindo brecha de segurança, e com controle de acesso por papel de verdade em vez de um usuário admin genérico.
03
Stack e arquitetura
O backend roda em Fastify 4 com TypeScript. Escolhi Fastify pela performance superior ao Express e pelo sistema de plugins. O banco é PostgreSQL 16 com Prisma ORM, garantindo type-safety end-to-end. Validação de dados com Zod em todas as rotas.
O frontend é Next.js 15 com Tailwind CSS v4 e Framer Motion pra animações suaves. A infraestrutura usa Docker Compose pra desenvolvimento local e a VPS roda os containers em produção com CI/CD automatizado.
O sistema de testes cobre backend (Vitest + Supertest) e frontend, com E2E via Playwright que valida fluxos completos incluindo login OAuth e interação com WhatsApp via CallMeBot.
04
Desafios
O maior desafio técnico foi construir um sistema de catálogo que fosse visualmente impactante em mobile (onde a maioria dos compradores de luxo navega) sem sacrificar performance. Imagens de alta qualidade são essenciais pra moda, mas pesam. A solução foi um pipeline de otimização de imagens com lazy loading inteligente e formatos responsivos.
Outro desafio foi o sistema de notificações integrado: confirmações de pedido por email (Resend), alertas por WhatsApp (CallMeBot) e webhooks do Stripe pra pagamentos, tudo orquestrado por workflows no n8n rodando na própria VPS.