Um e-commerce completo de moda e roupas, desenvolvido com tecnologias modernas e focado na experiência do usuário.
Este projeto apresenta uma plataforma de comércio eletrônico totalmente funcional, permitindo que os usuários naveguem por produtos de vestuário, gerenciem seus carrinhos de compra e finalizem pedidos com segurança. A experiência foi projetada para ser intuitiva, responsiva e esteticamente atraente.
- 🛍️ Catálogo de Produtos: Navegação intuitiva por categorias e itens
- 🛒 Carrinho de Compras: Gestão completa dos itens selecionados
- 💳 Checkout Seguro com Stripe: Processamento de pagamentos confiável
- 🔐 Autenticação: Login e cadastro de usuários
- 📦 Gestão de Pedidos: Acompanhamento completo do status
- 📱 Design Responsivo: Experiência otimizada para todos os dispositivos
- 🔎 Recomendações Personalizadas: Sugestões de produtos complementares
Este projeto foi desenvolvido para demonstrar a implementação de um e-commerce moderno e completo usando as tecnologias mais recentes. A BEWEAR representa uma marca fictícia de roupas e acessórios, criada para oferecer uma experiência de compra online imersiva e satisfatória.
-
Frontend:
- ⚛️ Next.js 15 + React 19
- 🔷 TypeScript
- 🎨 Tailwind CSS
- 🧩 Radix UI + shadcn/ui
-
Backend:
- 🔄 Next.js API Routes
- 🗃️ Drizzle ORM
- 🐘 PostgreSQL
- 🔐 Better Auth
- 💰 Stripe Payments
- 🔄 TanStack Query
- Node.js 18+
- PostgreSQL
- Conta Stripe (para processamento de pagamentos)
- Clone o repositório:
git clone https://github.com/seu-usuario/bewear-ecommerce.git
cd bewear-ecommerce- Crie um arquivo
.env.localna raiz do projeto:
# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
# Database
DATABASE_URL=postgresql://...
# Auth
AUTH_SECRET=...- Instale as dependências:
npm install- Configure e popule o banco de dados:
npm run db:generate
npm run db:push
npm run db:seed- Inicie o servidor de desenvolvimento:
npm run dev- Acesse http://localhost:3000 no seu navegador
O projeto segue uma arquitetura organizada e escalável:
src/
├── actions/ # Server Actions para operações do backend
├── app/ # App Router do Next.js
│ ├── api/ # API Routes
│ ├── authentication/ # Sistema de autenticação
│ ├── cart/ # Fluxo do carrinho de compras
│ ├── category/ # Páginas de categorias de produtos
│ ├── checkout/ # Processamento de checkout
│ ├── my-orders/ # Histórico e detalhes de pedidos
│ └── product-variant/ # Páginas de detalhes do produto
├── components/ # Componentes reutilizáveis
│ ├── common/ # Componentes de negócio
│ └── ui/ # Componentes de interface
├── db/ # Configuração do banco de dados
│ └── schema.ts # Schema do Drizzle ORM
├── helpers/ # Funções auxiliares
├── hooks/ # Custom hooks React
│ ├── mutations/ # Hooks para mutações
│ └── queries/ # Hooks para consultas
├── lib/ # Utilitários e configurações
└── providers/ # Providers do React Context
- ✅ Sistema de Autenticação: Login social e gerenciamento de sessões
- ✅ Catálogo de Produtos: Categorização, filtros e busca
- ✅ Carrinho Persistente: Mantém produtos salvos entre sessões
- ✅ Checkout Otimizado: Processo de 3 etapas fácil de usar
- ✅ Integração com Stripe: Pagamentos seguros com cartão de crédito
- ✅ Design Responsivo: Adaptável a todos os tamanhos de tela
- ✅ Gestão de Pedidos: Histórico completo e detalhamento
Durante o desenvolvimento deste projeto, enfrentamos e superamos diversos desafios:
- 🔄 Estado Global: Gerenciamento complexo de estados com React Query
- 🛒 Persistência de Dados: Carrinho salvo entre sessões e dispositivos
- 📱 Design Responsivo: Interface adaptável a todos os tamanhos de tela
- 🔐 Segurança: Implementação de autenticação robusta
- 💸 Integração de Pagamentos: Processamento seguro com Stripe
- 🎨 Design Personalizado: Interface moderna e amigável
- 📊 Recomendações Inteligentes: Sugestões baseadas na navegação
- ⚡ Performance Otimizada: Carregamento rápido e experiência fluida
- 📦 Checkout em Etapas: Processo simplificado de compra
- 🌙 Tema Adaptável: Interface visual harmoniosa
O projeto está configurado para deployment contínuo na Vercel Platform, aproveitando a integração nativa com Next.js para máxima performance.
Para aprofundar seus conhecimentos nas tecnologias utilizadas:
Este projeto está licenciado sob a licença MIT. Consulte o arquivo LICENSE para mais detalhes.
Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull requests.
Este projeto foi desenvolvido com base no curso Full Stack Club, ministrado pelo professor Filipe Rocha ⭐.
Um agradecimento especial ao instrutor e à comunidade do curso por todo o conhecimento compartilhado e suporte durante o desenvolvimento.