Uma plataforma de e-commerce moderna e completa construída com Next.js 15, App Router, Supabase e Prisma. Inclui uma área de loja para clientes e um dashboard administrativo completo para gerenciamento de produtos, pedidos e clientes.
- Next.js 15 - Framework React com App Router
- Supabase - Backend as a Service (Auth, Database, Storage)
- Prisma - ORM
- Tailwind CSS - Framework CSS
- shadcn/ui - Componentes React
- Lucide Icons - Ícones
- TanStack Query v5 - Gerenciamento de Estado e Cache
- MercadoPago - Gateway de Pagamento
- 🔐 Autenticação com Supabase
- 👤 Gerenciamento de Perfil
- 🛒 Carrinho de Compras
- 💳 Integração com MercadoPago
- 📦 Gerenciamento de Produtos
- 📝 Gerenciamento de Pedidos
- 🎨 Tema Claro/Escuro
- 🎯 Painel Administrativo
- 📱 Design Responsivo
/- Página inicial da loja/(shop)- Grupo de rotas da loja/(shop)/products- Lista de produtos/(shop)/cart- Carrinho de compras/(shop)/checkout- Finalização de compra
/auth/login- Login/auth/register- Registro/minha-conta- Área do cliente/admin- Painel administrativo/admin/products- Gerenciamento de produtos/admin/orders- Gerenciamento de pedidos/admin/customers- Gerenciamento de clientes/admin/settings- Configurações da loja
- Node.js 16+
- PostgreSQL
- Supabase CLI
- NPM ou Yarn
- Instale as dependências:
npm install
# ou
yarn install- Configure as variáveis de ambiente:
cp .env.example .env.local- Configure as seguintes variáveis no arquivo .env.local:
# Supabase
NEXT_PUBLIC_SUPABASE_URL= # URL do projeto Supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY= # Chave anônima do Supabase
SUPABASE_SERVICE_ROLE_KEY= # Chave de serviço do Supabase
# App
NEXT_PUBLIC_APP_URL= # URL da aplicação (ex: http://localhost:3000)
NEXT_PUBLIC_API_URL= # URL da API (ex: http://localhost:3000/api)
# Database
DATABASE_URL= # URL de conexão com o PostgreSQL
# Serviços
MERCADOPAGO_ACCESS_TOKEN= # Token de acesso do MercadoPago
# Storage
S3_END_POINT= # Endpoint do S3 (Supabase Storage)
S3_ACCESS_KEY= # Chave de acesso do S3
S3_SECRET_KEY= # Chave secreta do S3- Inicie o servidor de desenvolvimento:
npm run dev
# ou
yarn devstore/
├── src/
│ ├── app/ # Rotas e páginas
│ │ ├── (shop)/ # Grupo de rotas da loja
│ │ ├── admin/ # Área administrativa
│ │ ├── auth/ # Autenticação
│ │ ├── api/ # API Routes
│ │ └── minha-conta/ # Área do cliente
│ ├── components/ # Componentes React
│ ├── hooks/ # Custom Hooks
│ ├── lib/ # Configurações e utilitários
│ ├── providers/ # Provedores de contexto
│ ├── scripts/ # Scripts de automação
│ ├── services/ # Serviços e integrações
│ ├── store/ # Gerenciamento de estado global
│ ├── types/ # Definições de tipos TypeScript
│ └── styles/ # Estilos globais
├── prisma/ # Schema e migrações do Prisma
├── public/ # Arquivos estáticos
└── package.json
O sistema possui dois níveis de acesso:
- 👤 CUSTOMER: Usuário comum que pode comprar produtos
- 🛡️ ADMIN: Administrador com acesso ao painel de controle
- Tema claro/escuro
- Design responsivo (Desktop, Tablet, Mobile)
- Componentes reutilizáveis do shadcn/ui
- Customização de cores via Tailwind
# Desenvolvimento
npm run dev # Inicia o servidor de desenvolvimento
npm run build # Cria a build de produção
npm run start # Inicia o servidor de produção
npm run lint # Executa o linter- Instale o Supabase CLI
- Inicie os serviços locais:
supabase start- Use as credenciais fornecidas para configurar o .env.local
Para obter as variáveis de ambiente necessárias:
- Supabase: Acesse o projeto no dashboard do Supabase
- MercadoPago: Obtenha as credenciais no painel do MercadoPago
- S3/Storage: Use as credenciais fornecidas pelo Supabase
- Use branches para novas features
- Mantenha os tipos TypeScript atualizados
- Siga o padrão de componentes do shadcn/ui
- Atualize o schema do Prisma quando necessário
📅 Última atualização: Dezembro 2023