Alpha Greenn - Documentação Técnica do Sistema

Visão Geral do Sistema

Alpha Greenn é uma plataforma SaaS (Software as a Service) multifacetada que funciona como um ecossistema integrado para gerenciamento de e-commerce e marketplace. O sistema oferece uma solução completa para gestão de lojas, produtos, e integração com marketplaces.

Propósito

Plataforma de gestão centralizada para e-commerce e marketplaces

Usuários Alvo

Lojistas, admins, parceiros/afiliados, clientes

Principais Funcionalidades

E-commerce

Gestão de lojas e produtos com múltiplos domínios

Marketplace

Vitrine pública de lojas e produtos

Parceiros

Sistema de afiliados com rastreamento

Analytics

Rastreamento em tempo real de eventos

Formulários

Formulários dinâmicos multi-step

Inteligência Artificial

Geração de campanhas com Groq/Llama

Stack Tecnológico

Camada	Tecnologia	Versão
Frontend	HTML5 + CSS3 (Tailwind) + JavaScript	-
Backend	Node.js + Express	4.22.1
Database	PostgreSQL (Supabase)	-
Autenticação	Supabase Auth (JWT)	-
IA	Groq (Llama 3.1 8B)	-
Storage	Supabase Storage + AWS SDK	2.1692.0

Arquitetura do Sistema

Diagrama de Arquitetura

┌─────────────────────────────────────────────────────┐
│                    ALPHA GREENN                     │
├─────────────────────────────────────────────────────┤
│                      FRONTEND                       │
│  ┌───────────────────────────────────────────────┐  │
│  │ 10 Páginas HTML                               │  │
│  │  ├─ index.html (Landing Page)                │  │
│  │  ├─ admin.html (Painel Administrativo)       │  │
│  │  ├─ app.html (Dashboard Usuário)             │  │
│  │  ├─ partners.html (Área Parceiros)           │  │
│  │  ├─ vitrine.html (Marketplace)               │  │
│  │  ├─ form.html (Formulários)                  │  │
│  │  └─ ... (4 páginas adicionais)               │  │
│  └───────────────────────────────────────────────┘  │
├─────────────────────────────────────────────────────┤
│                      BACKEND                        │
│  ┌───────────────────────────────────────────────┐  │
│  │ Node.js + Express Server                      │  │
│  │  ├─ GET  /app, /admin, /vitrine             │  │
│  │  ├─ POST /api/groq-post-idea                │  │
│  │  └─ Static File Serving                      │  │
│  └───────────────────────────────────────────────┘  │
├─────────────────────────────────────────────────────┤
│                   INFRAESTRUTURA                    │
│  ┌───────────────────────────────────────────────┐  │
│  │ Supabase (PostgreSQL + Auth + Real-time)    │  │
│  │ Groq API (AI - Llama 3.1 8B)                │  │
│  │ CDN & Bibliotecas Externas                   │  │
│  └───────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

Fluxo de Dados

O sistema segue uma arquitetura client-server com capacidades em tempo real:

Cliente (Frontend) → Requisição HTTP

Interface do usuário via HTML/JavaScript

↓

Backend (Express) → Processamento

Node.js processa requisições HTTP

↓

Database (Supabase) → Persistência

PostgreSQL + Real-time subscriptions

Frontend

Páginas do Sistema

Página	Rota	Descrição
index.html	/	Landing page com hero, benefits, CTA
admin.html	/admin	Painel administrativo completo
app.html	/app	Dashboard de usuário/lojista
partners.html	/partners	Área de parceiros/afiliados
vitrine.html	/vitrine	Marketplace público
detalhes.html	/detalhes	Página individual de loja
form.html	/form	Formulários dinâmicos
minha-conta.html	/minha-conta	Perfil do usuário
obrigado.html	/obrigado	Página de confirmação
404.html	-	Página de erro customizada

Design System

Tema Visual

Modo: Dark mode (corporativo)
Primário: Neon Green (#00F5A0)
Fundo: Zinc 950 (#09090b)
Bordo: Zinc 800 (#27272a)
Tipografia: Sans-serif system

Componentes

✓ Botões com hover effects
✓ Cards com shadow
✓ Modals responsivos
✓ Tabelas com paginação
✓ Gráficos Chart.js
✓ Ícones Lucide

Bibliotecas Frontend

•
Tailwind CSS
Framework CSS utility-first para styling corporativo
•
Lucide Icons
Conjunto de ícones SVG profissionais
•
Chart.js
Biblioteca de gráficos interativos
•
Flatpickr
Date picker leve com suporte a ranges
•
Supabase JS Client
SDK oficial para integração com Supabase

Backend

Servidor Express

Arquivo: server.js (97 linhas)

Servidor Node.js com Express que serve a aplicação frontend e expõe APIs.

Rotas Principais

Método	Rota	Handler
GET	/	index.html
GET	/app	app.html
GET	/admin	admin.html
GET	/vitrine	vitrine.html
POST	/api/groq-post-idea	Geração de campanhas IA
GET	/api/health	Health check

Módulos JavaScript

supabase.js

Inicializa cliente Supabase global

const supabaseClient = window.supabase.createClient(
  'https://nsakginyvudwnrfqpzqc.supabase.co',
  'eyJhbGc...'
);

custom.js

Validação de licença por domínio (DRM)

✓ Valida domínio contra tabela licensed_stores
✓ Suporta 3 domínios por loja
✓ Bloqueia página se não licenciado
✓ Auto-detecção Shopify.shop

script.js

Gestão de lojas e dashboard

Principais funções:

• loadStores() - Carrega lojas do usuário
• renderStores() - Renderiza tabela
• filterLicenses() - Filtro por status
• renderChart() - Gráfico de crescimento

Database (Supabase/PostgreSQL)

Tabelas Principais

users

Campo	Tipo	Descrição
id	UUID (PK)	ID único do usuário
email	VARCHAR	Email único
name	VARCHAR	Nome do usuário
created_at	TIMESTAMP	Data de criação

licensed_stores

Lojas licenciadas com validação de domínio

Campo	Tipo	Descrição
id	UUID (PK)	ID único
email	VARCHAR	Email da loja
domain	VARCHAR	Domínio principal
domain_2, domain_3	VARCHAR	Domínios alternativos

products

Catálogo de produtos

Campo	Tipo
id (PK)	UUID
store_id (FK)	UUID
name	VARCHAR
price, cost	DECIMAL

marketplace_stores

Lojas publicadas no marketplace

id (UUID, PK)
store_id (UUID, FK)
name (VARCHAR) - Nome exibido
description (TEXT) - Descrição
logo (VARCHAR) - URL da logo

Funcionalidades Principais

Admin - Painel Administrativo

Dashboard

Visão geral do sistema com metrics

Gestão de Licenças

Ativar, editar domínios, deletar

Clientes

Listar usuários com filtros avançados

Marketplace

Gerenciar publicações

Formulários

Editar e visualizar respostas

Rastreamento

Analytics em tempo real

Usuário - Dashboard Pessoal

✓
Gestão de Lojas
Criar, editar, deletar lojas
✓
Produtos
CRUD de produtos com multi-seleção
✓
Rastreamento Pessoal
Ver eventos de suas lojas
✓
Formulários
Criar e gerenciar formulários
✓
Configurações
Alterar dados pessoais e preferências

Marketplace - Vitrine Pública

✓
Catálogo de lojas e produtos
✓
Busca em tempo real
✓
Filtros por categoria
✓
Sistema de autenticação modal

Fluxos Principais

Fluxo 1: Cadastro de Usuário

Visitante acessa /vitrine

Clica "Cadastrar"

Modal de registro aparece

Preenche: email, senha, nome

Supabase cria user em tabela 'users'

Redirect para /app (dashboard)

Fluxo 2: Validação de Domínio

Cliente acessa seu domínio

custom.js executa validateDomain()

Query REST ao Supabase

Se encontrado: Tema carrega normalmente

Se não encontrado: Tela bloqueio

Fluxo 3: Geração de Campanha com IA

Usuário acessa aba "Campanhas"

Preenche dados: nome, tipo, objetivo

Frontend chama POST /api/groq-post-idea

Backend valida e envia para Groq API

Retry automático se falhar (até 5x)

Frontend exibe resultado formatado

APIs & Integrações

Supabase REST API

Uso: Validação de licença por domínio

GET /rest/v1/licensed_stores
Headers:
  apikey: [ANON_KEY]
  Authorization: Bearer [JWT]

Response: [ { id, email, domain, ... } ]

Groq API (IA)

Uso: Geração de campanhas com IA

POST https://api.groq.com/openai/v1/chat/completions

Model: llama-3.1-8b-instant
Retry: até 5 tentativas com backoff
Rate limit: 429/503 wait 5s

Supabase Client

Versão: 2.95.3

✓ CRUD completo (SELECT, INSERT, UPDATE, DELETE)
✓ Autenticação (signInWithPassword)
✓ Real-time subscriptions (channel.on().subscribe)
✓ Query builders com validação

Deployment & Configuração

Como Rodar Localmente

# 1. Instalar dependências
npm install

# 2. Configurar variáveis de ambiente
echo "PORT=3000
GROQ_API_KEY=sua_key
GROQ_MODEL=llama-3.1-8b-instant" > .env

# 3. Iniciar servidor
npm start

# 4. Acessar
http://localhost:3000

Variáveis de Ambiente

Variável	Descrição	Padrão
PORT	Porta do servidor	3000
GROQ_API_KEY	Chave API Groq	-
GROQ_MODEL	Modelo Groq	llama-3.1-8b-instant