Usando Cursor + Claude para Criar Aplicativos Full-Stack SaaS

Na semana passada, eu divulguei um tutorial de vídeo mostrando como eu uso o Cursor e o Claude 3.5, juntamente com Open SaaS, para criar aplicativos full stack SaaS.

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 uso Open SaaS, um gratuito, de código aberto, full stack React, NodeJS, e Prisma SaaS starter como minha base.

O Open SaaS vem com um monte de recursos 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 pagamento com Stripe ou Lemon Squeezy

• Tiposafety fullstack

• Painel de Administração

• Envio de e-mail

• Documentação completa

• Deployamentos simples, com comando único

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

Não só o modelo é um ótimo início porque vem com montes de código padrão, mas também é construído com Wasp, um framework React/NodeJS full stack que já inclui baterias prontas.

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 padrão 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 AI como Cursor e Claude, o AI precisa fazer muito menos trabalho. Ele escreve código muito mais 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 existem alguns problemas com o AI alucinando ou escrevendo código defeituoso. Eu resolvi esses problemas de duas formas:

1. Adicionar as docs do Wasp ao contexto do Cursor

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

3. Certifique-se de indexar todo o seu Codebase

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

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

Então o que eu vou fazer é copiar os arquivos de documentação do Wasp em markdown 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 aplicativo. Dê ao aplicativo uma página de bate-papo…

2. Adicionar regras do Cursor para evitar erros comuns

Cursor e Claude são ótimos 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 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ê achar que o Cursor faz regularmente 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 schema.prisma, NÃO ao arquivo main.wasp

• NÃO adicione dependências ao arquivo main.wasp, mas instale-as via 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 de recurso, em vez de arquivos separados queries.ts e actions.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 torna mais fácil para o Cursor manter todo o seu projeto (junto com os arquivos de documentação) no contexto quando você pedir que ele faça alguma coisa por você.

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

Agora vá em SaaSin’

E é só isso. Agora não há mais desculpa para você não construir aquela legal ideia de aplicativo SaaS que você têve há muito tempo.

Usando o Cursor, juntamente com Open SaaS e Wasp, é como usar um código cheat para o desenvolvimento de aplicativos SaaS, então divirta-se com isso!

E, por certo, se você achar isso útil, nós adoraríamos uma estrela no GitHub 🙏

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

Agradecemos e até a próxima vez!