E-commerce

InStyle®

E-commerce moderno com catálogo, carrinho e checkout integrado ao Stripe.

Sobre o Projeto

InStyle® é um e-commerce full-stack construído com Next.js (App Router) e uma stack pragmática: Neon (PostgreSQL) como banco serverless, Drizzle ORM para schema-first e migrações tipadas, Stripe para pagamentos e NextAuth (Google OAuth) para autenticação. A aplicação entrega um fluxo completo de compras — do discovery ao pós-pagamento — com foco em velocidade, segurança e DX. O front end usa Next.js + React com renderização híbrida (SSG/SSR) e caching inteligente; o design é responsivo e acessível (WCAG), e o SEO é tratado desde a arquitetura de rotas (URLs semanticamente ricas, metadados, sitemaps). O painel admin permite gerenciar produtos, categorias, estoque e pedidos em tempo real. O checkout é simplificado com Stripe Checkout/PaymentElements, webhooks para conciliação e emissão de status de pedido. Logs, auditoria e feature flags possibilitam evolução segura sem fricção. Com a infraestrutura serverless do Neon e Edge CDN, o projeto escala sob demanda mantendo custos baixos. O Drizzle garante segurança de tipos ponta a ponta, reduzindo regressões em mudanças de schema. O resultado: uma base sólida para crescer o catálogo, experimentar pricing e campanhas, e otimizar conversão com dados.

Principais Funcionalidades

Catálogo com busca e filtros (categoria, preço, estoque).

Página de produto com variações (tamanho/cor), imagens otimizadas e schema.org.

Carrinho persistente (guest + usuário logado) e salvamento automático.

Checkout Stripe (Checkout Page ou Payment Elements) com cupom/discounts.

Autenticação com Google (NextAuth) e RBAC (admin, editor, cliente).

Webhooks Stripe para conciliação de pagamentos e atualização de status.

SEO técnico (OG tags, sitemap, robots, canonical) e performance (ISR/SSR).

Acessibilidade (WCAG AA), i18n pronto para expansão e dark mode.

Observabilidade: logs estruturados, auditoria e alertas de falha no webhook.

Resultados Alcançados

Core Web Vitals em faixa verde (LCP < 2.5s, CLS < 0.1) em páginas críticas.

Conversão do checkout ≥ 3.5% com Payment Elements (meta inicial).

Tempo de indexação orgânica reduzido com sitemaps e dados estruturados.

Queda de 30–50% em bugs de schema após Drizzle + type-safety (meta).

Tecnologias Utilizadas

Next.jsTailwindCSSPostgreSQLDrizzle ORMStripeNextAuth (Google OAuth)

Interessado em um projeto similar?

Entre em contato conosco para discutir como podemos ajudar com seu projeto.

Solicitar Orçamento