🚀 Oferta especial: 60% OFF no CrazyStack - Últimas vagas!Garantir vaga →
React

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.

CrazyStack
20 min de leitura
indicaçãoSkipCursorSupabaseDB Expert

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.

Checklist de Implementação

Interface criada no Skip com design consistente
Código migrado e ajustado no Cursor
Banco de dados gerado automaticamente no DB Expert
Exportação e criação do schema no Supabase via MCP
Integração do back-end com banco finalizada
Sistema de indicações funcional e testado
Projeto pronto para deploy via Vercel

Domine React e Node com o CrazyStack

Aprenda técnicas avançadas de React com nosso curso completo