Usando Cursor + Claude para Construir Aplicações SaaS Full-Stack

Semana passada, publiquei um tutorial de vídeo mostrando como eu uso o Cursor e o Claude 3.5, juntamente com Open SaaS, para criar aplicativos SaaS fullstack.

O vídeo original foi repostado pelo influenciador Rohan Paul e agora tem mais de 200.000 visualizações!

Então, já que parece ser um tópico de interesse de muitas pessoas, pensei em fornecer algumas informações extras e dicas para acompanhar o vídeo e ajudar você a começar a construir aplicativos SaaS rapidamente, esperando que isso ajude você a fazer algum dinheiro extra!

Aproveitando o Open SaaS e o Wasp

O que é mais importante é que eu usei Open SaaS, um gratuito, de código aberto, React, NodeJS e Prisma estarter full-stack SaaS como minha base.

O Open SaaS vem com um monte de funcionalidades fixes de fora da caixa:

• Autenticação fullstack

• Exemplos de aplicativos com API Open AI

• Exemplos de upload de arquivos para AWS S3

• Integração de pagamentos com Stripe ou Lemon Squeezy

• Tiposafety fullstack

• Painel de Administração

• Envio de e-mails

• Documentação completa

• Implantações fáceis, com apenas um comando

Se você quiser saber mais, verifique a página inicial do Open SaaS.

Não só o modelo é um ótimo início porque vem com montes de código modelo, mas também é construído com Wasp, um framework React/NodeJS fullstack com baterias incluídas.

O uso de um arquivo de configuração central por Wasp significa que tudo o que você precisa fazer é definir recursos em algumas linhas de código, e o Wasp gerencia-os por você, eliminando a necessidade de escrever montes de código modelo para coisas como Autenticação, por exemplo:

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

Isso significa, quando trabalhando com ferramentas de codificação assistidas por IA como Cursor e Claude, a IA tem que fazer menos trabalho. Ela escreve código muito simples e você obtém código que é mais fácil de depurar!

Dicas e Truques do Cursor

Quando eu trabalho com o Cursor, notei que ainda há alguns problemas com a IA delirando ou escrevendo código defeituoso. Eu resolvi esses problemas de duas formas:

1. Adicionar as documentações do Wasp ao contexto do Cursor

2. Instruir o Cursor sobre como superar os erros comuns que ele faz nas configurações das Regras do Cursor.

3. Asegure-se de indexar toda a base de código.

1. Adicione a documentação do Wasp no contexto do Cursor

O benefício de usar Open SaaS e Wasp como framework subjacente é que ambos são grátis e de código aberto. Felizmente, isso significa que também temos acesso aos arquivos de documentação raw, que são escritos em markdown e podem ser encontrados em seus respectivos repositórios no GitHub.

Então o que farei é copiar os arquivos de markdown da documentação do Wasp para sua própria pasta na raiz do projeto em que estou trabalhando. Assim, posso consultar a documentação sempre que tiver dúvidas ou estiver tentando implementar uma nova funcionalidade.

Então, ao usar o compositor do Cursor ou sua interface de bate-papo, posso usar o símbolo “@” e selecionar Pasta -> Docs e escrever uma prompt como esta:

Usando o @docs como guia, ajude-me a implementar a funcionalidade de bate-papo com o recurso de Websockets do Wasp em meu app. Dê ao app uma página de bate-papo…

2. Adicionar regras do Cursor para evitar erros comuns

O Cursor e o Claude são excelentes em escrever código em vários arquivos, mas ainda podem fazer pequenos erros, como hallucinar imports ou pular um recurso do Wasp que faria a implementação ser mais rápida.

É por isso que eu gosto de identificar esses erros comuns e adicioná-los à seção de Regras do Cursor nas Configurações do Cursor. Alternativamente, você pode adicionar essas regras the um arquivo .cursorrules no root do seu projeto se quiser que elas sejam específicas do projeto.

O que é importante é que, se você acha que o Cursor faz consistentemente os mesmos erros, verifique a documentação, encontre o problema, e adicione uma nova regra conforme elas aparecem.

Aqui estão as regras que eu acho que são úteis até o momento:

• Ao importar funções do Wasp do SDK, certifique-se de usar ‘wasp’ e não ‘@wasp‘, por exemplo: import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'

• Adicione novas entidades (ou modelos) ao arquivo schema.prisma, não ao arquivo main.wasp

• NÃO adicione dependências ao arquivo main.wasp, mas instale-as por meio de npm install em vez disso.

• ao criar operações do Wasp (consultas e ações), combine-as em um arquivo operations.ts dentro do diretório feature, em vez de usar arquivos separados consultas.ts e ações.ts

3. Indexe toda a base de código

Este é um simples. Certifique-se que nas configurações do Cursor você tenha a opção para indexar sua base de código, pois isso faz com que o Cursor mantenha todo o seu projeto (junto com os arquivos de documentação) no contexto quando você pedir para ele fazer alguma coisa por você.

Também existe uma opção para Indexar novos diretórios por padrão na lista suspensa Mostrar configurações. Certifique-se que isso esteja habilitado para indexar automaticamente novos diretórios e recursos conforme o Cursor os criar

Agora vá construir sua aplicação SaaS

E é praticamente isso. Agora não há mais desculpa para você não construir aquela legal ideia de aplicação SaaS que você têve há sempre.

Usando o Cursor, juntamente com Open SaaS e Wasp, é como usar um código de cheat para a construção de aplicações SaaS, então divirta-se com isso!

E, por certo, se achar isso útil, gostaríamos de uma estrela no GitHub 🙏

É a maneira mais fácil de apoiar iniciativas de código aberto como a nossa.

Obrigado e até a próxima vez!