Três aplicações, um fluxo
Site público e painel administrativo em Next.js, conectados a uma API NestJS via REST. As três aplicações têm responsabilidades próprias. O site usa uma camada BFF para intermediar chamadas autenticadas.
IceCube — um catálogo que vira negócio
Catálogo, orçamentos e gestão para uma fabricante de plásticos injetados. Um projeto freelance que conecta a experiência de quem procura um produto ao trabalho de quem administra a venda.
Antes do código,
o problema.
No B2B, escolher um produto é o começo da conversa. Cores, quantidades e personalização fazem parte do orçamento. A IceCube reúne essa jornada em um site público, um painel administrativo e uma API, com responsabilidades próprias.
Da tela à operação.
- 01Catálogo público com produtos, cores, categorias e solicitação de orçamento
- 02Painel administrativo para produtos, clientes, conteúdo e orçamentos
- 03Área do cliente para consultar e acompanhar solicitações de orçamento
- 04Gestão de imagens, banners e conteúdo do site pelo painel
- 05Controle de acesso para administração, gestão, vendas e compras
- 06API com módulos de catálogo, autenticação, orçamentos e integrações de fornecedores
O orçamento faz parte da experiência
Fluxo completo de solicitação de orçamento substituindo carrinho tradicional. Cliente monta lista de produtos com cores e quantidades, solicita orçamento, e acompanha status pela área logada. Admin gerencia, precifica e responde pelo painel.
Cada perfil, seu acesso
Autenticação separada para clientes e administradores, com guards na API e permissões por papel no painel. O controle de acesso acompanha as responsabilidades de cada perfil.
DX e Produtividade
Factories genéricas como createCrudApi<T>() e hook useFetch<T>() no admin. Schema Drizzle com camelCase/snake_case automático. Mock mode no storefront para desenvolvimento desacoplado. Swagger auto-gerado para documentação da API.
Notas de desenvolvimento.
Storefront (Next.js 16 + JSX)
- Next.js 16 com App Router, RSC async pages e revalidate para cache ISR
- Client Islands pattern: Server Components para SEO + Client Components para interatividade
- BFF pattern com route handlers como proxy para API (cookies httpOnly)
- React Hook Form + Zod para formulários com máscaras (CPF, CNPJ, CEP, telefone)
- Carrinho via cookie JSON com chave única (product_id, color_product_id)
- Mock mode automático quando API não está disponível
Admin Panel (Next.js 15 + TypeScript)
- createCrudApi<T, TCreate, TUpdate>() factory para geração automática de endpoints CRUD
- useFetch<T>(path) hook com suporte a skip condicional (path=null)
- DataTable genérico com edição inline, exclusão e busca
- RBAC em 3 camadas: middleware server-side, permissions.ts e sidebar filtering
- Gestão de produtos com upload múltiplo de imagens, variantes e cores
- Sistema de orçamentos com timeline de status e precificação
API (NestJS + Drizzle ORM)
- NestJS com módulos por domínio, DTOs com class-validator e Swagger auto-gerado
- Drizzle ORM com PostgreSQL, migrations e schema type-safe
- JWT duplo com guards separados (CustomerAuthGuard + AdminAuthGuard)
- Soft delete padrão em entidades principais, hard delete em tabelas de junção N:N
- Paginação padronizada com paginationMeta(total, page, perPage)
- Upload S3 via Supabase Storage com organização por pastas (produtos, banners, etc.)
- Rate limiting com ThrottlerGuard e proteção customizada em endpoints de auth
Infraestrutura
- PostgreSQL como banco principal para produtos, clientes, orçamentos e conteúdo
- Supabase Storage (S3-compatible) para assets de imagens
- Deploy independente de cada projeto com variáveis de ambiente separadas
- Formatação unificada com Prettier (sem semi, single quotes, trailing comma none)