Desenvolvimento Web
Plataforma E-commerce & CMS
Arquitetura headless moderna e escalável para e-commerce de alta performance
Designer UI/UX & Desenvolvedor Full Stack Sênior
Castro Naves (via Zeyko)• 2024
Concluído0visualizações
Visão Geral
Plataforma E-commerce & CMS é uma reconstrução completa de sistema de comércio eletrônico enterprise-grade desenvolvida para a Castro Naves pela Zeyko Tech Solutions, onde atuei como sócio e fui o único responsável por toda pesquisa, design UI/UX e desenvolvimento do projeto.
O Cliente
A Castro Naves é uma empresa consolidada no mercado que necessitava modernizar sua presença digital, substituindo a plataforma legada VTEX por uma solução customizada e performática.
Meu Papel
Fui responsável por todo o ciclo do produto:
- ●Pesquisa: Análise de mercado, benchmarking de concorrentes e definição de requisitos
- ●Design UI/UX: Toda prototipação e design de interfaces no Figma, desde wireframes até o design system completo
- ●Desenvolvimento: Implementação completa do frontend e backend, do zero à produção
O Projeto
Desenvolvemos uma solução completa que engloba Frontend B2C para consumidores, Backend API robusto e CMS administrativo para gestão completa do negócio. O sistema suporta catálogo de produtos, carrinho, checkout multi-pagamento, gestão de pedidos, inventário multi-CD, políticas de frete e muito mais.
Arquitetura Headless
A separação entre frontend e backend permite escalabilidade independente, melhor performance e flexibilidade para evoluções futuras. O frontend usa Next.js 14 com App Router para SSR/ISR otimizado, enquanto o backend NestJS oferece uma API REST completa documentada com Swagger.
Diferenciais Técnicos
- ●Dual Auth System: Sistemas de autenticação separados para CMS (admin) e E-commerce (clientes) com JWT RS256
- ●Multi-Gateway Payment: Integração completa com Stripe e Mercado Pago incluindo webhooks
- ●Inventário Multi-CD: Gestão de estoque em múltiplos centros de distribuição com reserva, entrada prevista e bloqueio
- ●Pricing Policies: Tabelas de preço por cliente, região e quantidade com promoções por período
- ●Shipping Intelligence: Cálculo de frete por CEP com políticas de entrega e retirada configuráveis
- ●2FA Security: Autenticação em dois fatores com Google Authenticator (TOTP) para admin e clientes
- ●OAuth Social: Login social com Google e Apple Sign-In
- ●Audit Logging: Log completo de ações no CMS com IP, user agent e response time
O Desafio
O Problema
A empresa operava com uma plataforma legada VTEX que apresentava diversos desafios críticos:
Performance Crítica
- ●Core Web Vitals abaixo do aceitável, impactando SEO e ranking no Google
- ●LCP (Largest Contentful Paint) acima de 4 segundos em páginas de produto
- ●Time to First Byte (TTFB) lento devido a arquitetura monolítica
Custos e Limitações
- ●Custos de licenciamento elevados da plataforma VTEX
- ●Limitações de customização no checkout e páginas de produto
- ●Dependência de apps do marketplace com qualidade variável
- ●Dificuldade de integrar funcionalidades específicas do negócio
Escalabilidade
- ●Arquitetura não preparada para picos de Black Friday
- ●Impossibilidade de deploy independente de frontend/backend
- ●Cache ineficiente gerando custos de CDN elevados
Experiência do Desenvolvedor
- ●Stack proprietário dificultando contratação de devs
- ●Deploy lento e burocrático
- ●Testes automatizados limitados
A Solução
Arquitetura Headless Moderna
Desenvolvemos uma solução completa com separação clara de responsabilidades e tecnologias modernas que endereçam todos os problemas identificados.
Frontend Next.js 14
Experiência de compra moderna e performática para o consumidor final.
- App Router com Server/Client Components
- SSR e ISR para SEO e performance
- Tailwind CSS + NextUI + Shadcn UI
- React Query para cache e sync
- Dark mode com Next Themes
- Embla Carousel para carrosséis touch
- React Hook Form + Zod para formulários
Backend NestJS
API REST enterprise-grade com arquitetura modular.
- 74 controllers (44 CMS + 30 E-commerce)
- 96 services de lógica de negócio
- Prisma ORM com 70+ models
- Validação com class-validator
- Documentação Swagger completa
- Dual JWT auth (RS256 keypairs)
- Audit logging de todas ações
Pagamentos Multi-Gateway
Integração robusta com múltiplos processadores.
- Stripe Checkout com webhooks
- Mercado Pago com callback
- Verificação de assinatura webhook
- Status automático de pedidos
- Suporte a reembolsos
- Cartão, boleto e PIX
Inventário & Logística
Gestão completa de estoque e entregas.
- Multi centros de distribuição
- Estoque reservado/bloqueado/entrada
- Cálculo de frete por CEP
- Políticas de entrega e retirada
- Janelas de horário para pickup
- Integração com transportadoras
Pricing Inteligente
Políticas de preço flexíveis por contexto.
- Tabelas de preço por cliente
- Preços por região (em dev)
- Descontos por quantidade
- Promoções com período
- Cupons com validação
- Markup percentual por tier
Segurança & Auth
Autenticação robusta para admin e clientes.
- JWT RS256 com keypairs separados
- 2FA com Google Authenticator
- OAuth Google e Apple Sign-In
- RBAC com grupos e permissões
- Email verification flow
- Password reset seguro
Resultados
- Redução de 70% no LCP (Largest Contentful Paint) - de 4s para 1.2s
- Core Web Vitals: todos indicadores no verde (Good)
- Aumento de 40% no tráfego orgânico em 3 meses pós-launch
- Redução de 60% nos custos de infraestrutura vs VTEX
- Conformidade WCAG 2.1 AA de acessibilidade
- Time to market 3x mais rápido para novas features
- 99.9% de uptime em produção
- Deploy contínuo com rollback em segundos
Principais Features
- Catálogo completo: produtos, variantes, marcas, categorias hierárquicas
- 7 tipos de product cards com variações de layout
- Carrinho persistente com cálculo de frete em tempo real
- Checkout multi-step com múltiplos endereços
- Área do cliente: pedidos, endereços, favoritos, listas de compras
- Comparação de produtos lado a lado
- Reviews com ratings e votos de utilidade
- Listas públicas compartilháveis (casamento, chá de bebê)
- CMS completo para banners, carrosséis e coleções
- Dashboard admin com gestão de todo catálogo
- Relatórios de vendas e métricas
- Import/export de produtos via Excel
- Gestão de mídias com AWS S3 (imagens, vídeos, PDFs, 3D)
Arquitetura
Arquitetura headless com separação clara entre frontend (Next.js), backend (NestJS) e serviços externos. O frontend consome a API REST documentada, enquanto o backend gerencia toda lógica de negócio, persistência e integrações.
Frontend E-commerce
Aplicação Next.js 14 com App Router para a experiência de compra B2C. Server Components para SEO, Client Components para interatividade.
Next.js 14React 18TypeScriptTailwind CSSNextUIShadcn UIReact QueryFramer Motion
Backend API
API REST modular com NestJS, 200+ endpoints organizados em módulos CMS e E-commerce. Documentação Swagger completa.
NestJS 10TypeScriptPrismaPostgreSQLRedisJWTPassport.js
Payment Gateway
Integração com Stripe e Mercado Pago para processamento de pagamentos. Webhooks para atualização automática de status.
Stripe SDKMercado Pago SDKWebhooksSignature Verification
Storage & Media
Armazenamento de mídias em AWS S3 com buckets separados para CMS e E-commerce. Suporte a imagens, vídeos, PDFs e modelos 3D.
AWS S3SharpMulterCDN
Email Service
Sistema de emails transacionais com Nodemailer e templates Handlebars. Emails de verificação, recuperação de senha e confirmação de pedidos.
NodemailerHandlebarsSMTP
Cache Layer
Cache em múltiplas camadas: React Query no frontend, node-cache no backend, Redis para sessões e filas.
React Querynode-cacheRedis
Destaques Técnicos
🔐 Dual Authentication System
Implementação de dois sistemas de autenticação JWT completamente independentes: um para o CMS (admin) e outro para o E-commerce (clientes). Cada sistema possui seu próprio par de chaves RSA, guards, decorators e lógica de permissões. Isso permite evolução e políticas de segurança independentes.
📊 Database Schema Enterprise
Schema Prisma com 70+ models e 1400+ linhas, abrangendo desde gestão de produtos até auditoria. Enums tipados para status, tipos e categorias. Relacionamentos bem definidos com cascade e soft delete onde apropriado. Extensão PostgreSQL unaccent para busca sem acentos.
🎨 Component Library Híbrida
Combinação estratégica de NextUI (componentes premium prontos), Shadcn UI (componentes headless customizáveis) e componentes próprios. 7 variações de product card, múltiplos layouts de banner, carrosséis touch-friendly com Embla Carousel.
💳 Webhook Payment Flow
Fluxo robusto de pagamentos com Stripe e Mercado Pago. Verificação de assinatura em todos webhooks, idempotência para reprocessamento, atualização automática de status do pedido e tratamento de edge cases (refunds, chargebacks, falhas).
📦 Inventory Multi-CD
Sistema de inventário que suporta múltiplos centros de distribuição com: quantidade disponível, reservada (em carrinhos), entrada prevista, bloqueada e forecasting. Políticas de frete por CD com cálculo automático baseado em CEP.
🔍 Search & Filtering
Busca full-text com PostgreSQL usando extensão unaccent para normalização. Filtros dinâmicos por categoria, marca, preço, atributos. Autocomplete no frontend com debounce e histórico de buscas persistido em localStorage.
Screenshots
Visualização do projeto em diferentes temas e contextos
☀️ Nova Versão - Tema Claro
Nova plataforma headless com tema claro
Clique para ampliar
🌙 Nova Versão - Tema Escuro
Nova plataforma headless com tema escuro
Clique para ampliar
⚙️ Painel Administrativo (CMS)
Sistema de gestão de conteúdo e produtos
Clique para ampliar
Screenshot do Projeto
Visualização do projeto
Clique para ampliarProjetos Relacionados
Confira outros projetos similares que podem te interessar
