Como criar sistema de lista de espera com Supabase, GPT-5 e Claude code
Um guia completo com integração de front-end, Supabase, autenticação e uso do modelo GPT-5 no fluxo de desenvolvimento com Cursor e Claude code.
Por que isso é importante
O desenvolvimento de sistemas interativos de cadastro com validação, autenticação e camada de recomendação automatizada tornou-se essencial. Aprender a integrar ferramentas modernas como Skip, Supabase, Claude code e o modelo GPT-5 proporciona não apenas velocidade no desenvolvimento, mas também inteligência no fluxo de decisão.
Montando o Front-End com Skip
A primeira etapa do projeto consistiu na criação do front-end utilizando o Skip, uma ferramenta brasileira focada em produtividade. Após a finalização da interface, foi feito o download completo do código-fonte gerado.
Exportando o Código e Iniciando com Cursor
Com o front desenvolvido, o projeto foi migrado para o Cursor. A partir disso, iniciou-se a implementação da lógica de integração utilizando o Claude code e o modelo MCP para conectar com o Supabase. Posteriormente, decidimos testar um novo fluxo adotando o GPT-5 direto pelo Cursor.
Configurando o Claude code e MCP
Inicialmente o MCP foi implementado apenas para o ambiente do Cloud. Percebeu-se que para manter consistência com o ambiente Cursor, o MCP também precisava ser traduzido e adaptado, garantindo o mesmo contexto e histórico de operações entre as plataformas.
⚠️Atenção
Configurações de integração variam conforme o sistema operacional. Ajustes nos paths, permissões e autenticações devem ser respeitados especialmente no Windows.
Criação do Banco de Dados no Supabase
A estrutura de dados foi gerada inicialmente com ajuda do DB Expert e exportada para o Supabase. Isso garantiu um ponto de partida consistente e de fácil modificação estruturada.
Usando GPT-5 dentro do Cursor
Com a estrutura pronta, o GPT-5 foi utilizado para implementar funções mais inteligentes de verificação, cadastro condicional e manipulação de banco de dados com regras de negócios dinâmicas.
ℹ️Info Técnica
Apesar de mais lento que o Claude code, o GPT-5 entrega respostas contextualizadas e com decisões mais precisas, otimizando o fluxo conforme interações prévias.
Criação de Fluxo Contínuo de Cadastro
Implementamos uma tela anterior à atual para captação de e-mails. A lógica passou a considerar se o e-mail já estava na lista de espera, tratando cada caso e redirecionando para próxima etapa adequadamente.
Geração de Código de Indicação
Com base no e-mail cadastrado, foi gerado automaticamente um código único de recomendação, permitindo o crescimento orgânico da base de usuários por indicações individuais.
✅Atenção
Esse código é associado a cada usuário e pode ser usado como parâmetro em URLs de referência, aumentando a efetividade e rastreabilidade das indicações.
Validação com Número de Celular
Para evitar fraudes por múltiplos e-mails, implementamos um campo adicional com número de celular. Caso o e-mail já esteja registrado com outro número, a aplicação bloqueia o cadastro até validação correta.
Verificação de E-mail com Resend
Integramos o Resend via função personalizada no Supabase para validar e-mails antes de contabilizar a indicação. Somente após a confirmação o usuário passa a constar na base de dados com seu status de indicado.
❌Integração com domínio
O domínio precisa estar configurado adequadamente no Cloudflare para que os e-mails do Resend não caiam em spam.
Deploy na Vercel e Escolha da Ferramenta Final
Após todos os testes rodarem corretamente, o sistema foi publicado na Vercel. Apesar do Cursor com GPT-5 trazer insights interessantes, a preferência final ainda ficou com o Claude code pela velocidade e integração mais profunda.
Claude code
Experiência consistente e rápida com bom histórico de uso
Prós
- Respostas mais rápidas
- Menor latência
- Melhor integração com design system
Contras
- Menor criatividade nas soluções geradas
Cursor + GPT-5
Aproximação criativa, ideal para brainstorming de lógica
Prós
- Melhor adaptação por contexto
- Soluções alternativas
- Refinamento de lógica
Contras
- Tempo de execução maior
- Maior uso de recursos
Checklist de Implementação
✅Transforme sua carreira
E foi EXATAMENTE por isso que eu criei um curso de Node.js e React chamado CrazyStack. A minha maior necessidade no início da carreira era alguém que me ensinasse um projeto prático onde eu pudesse não só desenvolver minhas habilidades de dev como também lançar algo pronto para entrar no ar no dia seguinte.
Sabe qual era minha maior frustração? Aplicar conhecimentos teóricos em projetos práticos e reais, mas não encontrar ninguém que me ensinasse COMO fazer isso na prática! Era exatamente a mesma frustração que você deve sentir: acumular informação sem saber como implementar na prática.
Assim como você precisa de estratégias claras e implementação prática para ter sucesso, todo desenvolvedor precisa de um projeto estruturado para sair do teórico e partir para a execução. É como ter todas as peças do quebra-cabeça mas não saber como montá-las - você pode ter conhecimento técnico, mas sem um projeto completo, fica difícil transformar esse conhecimento em resultados concretos.
No CrazyStack, você constrói um SaaS completo do zero - backend robusto em Node.js, frontend moderno em React, autenticação, pagamentos, deploy, tudo funcionando. É o projeto que eu queria ter quando comecei: algo que você termina e pode colocar no ar no mesmo dia, começar a validar com usuários reais e até monetizar.