Uma plataforma de e-commerce moderna e responsiva construída com Next.js 15, React 19 e TypeScript, oferecendo uma experiência de compra completa com autenticação, carrinho dinâmico e integração com pagamentos via Stripe.
Bewear é um e-commerce full-stack especializado em roupas, desenvolvido como projeto bootcamp. A aplicação oferece funcionalidades essenciais de uma loja online, incluindo catálogo de produtos, gerenciamento de carrinhos, checkout seguro e autenticação de usuários.
- Listagem de Produtos: Visualização de todos os produtos com variantes
- Categorias: Organização de produtos por categoria
- Detalhes do Produto: Páginas individuais com informações completas
- Filtros Dinâmicos: Seletor de categorias para navegação intuitiva
- Adicionar/Remover Produtos: Gerenciamento flexível do carrinho
- Controle de Quantidade: Aumentar e diminuir quantidades de itens
- Persistência: Carrinho sincronizado com o perfil do usuário
- Resumo de Carrinhos: Visualização clara de totais e subtotais
- Login/Registro: Autenticação com email e senha
- OAuth (Google): Login social integrado
- Gerenciamento de Endereços: Criação e armazenamento de endereços de entrega
- Histórico de Pedidos: Visualização de pedidos anteriores
- Fluxo de Checkout: Etapas de identificação, endereço e confirmação
- Integração Stripe: Processamento seguro de pagamentos
- Webhook Stripe: Sincronização de status de pagamento
- Confirmação de Pedido: Página de sucesso com detalhes do pedido
- Mobile-First: Interface otimizada para todos os dispositivos
- Dark Mode: Tema escuro suportado via next-themes
- Acessibilidade: Componentes de UI acessíveis com Radix UI
- Animações Suaves: Transições visuais com Tailwind CSS
- Next.js 15.4.1 - Framework React com SSR e otimizações
- React 19.1.0 - Biblioteca UI
- TypeScript - Tipagem estática
- Tailwind CSS 4 - Estilização utilitária
- Radix UI - Componentes acessíveis sem estilo
- React Hook Form - Gerenciamento de formulários
- Zod - Validação de schema
- Drizzle ORM - ORM type-safe para TypeScript
- PostgreSQL - Banco de dados relacional
- Better Auth - Sistema de autenticação
- Next.js Server Actions - Funções server-side seguras
- Stripe - Processamento de pagamentos
- @stripe/stripe-js - SDK JavaScript do Stripe
- React Query (TanStack Query 5.83.0) - Gerenciamento de dados assíncronos
- React Hook Form - Gerenciamento de estado de formulário
- Sonner - Notificações toast
- Lucide React - Ícones SVG
- Class Variance Authority - Utilitário para variantes de classe
- React Number Format - Formatação de números
src/
├── actions/ # Server actions (mutações)
│ ├── add-cart-product/
│ ├── create-checkout-session/
│ ├── create-shipping-address/
│ ├── decrease-cart-product-quantity/
│ ├── finish-order/
│ ├── get-cart/
│ ├── get-user-addresses/
│ ├── remove-cart-product/
│ └── update-cart-shipping-address/
├── app/ # Rotas e layouts Next.js
│ ├── api/ # Endpoints da API
│ │ ├── auth/ # Rotas de autenticação
│ │ └── stripe/ # Webhook do Stripe
│ ├── authentication/ # Página de login/registro
│ ├── cart/ # Páginas do carrinho e checkout
│ ├── category/ # Páginas de categoria
│ ├── checkout/ # Fluxo de pagamento
│ ├── my-orders/ # Histórico de pedidos
│ ├── product-variant/ # Detalhes do produto
│ └── layout.tsx # Layout raiz
├── components/
│ ├── common/ # Componentes reutilizáveis
│ │ ├── header.tsx
│ │ ├── footer.tsx
│ │ ├── product-list.tsx
│ │ └── ...
│ └── ui/ # Componentes base (Radix UI)
├── db/
│ ├── schema.ts # Schema do banco de dados
│ ├── seed.ts # Script de seed
│ └── index.ts # Conexão com DB
├── hooks/
│ ├── mutations/ # Custom hooks para mutações
│ └── queries/ # Custom hooks para queries
├── lib/
│ ├── auth.ts # Configuração de autenticação
│ └── utils.ts # Funções utilitárias
└── providers/
└── react-query.tsx # Provider do React Query
- Node.js 18+
- pnpm (recomendado) ou npm
- PostgreSQL
- Credenciais Stripe (chaves de teste)
- Credenciais Google OAuth (opcional)
- Clone o repositório
git clone <seu-repositorio>
cd Ecommerce-Bewear-NextJs- Instale as dependências
pnpm install- Configure as variáveis de ambiente
Crie um arquivo .env.local na raiz do projeto:
# Banco de dados
DATABASE_URL=postgresql://user:password@localhost:5432/bewear
# Autenticação (Better Auth)
BETTER_AUTH_SECRET=your-secret-key-here
BETTER_AUTH_URL=http://localhost:3000
# Google OAuth (opcional)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...- Configure o banco de dados
# Push do schema para o banco
pnpm run drizzle
# Populate com dados iniciais
pnpm run drizzle:seed- Inicie o servidor de desenvolvimento
pnpm run devAcesse http://localhost:3000 no seu navegador.
# Desenvolvimento
pnpm run dev # Inicia servidor de desenvolvimento
pnpm run lint # Executa ESLint
pnpm run build # Build de produção
pnpm run start # Inicia servidor de produção
# Banco de dados
pnpm run drizzle # Sincroniza schema com banco
pnpm run drizzle:studio # Abre Drizzle Studio (GUI)
pnpm run drizzle:seed # Executa seed do banco
# Stripe
pnpm run stripe # CLI do Stripe
pnpm run stripe:listen # Escuta webhooks locais do StripeO projeto utiliza Next.js Server Actions para operações sensíveis no servidor:
- Autenticação e gerenciamento de sessão
- Operações de banco de dados
- Processamento de pagamentos
- Cada action está validada com Zod schemas
- Queries:
use-cart,use-user-addresses(React Query) - Mutations:
use-increase-cart-product,use-create-shipping-address, etc.
Componentes UI base do Radix UI com estilos Tailwind CSS customizados para consistência visual.
- ✅ Autenticação Segura: Better Auth com suporte a OAuth
- ✅ Validação de Dados: Zod para schemas robustos
- ✅ Pagamentos Seguros: Integração oficial do Stripe
- ✅ Variáveis de Ambiente: Chaves sensíveis protegidas
- ✅ CORS & Headers: Configuração segura de headers
- user - Usuários da plataforma
- session - Sessões ativas
- account - Contas OAuth
- category - Categorias de produtos
- product - Produtos disponíveis
- product_variant - Variantes (tamanho, cor, etc)
- shipping_address - Endereços de entrega
- cart - Carrinhos de compras
- cart_item - Itens do carrinho
- order - Pedidos realizados
- order_item - Itens dos pedidos
O projeto suporta dark mode via next-themes:
// Alternância de tema disponível na interface
import { useTheme } from "next-themes"Estilos Tailwind CSS customizáveis em tailwind.config.ts.
- Vercel - Host recomendado para Next.js
- Railway - Banco de dados PostgreSQL gerenciado
- Stripe - Configurar webhooks para produção
# Conecte seu repositório no Vercel
# Defina as variáveis de ambiente
# Deploy automático ao fazer push- Busca e filtros avançados de produtos
- Sistema de avaliações e comentários
- Lista de desejos (wishlist)
- Cupons e promoções
- Dashboard de admin
- Notificações por email
- Relatórios de vendas
- Otimização de imagens (next/image)
- Caching e invalidação de queries
- Testes unitários e E2E
- Observabilidade e logging
- Performance monitoring
Contribuições são bem-vindas! Por favor:
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para detalhes.
Para dúvidas ou problemas:
- Abra uma issue no repositório
- Consulte a documentação oficial: