Ecommerce Template
Modern ecommerce template built with Next.js 16, React 19, Drizzle, Better Auth, Supabase, and Stripe.
Conectamos compradores e vendedores de veículos exclusivos em um só lugar. Experiência premium, rápida e sem burocracia.
Translation pending
CommerceHTML · CSSGitHub @murilotecotecoOnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
GitHub star growth between the latest completed 8-hour observations
Modern ecommerce template built with Next.js 16, React 19, Drizzle, Better Auth, Supabase, and Stripe.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
carro moto
Translation pending
Taken from the repository README
Loading the full README.
Read the full README ↗
supabase/migrations/. A captura inicial está em 20260915145500_remote_schema.sql e as alterações incrementais, como o consentimento legal, ficam em migrations posteriores. Valide tudo em ambiente de teste antes de aplicar em produção.supabase/functions/delete-account/ mantém a operação privilegiada no servidor. Ela está publicada no Supabase e rejeita requisições sem token ou com token inválido; a exclusão completa deve ser ensaiada apenas com uma conta descartável.1.0 e registro no perfil por meio da função protegida registrar_aceite_legal. O fluxo ainda deve ser validado no projeto Supabase de demonstração.FOTOS-MENSAGENS e URLs assinadas; fotos antigas permanecem compatíveis.get_anuncios_marketplace_paginado; a tela solicita apenas a página atual.| Documento | Conteúdo |
|---|---|
PROXIMOS-PASSOS-20261022.md | Plano de execução com prioridades e critérios de aceite |
ROTEIRO-TESTES-MANUAIS.md | Casos de teste, campos de evidência e critério de saída |
ROTEIRO-DEMO.md | Roteiro cronometrado da banca e plano B offline |
CHATLING.md | Plano, limites e pendências do chatbot |
AMBIENTE-TESTES-20261022.md | Versões de sistema, navegadores e ferramentas |
evidencias/README.md | Organização e regras das evidências |
MG Motors é um marketplace web premium focado na compra e venda de veículos exclusivos no Brasil. A plataforma conecta compradores e vendedores de carros esportivos, seminovos e importados em um ambiente seguro, moderno e sem burocracia.
O projeto foi construído inteiramente com HTML, CSS e JavaScript puro (sem frameworks de frontend), utilizando o Supabase como backend completo — autenticação JWT, banco de dados PostgreSQL, storage de arquivos e Row Level Security (RLS).
O frontend é servido como site completamente estático pelo Vercel, sem necessidade de servidor de aplicação.
Este projeto foi construído para praticar e demonstrar:
| Página | Rota | Descrição |
|---|---|---|
| Início | /MG-INICIO/inicio.html | Landing page com hero, busca, veículos em destaque, categorias, diferenciais e depoimentos |
| Marketplace | /MG-MARKETPLACE/marketplace.html | Listagem completa de anúncios com filtros avançados, busca, modal de detalhes e publicação de anúncio |
| Mensagens | /MG-MENSAGENS/mensagens.html | Chat em tempo real com lista de conversas, envio de texto e fotos |
| Perfil / Conta | /MG-CONTA/conta.html | Perfil público do usuário com anúncios, galeria de fotos, seguidores, seguindo e avaliações |
| Dicas | /MG-DICAS/dicas.html | Guia completo de compra e venda segura: golpes comuns, documentação, inspeção mecânica e negociação |
| Central de Ajuda | /MG-AJUDA/ajuda.html | FAQ com acordeão por categoria (anúncios, pagamentos, conta, segurança) |
| Contato | /MG-CONTATO/contato.html | Página de contato com atendimento via WhatsApp e chatbot |
| Como Utilizar | /MG-CASOS-USO/como-utilizar.html | Documentação dos casos de uso da plataforma (UC01–UC25) |
| Configurações | /MG-CONFIGURACOES/configuracoes.html | Preferências de aparência, notificações, privacidade e conta |
| Login | /MG-LOGIN/login.html | Autenticação com email e senha via Supabase Auth |
| Cadastro | /MG-LOGIN/register.html | Criação de conta com nome, email e senha |
| Recuperação de senha | /MG-LOGIN/recuperar-senha.html | Solicitação de link e redefinição segura de senha |
| Dev Panel | /MG-DEV/devpanel.html | Painel restrito para desenvolvedores: métricas, moderação de anúncios, denúncias e gestão de usuários |
| Artigo | Rota |
|---|---|
| Aston Martin | /MG-DICAS/blogs/astonmartin/astonmartin.html |
| BMW | /MG-DICAS/blogs/bmw/bmw.html |
| Bugatti | /MG-DICAS/blogs/bugatti/bugatti.html |
| Ferrari | /MG-DICAS/blogs/ferrari/ferrari.html |
| Lamborghini | /MG-DICAS/blogs/lamborghini/lamborghini.html |
| McLaren | /MG-DICAS/blogs/mclaren/mclaren.html |
| Pagani | /MG-DICAS/blogs/pagani/pagani.html |
| Porsche | /MG-DICAS/blogs/porsche/porsche.html |
| Camada | Tecnologia |
|---|---|
| Frontend | HTML5, CSS3 Vanilla, JavaScript ES2022 (módulos) |
| Ícones | Lucide Icons (via CDN) |
| Backend / Auth | Supabase (PostgreSQL + Auth + Storage + Realtime) |
| Banco de Dados | PostgreSQL (gerenciado pelo Supabase) |
| Deploy | Vercel |
| Chatbot | Chatling AI |
| Tipografia | Inter, Segoe UI (system fonts) |
| Versionamento | Git & GitHub |
Navegador do Usuário
│
▼
HTML + CSS + JS
(sem framework)
│
┌────┴────┐
│ │
▼ ▼
Supabase localStorage
│ │
┌─┴──────┐ └── Favoritos
│ │
▼ ▼
Auth PostgreSQL
(JWT) (anuncios, usuarios,
mensagens, denuncias,
marcas, modelos,
fotos_anuncio, etc.)
│
▼
Storage
(fotos de perfil,
capa e anúncios)
Toda a lógica de backend é gerenciada pelo Supabase:
@supabase/supabase-jsO frontend é servido como HTML estático pelo Vercel, sem necessidade de servidor de aplicação.
MGMOTORS/
│
├── MG-INICIO/
│ ├── inicio.html # Landing page
│ └── inicio.css
│
├── MG-MARKETPLACE/
│ ├── marketplace.html # Listagem + publicação de anúncios
│ └── marketplace.css
│
├── MG-MENSAGENS/
│ ├── mensagens.html # Chat em tempo real
│ └── mensagens.css
│
├── MG-CONTA/
│ ├── conta.html # Perfil do usuário
│ └── conta.css
│
├── MG-LOGIN/
│ ├── login.html # Autenticação
│ ├── login.css
│ ├── register.html # Cadastro
│ └── register.css
│
├── MG-CONFIGURACOES/
│ ├── configuracoes.html # Preferências do usuário
│ └── configuracoes.css
│
├── MG-DICAS/
│ ├── dicas.html # Guia de segurança
│ ├── dicas.css
│ └── blogs/ # Artigos sobre marcas
│ ├── astonmartin/
│ ├── bmw/
│ ├── bugatti/
│ ├── ferrari/
│ ├── lamborghini/
│ ├── mclaren/
│ ├── pagani/
│ └── porsche/
│
├── MG-AJUDA/
│ └── ajuda.html # FAQ / Central de ajuda
│
├── MG-CONTATO/
│ ├── contato.html # Página de contato
│ └── contato.css
│
├── MG-CASOS-USO/
│ ├── como-utilizar.html # Casos de uso documentados
│ └── como-utilizar.css
│
├── MG-DEV/
│ ├── devpanel.html # Painel admin (restrito)
│ └── devpanel.css
│
├── api/ # Funções serverless (Vercel)
│ ├── config.js # Entrega as credenciais do Supabase (env vars)
│ └── carros-ia.js # Listagem em texto puro para o chatbot de IA
│
├── imagens/ # Assets estáticos
├── global.css # Estilos globais + header + toast
├── headerGlobal.js # Header injetado dinamicamente em todas as páginas
├── mgConfig.js # Configuração central do Supabase + escapeHtml()
├── tema.js # Tema escuro/claro aplicado antes do render
├── vercel.json # Headers de segurança HTTP
├── supabase/
│ ├── config.toml # Configuração local do Supabase
│ ├── migrations/ # Schema e políticas versionadas
│ │ └── 20260915145500_remote_schema.sql
│ └── functions/
│ └── delete-account/ # Exclusão de conta no servidor
└── index.html # Redirect para MG-INICIO
O banco de dados é gerenciado pelo Supabase. O schema e as políticas RLS são versionados em supabase/migrations/. A migration 20260915145500_remote_schema.sql contém a estrutura atual capturada do projeto Supabase, incluindo tabelas, funções, triggers, relacionamentos e policies.
supabase link --project-ref SEU_PROJECT_REFsupabase db pushSUPABASE_URL e SUPABASE_KEY.supabase/functions/.| Tabela | Descrição |
|---|---|
usuarios | Perfil estendido: nome, bio, foto, capa, cidade, UF, instagram, nota_media, seguidores, seguindo, banido |
anuncios | Anúncios de veículos: marca, modelo, ano, preço, quilometragem, categoria, cidade, UF, status, curtidas |
marcas | Marcas de veículos cadastradas |
modelos | Modelos vinculados a marcas |
fotos_anuncio | Fotos dos anúncios (múltiplas por anúncio, com ordem) |
mensagens | Mensagens do chat: conteúdo, tipo (texto/foto), lida, timestamps |
denuncias | Denúncias de anúncios, mensagens ou perfis: motivo, status, alvo, denunciante |
avaliacoes | Avaliações entre usuários: nota (1 a 5) e comentário |
seguidores | Relação seguidor para seguido |
curtidas_anuncio | Curtidas de usuários em anúncios |
posts_usuario | Fotos do feed do perfil do usuário |
usuarios_banidos | Registro de banimentos com motivo e responsável |
usuarios_publicosescapeHtml() em mgConfig.js) aplicado em toda interpolação de dados do usuário em innerHTML, prevenindo XSSsafeImageUrl() em mgConfig.js): aceita apenas http:/https: e cai no fallback em caso de payload maliciosotextContent e dataset, nunca via innerHTML diretohttp: e https:, bloqueando javascript: e outros esquemas perigososvercel.json:
Content-Security-Policy com object-src 'none' e base-uri 'self'X-Frame-Options: DENY — impede clickjackingX-Content-Type-Options: nosniffReferrer-Policy: strict-origin-when-cross-originCache-Control: public, max-age=31536000, immutable)is_admin() no Supabase; não há e-mails de administradores nem lista de desenvolvedores no HTML/JS público.As páginas públicas são HTML/CSS/JS estáticos, mas os recursos integrados dependem das funções serverless da Vercel e do Supabase. Para testar apenas o layout, o Live Server é suficiente; para autenticação, banco e /api/config, use a Vercel local ou o deploy de demonstração.
# Clone o repositório
git clone https://github.com/murilotecoteco/MGMOTORS.git
cd MGMOTORS
# Instale a CLI, caso ainda não tenha
npm install -g vercel
# Configure SUPABASE_URL e SUPABASE_KEY no ambiente local e suba o projeto
vercel dev
O site ficará disponível em http://localhost:3000. Acesse:
http://localhost:3000/MG-INICIO/inicio.html
MG-INICIO/inicio.htmlAtenção: O Live Server não executa
api/config.js. Portanto, autenticação, anúncios, chat e recuperação de senha devem ser testados comvercel devou no deploy da Vercel.
As credenciais do Supabase não ficam no código — são variáveis de ambiente definidas na Vercel:
| Variável | Descrição |
|---|---|
SUPABASE_URL | URL do projeto Supabase |
SUPABASE_KEY | Chave pública (publishable/anon) |
Como o front-end é estático, elas são entregues pelo endpoint serverless api/config.js (/api/config), e o mgConfig.js as obtém no carregamento — nenhuma página referencia credenciais diretamente.
Para rodar com seu próprio projeto Supabase:
supabase db pushSUPABASE_URL e SUPABASE_KEY nas variáveis de ambiente (Vercel → Settings → Environment Variables)A chave usada é pública por natureza (anon/publishable) — a segurança real está nas políticas de RLS do banco, que impedem qualquer acesso indevido mesmo com a chave em mãos.
O projeto é hospedado no Vercel como site estático.
Quando o projeto Vercel está conectado ao repositório, pushes para o branch main podem acionar automaticamente novos deploys de produção. Essa configuração depende do ambiente externo da Vercel.
URL de produção:
https://mgmotorss.vercel.app
Este projeto foi desenvolvido para fins educacionais e de portfólio.
Nenhuma licença foi aplicada.