Sistema de Indicação com Skip, Cursor e Supabase
Criando um sistema gamificado de indicação do zero, com design system, geração de códigos e backend funcional.
Por que isso é importante
Criar um sistema de indicação é uma estratégia eficaz de crescimento orgânico e engajamento. Entender como estruturar esse tipo de projeto utilizando ferramentas acessíveis permitirá que você lance produtos com features de referral modernas e evolutivas.
Objetivo do Projeto
Desenvolver um sistema completo de indicação, acessível sem login, que permita que usuários recebam um código, acompanhem suas indicações e que possamos escalar isso em produção usando ferramentas modernas.
Design sem Limites
Utilizamos o Skip para construir a primeira interface respeitando o design system da aplicação principal, extraindo layout, cores e componentes prontos com auxílio de uma extensão personalizada.
ℹ️Atenção
Ao manter um design system consistente, conseguimos transportar a experiência da interface principal para interfaces satélites sem ruído de usabilidade.
Ferramenta Skip em Ação
O Skip ajudou a criar a camada visual inicial mockada. Nele foram feitos os primeiros prompts com foco em layout limpo, uma única seção, código simples de copiar e barra de progresso com comportamento responsivo validado.
Transição para o Cursor
Após baixar o código do Skip, abrimos o projeto no Cursor, instalamos dependências com pnpm, e demos início à execução local, mantendo compatibilidade visual com o design original.
Revisão Visual e Responsividade
Verificamos a experiência mobile, a consistência do layout e rotinas de UI como troca de logo, ajustes em componentes e adição de barra de progresso baseada no avanço do usuário.
✅Info
Manter responsividade desde o início poupa um enorme retrabalho ao final. Teste cedo!
Estratégia para o Banco de Dados
Utilizamos o Cloud Code para gerar um arquivo interpretável detalhando a arquitetura da aplicação. Isso serviu de prompt para o DB Expert gerar automaticamente a estrutura de dados.
Montagem do Banco via DB Expert
O modelo criado estabeleceu tabelas fundamentais como users, referrals, rewards e entries. A estrutura prevê usuários que foram indicados e também os que fizeram indicações.
Exportação para o Supabase
Exportamos a estrutura em SQL (Postgres) e conectamos via MCP no Cloud Code diretamente à instância do Supabase, garantindo segurança, controle total e integração com o backend.
⚠️Atenção
Nunca exponha sua chave MCP. Guarde em ambientes seguros e nunca versões públicas.
Configuração do MCP
Para conectar corretamente, criamos um arquivo mcp.de com seu token de acesso. Após salvar e reiniciar o Cloud Code, os projetos ficaram visíveis e utilizáveis.
Funcionamento do Sistema de Indicação
A pessoa entra com seu e‑mail, gera um código de resgate ou link compartilhável, e tem visibilidade de número de pessoas indicadas e recompensas acumuladas.
Visão de Dados e Relações
Cada usuário pode ter sido indicado por alguém (relação direta) e pode também ter indicado outros. A estrutura da base permite essa dupla organização.
Armazenamento de Prêmios
Estrutura auxiliar prevê tabela de recompensas, permitindo condicionar ações gamificadas baseadas na quantidade de pessoas indicadas.
Fluxo Sem Login
O sistema foi desenhado para funcionar inicialmente sem necessidade de login. O e-mail serve como identificador único para rastrear e recompensar.
Importância da Extração do Design System
Processar o design system da aplicação base e reutilizá-lo reduz falhas visuais e acelera a prototipação com coerência.
Integração com Cloud Code
A automação da construção de schema e integração com banco foi realizada usando prompts no formato esperado pelo Cloud Code com ajuda da template MCP.
Segurança e Controle no Supabase
Preferimos a configuração anterior do MCP por dar mais controle de escrita e leitura ao administrador sobre o banco, ainda que exista nova versão mais segura.
Testes e Deploy com Vercel
Após finalizado o backend e frontend, o deploy será feito via Vercel com Supabase como banco principal, mantendo agilidade e escalabilidade.