Uma loja virtual completa de tênis e produtos esportivos desenvolvida com React e Tailwind CSS

A DripStore é uma aplicação de e-commerce completa desenvolvida para o Geração Tech 2.0. O projeto simula uma loja virtual real com funcionalidades avançadas de autenticação, carrinho de compras, sistema de pagamento e gestão de pedidos.

• Interface Moderna: Design responsivo e intuitivo
• Autenticação Completa: Sistema de login, cadastro e gestão de perfil
• Carrinho Inteligente: Persistência de dados e cálculos automáticos
• Sistema de Checkout: Múltiplos métodos de pagamento e cálculo de frete
• Gestão de Pedidos: Acompanhamento completo do status dos pedidos
• Busca Avançada: Sistema de pesquisa com sugestões e filtros
• Cupons de Desconto: Sistema promocional integrado

• React 19.1.0 - Biblioteca principal para construção da interface
• Tailwind CSS 3.4.1 - Framework CSS utilitário para estilização
• Vite 6.3.5 - Build tool e servidor de desenvolvimento
• React Router Dom 7.6.0 - Roteamento do lado do cliente
• Swiper 11.2.6 - Carrosséis e galerias interativas

• Supabase - Backend as a Service (autenticação, banco de dados, storage)
• PostgreSQL - Banco de dados relacional via Supabase
• Lucide React - Ícones modernos e customizáveis

• ESLint - Análise estática de código
• PostCSS - Processamento de CSS
• React Toastify - Notificações elegantes
• UUID - Geração de identificadores únicos

• Home: Banner dinâmico, produtos em destaque, categorias
• Catálogo: Listagem com filtros avançados e busca
• Produto: Galeria de imagens, variações, avaliações
• Carrinho: Gestão de itens, cupons, cálculo de frete
• Checkout: Finalização segura com múltiplas opções de pagamento

• Perfil: Edição de dados pessoais e endereços
• Pedidos: Histórico completo com status em tempo real
• Métodos de Pagamento: Gerenciamento de cartões salvos
• Autenticação: Login/cadastro com validação completa

• Carrinho Persistente: Mantém itens entre sessões
• Cálculo de Frete: Baseado em CEP com múltiplas opções
• Cupons de Desconto: Sistema promocional avançado
• Checkout Seguro: Validação completa e confirmação

• Busca Inteligente: Sugestões em tempo real
• Filtros Dinâmicos: Por marca, categoria, preço, etc.
• Sistema de Avaliações: Ratings e comentários
• Produtos Relacionados: Recomendações automáticas

• Node.js 18+
• npm ou yarn
• Conta no Supabase

# Clone o repositório
git clone https://github.com/ArthurDiogenes/drip-store.git

# Entre no diretório
cd drip-store

# Instale as dependências
npm install

# Configure as variáveis de ambiente
cp .env.example .env.local

Execute as migrations na ordem numérica para configurar o banco:

1. 001_create_user_profile.sql - Estrutura de usuários
2. 002_create_catalog_structure.sql - Catálogo base
3. 003_create_products.sql - Sistema de produtos
4. 004_create_product_variations.sql - Variações de produtos
5. 005_create_reviews_system.sql - Sistema de avaliações
6. 006_create_orders_system.sql - Sistema de pedidos
7. 007_create_coupons_system.sql - Sistema de cupons
8. 008_create_cart_wishlist.sql - Carrinho e wishlist
9. 009_create_functions_triggers.sql - Funções e triggers
10. 010_create_indexes.sql - Índices de performance
11. 011_initial_data.sql - Dados iniciais
12. 012_sample_product.sql - Produto de exemplo

# Modo desenvolvimento
npm run dev

# Build de produção
npm run build

# Pré-visualização da build
npm run preview

Exibe informações do produto com imagem, preço e promoções.

Gerencia itens individuais no carrinho com controles de quantidade.

Interface para exibição e edição de dados do usuário.

Indicadores visuais de status para pedidos.

Sistema de notificações não-invasivas.

• Autenticação via Supabase: Login seguro com JWT
• Proteção de Rotas: Middleware para páginas privadas
• Validação de Dados: Validação client-side e server-side
• Sanitização: Limpeza de dados de entrada
• Criptografia: Senhas hasheadas automaticamente

• Categorização automática
• Variações de cor e tamanho
• Sistema de desconto e promoções
• Galeria de imagens responsiva

• Persistência entre sessões
• Cálculos automáticos de subtotal
• Aplicação de cupons de desconto
• Validação de estoque

• Múltiplos métodos de pagamento
• Cálculo automático de frete
• Validação de dados de entrega
• Confirmação de pedido

A aplicação é totalmente responsiva, funcionando perfeitamente em:

• 📱 Dispositivos móveis (320px+)
• 📟 Tablets (768px+)
• 💻 Desktops (1024px+)
• 🖥️ Telas grandes (1440px+)

Email: [email protected]
Senha: Drip@7933

Email: [email protected]
Senha: demo123456

Visa: 4111 1111 1111 1111
Mastercard: 5555 5555 5555 4444
Validade: 12/28
CVV: 123

60000-000 (Fortaleza/CE) - Frete Reduzido
01000-000 (São Paulo/SP) - Frete Padrão
20000-000 (Rio de Janeiro/RJ) - Frete Padrão

npm run build

npm run preview

O projeto está configurado para deploy automático no Vercel

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/nova-feature)
3. Commit suas mudanças (git commit -m 'Adiciona nova feature')
4. Push para a branch (git push origin feature/nova-feature)
5. Abra um Pull Request

feat: adiciona nova funcionalidade
fix: corrige bug
docs: atualiza documentação
style: mudanças de formatação
refactor: refatoração de código
test: adiciona testes

• Documentação do React
• Guia do Tailwind CSS
• Documentação do Supabase
• React Router
• Guia do Vite

• Sistema de wishlist
• Chat de atendimento
• Programa de fidelidade
• Avaliações e comentários
• Sistema de notificações push
• Dashboard administrativo
• Integração com redes sociais
• Sistema de afiliados

• Pagamentos são simulados (não processa transações reais)
• Cálculo de frete baseado em simulação
• Sistema de estoque simplificado

1. Verifique se o bug já foi reportado nas Issues
2. Abra uma nova issue com:
   • Descrição detalhada do problema
   • Passos para reproduzir
   • Screenshots (se aplicável)
   • Informações do ambiente (navegador, SO)

Este projeto é licenciado sob a MIT License.

Arthur Diógenes

Filippe Monteiro

Lucas Carvalho

• UIEL, FIEC, ADECE, Gov. do Ceará e Digital College - Pelo oportunidade de participar do Geração Tech 2.0
• Luan Oliveira dos Santos - Pela atenciosa orientação
• Comunidade React - Pela documentação e suporte
• Equipe Supabase - Pela plataforma incrível