Using Cursor + Claude to Make Full-Stack SaaS Apps

Last week, I released a video tutorial showcasing how I use Cursor and Claude 3.5, along with Open SaaS, to make fullstack SaaS apps.

The original video got reposted by influencer Rohan Paul and now has over 200,000 views!

So, since it seems to be a topic many people are interested, I thought I'd provide some extra info and tips to accompany the video and help you get started building SaaS apps fast, and hopefully help you make some extra cash!

Leveraging Open SaaS and Wasp

What's most important is that I use Open SaaS, a free, open-source, full-stack React, NodeJS, and Prisma SaaS starter as my basis.

Open SaaS comes packed with a bunch of cool features out of the box:

• Fullstack Auth

• Open AI API app examples

• AWS S3 file upload examples

• Stripe or Lemon Squeezy payments integration

• Fullstack typesafety

• Admin dashboard

• Email sending

• Full documentation

• Easy, one-command deployments

If you want to learn more, check out the Open SaaS homepage.

Not only is the template a great start because it comes with a ton of boilerplate code, but its also built on Wasp, a fullstack React/NodeJS framework with batteries included.

Wasp's use of a central config file means that all you have to do is define features in a few lines of code, and Wasp manages them for you, eliminating the need to write a bunch of boilerplate code for things like Auth, for example:

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

This means, when working with AI-assisted coding tools like Cursor and Claude, the AI has to do a lot less work. It writes code that's a lot simpler and you get code that's easier to debug!

Cursor Tips and Tricks

When I work with Cursor, I notice that there are still some problems with the AI hallucinating or writing buggy code. I solved these issues in two ways:

1. Add the Wasp docs into Cursor's context

2. Instruct Cursor on how to overcome common mistakes it makes in the Cursor Rules settings.

3. Make sure to Index your entire Codebase

1. Add the Wasp docs into Cursor's context

The benefit of using Open SaaS, and Wasp as the underlying framework, is that they're both free and open-source. Luckily, that means we also have access to their raw documentation files, which are written in markdown and can be found on their respective GitHub Repos.

So what I'll do is copy the Wasp docs markdown files into their own directory within the root of the project I'm working on. Then I can reference the docs whenever I have questions or am trying to implement a new feature.

Then, when I use Cursor's composer or chat interface, I can use the "@" symbol and select Folder -> Docs and write a prompt such as this:

Using the @docs as a guide, help me implement chat functionality with Wasp's Websockets feature into my app. Give the app a chat page...

2. Adding Cursor Rules to Avoid Common Mistakes

Cursor and Claude are amazing at writing code across multiple files, but they can still make small mistakes, such as hallucinating imports, or skipping a Wasp feature that would make the implementation quicker.

That's why I like to identify these common mistakes and add them to the Cursor Rules section within Cursor's Settings. Alternatively, you can add these rules to a .cursorrules file in the root of your project if you want them to remain project-specific.

What's important is that, if you find that Cursor consistently makes the same mistakes, to check the documentation, find the issue, and add a new rule as they appear.

Here are the rules I found to be useful so far:

• When importing Wasp functions from the SDK, make sure to use 'wasp' and not '@wasp', e.g. import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'

• Add new entities (aka models) to schema.prisma, NOT the main.wasp file

• Do NOT add dependencies to the main.wasp file, but instruct to install them via npm install instead.

• when creating Wasp operations (queries and actions) combine them into an operations.ts file within the feature directory rather than separate queries.ts and actions.ts files

3. Index Your Entire Codebase

This is a simple one. Make sure in your Cursor settings that you have the option to index your codebase, as this makes it easier for Cursor to keep your entire project (plus the documentation files) in context when you ask it to do something for you.

There's also an option to Index new folders by default under the Show settings dropdown. Make sure this is enabled to automatically index new folders and features as Cursor creates them

Now Get SaaSin'

And that's about it. Now there's no excuse for you to not build that cool SaaS app idea you've had forever.

Using Cursor, along with Open SaaS and Wasp, is like a cheat code for SaaS app development, so have fun with it!

Oh, and by the way, if you find this useful, we'd love a star on GitHub 🙏

It's the easiest way to support open-source initiatives like ours.

Thanks, and see you next time!