Sistema de Indicação com Skip, Cursor
Criando um sistema gamificado de indicação do zero, com design system, geração de códigos e backend funcional.
Por que isso é importante
Sistema de Indicação com Skip, Cursor. Criando um sistema gamificado de indicação do zero, com design system, geração de códigos e backend funcional.
Objetivo do Projeto
Fazer um sistema completo de indicação, acessível sem login, que deixe os usuários receberem um código, acompanharem suas indicações e que a gente possa escalar em produção usando ferramentas modernas.
Design sem Limites
Usamos o Skip pra construir a primeira interface respeitando o design system da app principal, extraindo layout, cores e componentes prontos com uma extensão personalizada.
Atenção
Mantendo design system consistente, a gente consegue transportar a experiência da interface principal pras interfaces satélites sem ruído de usabilidade.
Ferramenta Skip em Ação
O Skip ajudou a criar a camada visual inicial mockada. Nele rolaram os primeiros prompts com foco em layout limpo, uma seção só, código simples de copiar e barra de progresso responsiva validada.
Transição para o Cursor
Depois de baixar o código do Skip, abrimos o projeto no Cursor, instalamos dependências com pnpm , e rodamos local, mantendo compatibilidade visual com o design original.
Revisão Visual e Responsividade
Checamos a experiência mobile, consistência do layout e rotinas de UI tipo troca de logo, ajustes em componentes e barra de progresso baseada no avanço do usuário.
Info
Manter responsividade desde o início poupa um retrabalho gigante no final. Testa cedo!
Estratégia para o Banco de Dados
Usamos o Claude code pra gerar um arquivo interpretável detalhando a arquitetura da app. Isso virou prompt pro DB Expert gerar automaticamente a estrutura de dados.
Montagem do Banco via DB Expert
O modelo criado montou tabelas chave 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 Claude code direto na instância do Supabase, garantindo segurança, controle total e integração com o backend.
Atenção
Nunca exponha sua chave MCP. Guarda em ambiente seguro e jamais em versão pública.
Configuração do MCP
Pra conectar direito, criamos um arquivo mcp.de com o token de acesso. Depois de salvar e reiniciar o Claude code, os projetos ficaram visíveis e utilizáveis.
Funcionamento do Sistema de Indicação
A pessoa entra com o e-mail, gera um código de resgate ou link pra compartilhar, e vê o 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 também ter indicado outros. A estrutura da base deixa essa dupla organização rolar.
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 feito pra funcionar sem login no início. O e-mail vira identificador único pra rastrear e recompensar.
Importância da Extração do Design System
Processar o design system da app base e reutilizar reduz falha visual e acelera a prototipação com coerência.
Integração com Claude code
A automação da construção de schema e integração com banco foi realizada usando prompts no formato esperado pelo Claude 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
Continue lendo
Como integrar autenticação com Supabase e Nuxt 4: Guia prático
Descubra como configurar autenticação completa em Nuxt 4 usando Supabase, com Tailwind para visual atraente,...
Como construir um sistema de agendamento robusto com IA e segurança máxima
Descubra o passo a passo essencial para criar sistemas profissionais de agendamento com validação avançada, proteção...
Sistema de Clippers com Supabase e IA
Ganhe visualizações cortando vídeos e crie um sistema que automatiza tudo com Supabase, Resend e Lovable
React Hooks: Performance 3x Maior
Componentes React com hooks mal otimizados consomem 300% mais memória. Aprenda técnicas profissionais para otimizar...