Skip Lovable BR: front exportado e backend | guia prático
Parte 2 do sistema: front gerado no Skip (Lovable brasileiro), código baixado e backend montado com Claude/GPT-5. Fluxo real, não só lista de espera
Resposta direta
Gerar UI no Skip só vale se você baixa o código e fecha o backend com critério — senão fica demo presa no builder. E no projeto pegar que qual é o nome do projeto de fato sistema lista de espera skip sistema lista de espera skip dentro da hora de sbc2 nosso para isso tentando dar um pouco mais de contexto aqui para o curso e dá bem né agora passa a interação do banco com o código.
O que o Skip entrega no front
Bom pessoal, então na parte 1 desse sistema que a gente está criando, a gente fez todo o front-end aqui no Skip, se você não conhece ainda o Skip, é o lovable brasileiro que a gente está criando e você pode entrar na lista de espera no link da descrição. E depois disso eu fui aqui em código, baixei o código e a gente foi ali para o cursor, onde eu coloquei o Claude code, a gente colocou o MCP do Supabase com o Claude code. Eu vou continuar pelo cursor, não mais pelo Claude code, usando o GPT-5, aproveitando aí o hype do momento. Até para mostrar para vocês, então, quando você volta aqui para o Claude code, você pode usar a opção Resume, basicamente resumir, e aí você escolhe.
E tem um ponto que a gente não falou aqui, que no último vídeo também a gente usou o DB Expert para gerar toda a estrutura do nosso banco de dados, depois a gente exportou e de fato fez ali no curso. E agora a gente vai, de fato, para uma etapa muito importante, que é a etapa para ver se tudo está funcionando de forma adequada. E para isso a gente vai usar o GPT-5 aqui no curso. Então agora eu vou ter que configurar o MCP do Supabase no curso para que ele tenha o mesmo contexto que o Claude code tinha.
Beleza se você não sabe configurar um mcp aqui no curso né você clica aqui em curso você na verdade tem que cair na página de configurações né independente sistema operacional que você esteja usando aí que pode ser que seja usando o Windows e não Mac ou Linux que seria alguma experiência mais semelhante com essa e aqui você vem nessa tem General você tem chat Tab models background-agents dos integrations a minha que aparece já mcp-tools aqui até fala que esse dos tá ligado? Fazendo essa transição, já que o curso não tem o contexto que o Claude code fez aqui, o que eu vou fazer? Ele colocou aqui e eu vou falar, recentemente implementamos o banco de dados no SuperBase via MCP. E no projeto pegar que qual é o nome do projeto de fato sistema lista de espera skip sistema lista de espera skip dentro da hora de sbc2 nosso para isso tentando dar um pouco mais de contexto aqui para o curso e dá bem né agora passa a interação do banco com o código.
Baixar o código e não ficar refém do builder
Se necessitar de contextos, também pode usar o modelo que tem no TMD, que foi o que usamos para criar o banco. Então é isso, vou mandar aqui e vamos ver o que ele vai conseguir fazer para gente, ele vai conseguir integrar bem isso. Se você não sabe o que é npm run dev, basicamente é um comando que a gente roda localmente a aplicação aqui. E não fechou a porta direito tá meio que em outra aplicação né E aí eu tento abrir beleza em outro perfil de usuário aí tá aqui a uma coisa que eu acho que a gente vai ter que fazer cara Primeiro, esse link de indicação, esse seu site, vai ser substituído por algum site em algum momento, mas eu queria também que tivesse a opção no início se a pessoa está ou não na lista.
A parte positiva aqui, que aqui no final do cloud ele já tinha falado, que a aplicação usava dados mocos estáticos e os arquivos principais que precisavam de integração. Então foi bom ter passado esse contexto aqui de fato para o curso, que cara, tá pensando horrores, né? Eu acho que o Plot Code é bem mais rápido até, ou pelo menos ele passa a sensação de ser mais rápido, mas em alguns testes que a gente fez, como por exemplo no vídeo de ontem, ele realmente parece ser mais rápido que o curso. Acho que muito porque também, cara, esse modelo GPT-5 ele tá pensando bastante né ele tá nesse fim aqui a desde que já era um resultado bom ok então pessoal depois de implementar né o MCP dos Faber também aqui no curso e dá o contexto né do que eu fiz aqui no Claude code para o curso aí como é que eu disse com terço basicamente foi copiando isso daqui né e apertando o comando de L é que direcionar para lá a então apareceu aqui em linhas tá vendo Aí eu falei algumas coisas, o que ele deveria fazer, e aí coloquei GPT-5, e ele começou a executar aqui algumas coisas para a gente, ele começou também a executar alguns MCPs aqui, né, two columns, e ele falou o seguinte, vou criar uma função no banco para mapear, necessário para associar, beleza, em seguida vou criar, ok, vou rodar aqui, e é isso, ele está executando, ele ficou muito tempo pensando ali no início, mas a execução do.
Galera, não sei se é viés depois de usar o Claude code 90, 95% do tempo, mas cara, tô achando muito lento, velho, o cursor com GPT-5. Não sei se é o GPT-5 especificamente, imagino que não, mas cara, pra mim tá muito devagar, tipo, é. Bom, pessoal, ele implementou aqui e eu vou dar só uma alterada aqui no fluxo para que ele basicamente pergunte primeiro, né? Ok, cara, qual é o e-mail que você está na lista de espera para tudo isso?
Leitura útil
Gerar UI no Skip só vale se você baixa o código e fecha o backend com critério — senão fica demo presa no builder. Use o trecho acima como restrição, não como citação ornamental.
Quando entra Claude vs GPT-5 no backend
Beleza pessoal, então o que eu falei, cria um fluxo anterior à tela atual, pergunte ao usuário se ele está na lista de espera, e quando ele colocar o e-mail, se ele não estiver na lista, cadastra na lista, e se ele já estiver na lista, vai para outra tela, mas nos dois casos ele vai para a tela seguinte. E com base no e-mail, eu pedi só para ele criar um tipo de código ali, para que a gente consiga ter esse código quando ele tiver o link de indicação dele. Eu vou criar uma tela anterior a essa, para ele colocar o e-mail, como se tivesse a parte de baixo aqui na tela anterior. E aqui depois eu quero que tenha um código dele, um código específico para ele.
E aí vamos mandar aqui, vamos ver como é que o GPT-5 também mantém o design system. Bom pessoal, segundo ele, finalizou aqui uma coisa de apt-sync, que é que ele dá uma explicação bem grande em relação ao que foi feito. E não faz muito sentido né eu teria que conseguir acessar uma tela inicial aqui vou pedir para ele vou pessoal nesse time lá que vocês viram que que aconteceu né se vocês voltarem um pouquinho vocês vão ver eu fui para o cloud para tentar resolver um erro Voltei para o GPT-5 Não estava conseguindo resolver Voltei para o GPT-5 E o GPT-5 conseguiu resolver, cara. Então, assim, também acho que é um erro que eu conseguiria se eu fosse um pouco mais persistente no Cloud Poder da DSR.
Então, todo esse time-lapse aí foi basicamente corrigir um erro para que ela ficasse da maneira adequada ali para a gente, né? Bom então vamos falar que tá entrando na lista de espera do Skype né você entrou com esse e-mail então você vem que que ele faz automaticamente ele já gera um código a para você conseguir indicar outra pessoa né é isso você não tá na lista ele faz meio tudo isso ele coloca na lista coloca você na tabela de usuários ali do super base e já criou o seu código até criar uma tela intermediária se isso demorar muito também. E aí eu vou até copiar e eu vou abrir aqui para vocês verem a missa que atualizando se outra pessoa entrasse com o código dessa né então vamos até abrir aqui é a CC a URL o ref com o código da pessoa e eu vou entrar agora cara vamos ver aqui com a gente colocou 444 ali né e eu vou colocar esse beleza essa pessoa acessou agora então vamos ver se a outra vai aumentar um vamos dar um refresh aqui arde refresh para o também tô né ela já tem uma indicação então aqui que foi que entrou como um todo eu vou colocar simular indicação mas na prática eu vou tirar isso aqui né até porque se eu der refresh ele tá pegando banco então ele vai voltar para um Então foi isso que a gente fez Vou fazer alguns testes adicionais, do tipo se a pessoa tentar entrar com um e-mail que já está cadastrado, se vai contabilizar na indicação e tem algumas questões de segurança também que eu quero ver, porque pode ser legal ter um segundo fator, tipo o número do telefone e tal. Pessoal, então só para finalizar, alguns ajustes que eu fiz ainda com o GPT-5.
Riscos de vibecoding sem contrato de API
E eu coloquei também agora número que ajuda bastante na validação então coloquei alguns pontos de validação né então vamos falar que eu vou acessar cara a um esse meio e aqui eu coloco o número que não é né então ele vai verificar e vai falar cara e-mail já possui um celular diferente cadastrado. E pessoal, uma coisa interessante, quando você coloca o seu e-mail aqui, e enfim, algum número no geral, eu fiz uma confirmação de e-mail pelo Resend. E para isso a gente pode ter em próximos vídeos aqui, eu tive que criar uma add function no Supabase para guardar ali credenciais do resend e tal, e a gente conseguir ter um gatilho automático ali bem legal. E aí a pessoa que indicou essa pessoa aqui, ela só vai receber como indicação ali quando essa pessoa confirmar o e-mail, né?
E aí a partir do momento que confirmo o e-mail, de fato vai aparecer aqui todas as opções e o link também, né, para ser utilizado, vou até mostrar para vocês. Aqui ó, chegou então esse e-mail, né, e quando eu clico aqui em confirmar e-mail, ele aparece que o e-mail foi verificado e fala que eu vou ser redirecionado. E aí de fato quando eu acesso aqui novamente, se eu já tivesse com a janela aberta já ia entrar automaticamente, mas quando eu acesso aqui, deixa eu ver se é esse, é esse, pronto. Já aparece aqui, já aparece também o meu ref né então foi uma forma que eu fiz aqui cara colocar no recente recente é ótimo eu gosto muito e você tem cara uma quantidade legal de e-mails para testar e é relativamente É bem mais simples do que outras soluções, então foi coisa de 20 minutos no máximo eu já criei essa configuração ali.
Eu ainda, como escolha final, ainda prefiro o Claude code, mas é bom ter modelos que às vezes vão olhar numa perspectiva diferente um problema. O GPT-5 me parece bastante isso, porque, cara, se for para usar o cursor, e não o Claude code, que seja com algo diferente, e não, por exemplo, usar o Soneo, o Opus lá pelo cursor, porque isso já tem um no Claude code ali também. Eu não vou largar o Claude code por conta disso, cara, eu gosto muito do Claude code e a Anthropic, né? Pensa que a criadora do modelo e a criadora da ferramenta é a mesma empresa, então traz uma experiência realmente muito boa para a gente.
Checklist para fechar um vertical slice
Bom pessoal, então na parte 1 desse sistema que a gente está criando, a gente fez todo o front-end aqui no Skip, se você não conhece ainda o Skip, é o lovable brasileiro que a gente está criando e você pode entrar na lista de espera no link da descrição. Então a gente fez aqui todo o front e etc. E depois disso eu fui aqui em código, baixei o código e a gente foi ali para o cursor, onde eu coloquei o Claude code, a gente colocou o MCP do Supabase com o Claude code. E agora a gente vai continuar, mas a gente vai continuar diferente.
Eu vou continuar pelo cursor, não mais pelo Claude code, usando o GPT-5, aproveitando aí o hype do momento. Até para mostrar para vocês, então, quando você volta aqui para o Claude code, você pode usar a opção Resume, basicamente resumir, e aí você escolhe. Cara, o que você quer de fato é que, em conversa, você quer voltar. Por exemplo, eu falei, cara, eu quero voltar para essa conversa.
E no final da conversa, o que a gente estava fazendo? A gente criou o banco de dados lá no Supabase. Eu vou ver se realmente foi tudo criado certinho lá no Supabase. E tem um ponto que a gente não falou aqui, que no último vídeo também a gente usou o DB Expert para gerar toda a estrutura do nosso banco de dados, depois a gente exportou e de fato fez ali no curso.
Próximo passo
Escolha uma métrica (tempo, retries, conversão ou qualidade aceita) e rode 7 dias antes de escalar o padrão.