I usually leave Cursors Agent mode with the model setting on Auto, but I felt like these prompts performed better with Sonnet 4.5 as the model, the few times I used it.

Now, on to the prompts.

Prompt #1: Fixing Build Errors.

The prompt:

Fix all build errors, ignore any warnings, and repeat this until a build is successful. Use: npm run build.

I used npm run build but you can write whichever one you use. Also, Cursor usually figures out which one to use.

This is a very simple prompt. However, this is probably my most used prompt. Every time i ask Cursor to write a feature or an entire application (mostly on top of starterkit template that i use to build my apps), most times, it uses things like any and other errors that you wouldnt notice unless you run your build command because they dont show up in your development server. It think this is a very common problem when youre vibe coding.

It is really boring to try and fix them all by myself. So, once Im satisfied with the state of the applications working, I generally run this prompt and review the changes it made. It is just super convenient to do it like this.

Note: The auto mode does just fine for most cases, unless you one shotted a massive application and its not even running properly (in which case, Id suggest using Sonnet 4.5 explicitly).

Prompt #2: Generating a PR message

The prompt:

Generate a technical and concise PR message for the last {x} commits.

Replace {x} with the number of commits you want to generate the PR message for.

I find this useful because sometimes I refer back to my pull requests to see what I did and how I did certain things in the past. Over time, I had multiple variations of this prompt before I finally arrived at this. I know it feels like Im talking too much about a super tiny prompt like this but, believe me when I say it, I used use a prompt that was a bit more detailed than this, and the results were mostly jargon & often times over-estimated than what actually was there.

So, at least in my opinion, this yields a PR message that kinda does a fine job at recording all the changes that were made, described in good developer lingo.

Note: Only Sonnet 4.5 Thinking seems to be doing a good job with this prompt. The auto modes results are unpredictable and sometimes not very useful.

And thats it!

Yeah really. I just wanted to leave them here as my notes, and for anyone that comes across this. Figured I might as well hear some thoughts on this. You can reach out to me on X (CharanMNX) or on my LinkedIn profile. Im happy to chat!

Happy Coding/Vibe-coding!

Some benefits of setting up a local instance of your Supabase backend are:

• Helps you keep production and development environments separate.

• Allows for completely offline development.

• You dont really need an online Supabase project, which means, unlimited test projects!

Setting Up Supabase CLI

If you dont have Supabase CLI setup on your machine and in your project, refer to this post:

Using Supabase CLI: How to Configure Local Supabase for Next.js Development

Although the title says its for Next.js, the instructions are pretty generic and will work for almost all types of projects.

Linking & Syncing Local Instance With The Online One

After youre done with the Supabase CLI setup, follow these instructions to link and sync your Supabase backend with a local instance:

1. Login to Supabase using the following command:

    supabase login
   

2. Link the local project to the one online using the link command and the project id:

    supabase link --project-ref YOUR_PROJECT_REF_ID
   

3. Next, run the following command:

    supabase db pull
   

   This pulls all the tables, functions, policies, etc., from the online version and generates a migration script under the /supabase/migrations folder.

   Sometimes, unexpected errors may pop up, so will a list of commands along with them, like below:

    supabase migration repair --status reverted 20250609121341
    supabase migration repair --status reverted 20250609121411
    supabase migration repair --status reverted 20250609121421
    supabase migration repair --status reverted 20250609121430
    supabase migration repair --status reverted 20250609121549
   

   Just run them in order and run the supabase db pull command again to generate the migration file.

4. Finally, run the following command to complete setting up your local Supbase backend setup.

    supabase db reset
   

   1. No, this wont delete any data on your original database.

   2. This wont bring a copy of data from your original database.

   3. This will setup all the tables, functions, policies, etc., as they were in your original database.

And thats it! Your Supabase backend now has a local version that you can play with, without worrying about messing up with anything.

Bonus

It kinda sucks how AI tools like Cursor, Windsurf, etc., never ask you setup a local instance using Supabase and jump straight to doing things with Supabase online. That is so messed up in many ways. Youd be testing your app and modifying things on a production environment. That is the equivalent of making changes to your app while people are using your app.

That being said, if youre a vibe-coder, or a developer who didnt know that you could do something like this, next time you prompt AI to build an app for you, if youre sure that youll be using Supabase for your database/backend, include this line: Use Supabase CLI.

Happy Coding and Vibe-Coding!

Heres how to setup Supabase CLI and use it in your Next.js project.

1. Install on your os.

    # macos & linux:
    brew install supabase/tap/supabase
   
    # windows:
    scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
    scoop install supabase
   

   Refer to this article for more details: Supabase CLI | Supabase Docs

2. Make sure to have Docker Desktop installed.

   Refer to this for Docker Desktop if you dont have it installed: Docker Desktop

3. Run the following command in the root folder of your Next.js project.

    supabase init
   

   This will create a folder called supabase. Also a supabase/config.toml file is generated after running supabase init. You can edit this file to change the settings for your locally running project. After you make changes, you will need to restart using supabase stop and then supabase start for the changes to take effect.

4. Start Docker Desktop on your machine.

5. Run this following command

    supabase start
   

   And go watch a half/full episode of Naruto or Brooklyn Nine-Nine (cause thats how long this might take, depending on your machine and internet connection, especially when its the first time).

6. After completing the run, it would give you some credentials like below, in your terminal:

             API URL: http://127.0.0.1:54321
         GraphQL URL: http://127.0.0.1:54321/graphql/v1
      S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
              DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
          Studio URL: http://127.0.0.1:54323
        Inbucket URL: http://127.0.0.1:54324
          JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
            anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
    service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
       S3 Access Key: 625729a08b95bf1b7ff351a663f3a23c
       S3 Secret Key: 850181e4652dd023b7a98c58ae0d2d34bd487ee0cc3254aed6eda37307425907
           S3 Region: local
   

   You will want to save them in your notes or create a file called supabase-local-credentials.txt, save these credentials in it and add it to your .gitignore.

7. Update Supabase environment variables in your .env.local using the credentials that were generated by Supabase CLI, like below:

    NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
    NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
    # ... other environement variables
   

8. Use the following command to stop the Supabase setup when done using it.

    supabase stop
   

   Always run this command after you're done with your work session!

And thats it! Thats how you setup Supabase CLI and use it in your Next.js project.

Rate limiting APIs is important to prevent abuse or unexpected usage on your APIs.

For example, say you have a public waitlist form to collect emails of your potential users. Here, your API that handles your waitlist form submissions is probably unprotected because you want anyone to be able to sign up in your form without any restrictions or need for authentication.

But, there is chance that your form can be spammed with random/unwanted emails with the help of bots to exhaust your server limits or mess up your database with random emails.

If your API is rate-limited to, say, 5 emails per IP address per 10 minutes, all other submission from that IP address (the user or the bot) are rejected, hence saving you from what is possibly a brute-force attack.

Heres how to rate limit a Next.js API using Upstash

1. Setup Upstash database on the Upstash console. Once youve signed up or logged in, you should see this screen:

   

2. Click on Create database and fill in the details like below, choose the free plan for now, and create your database:

   

   

3. You shouldve been redirected to your databases screen (its a Redis database, by the way).

   

4. Hover over your endpoint to see the following copy buttons:

   

5. Put the following environment variables in the .env.local:

   • Copy the HTTPS buttons content into the UPSTASH_REDIS_REST_URL environment variable.

   • Copy the TOKEN buttons content into the UPSTASH_REDIS_REST_TOKEN environment variable.

   • Your environment variables should include the following (with the real values):

    UPSTASH_REDIS_REST_URL=xxxxxxxxx
    UPSTASH_REDIS_REST_TOKEN=xxxxxxxxx

6. Install Upstash dependencies: npm install @upstash/ratelimit @upstash/redis in your Next.js project.

7. Add the following to lib/ratelimit.ts

    import { Ratelimit } from '@upstash/ratelimit';
    import { Redis } from '@upstash/redis';
   
    type Unit = 'ms' | 's' | 'm' | 'h' | 'd';
    type Duration = `${number} ${Unit}` | `${number}${Unit}`;
   
    // A function to create a ratelimiter instance with a given configuration
    export function createRateLimiter(requests: number, duration: Duration) {
      // During development, we don't want to rate-limit.
      if (process.env.NODE_ENV === 'development') {
        return {
          limit: () => {
            return {
              success: true,
              pending: Promise.resolve(),
              limit: requests,
              remaining: requests,
              reset: Date.now() + 1000,
            };
          },
        };
      }
   
      return new Ratelimit({
        redis: Redis.fromEnv(),
        limiter: Ratelimit.slidingWindow(requests, duration),
        analytics: true,
        // Create a unique prefix for each ratelimiter to avoid collisions
        prefix: `@clndr/ratelimit/${requests}-requests/${duration.replace(' ', '')}`,
      });
    }
   

8. Add this to the Next.js API that you want to rate limit (route.ts)

    // Your imports
    // ...
    import { createRateLimiter } from '@/lib/ratelimit';

    const ratelimit = createRateLimiter(5, '600 s');

    export async function POST(request: NextRequest) {
      const ip = (request.headers.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0];
      const { success, limit, remaining, reset } = await ratelimit.limit(ip);

      if (!success) {
        return NextResponse.json(
          { error: 'Too many requests. Please try again later.' },
          {
            status: 429,
            headers: {
              'X-RateLimit-Limit': limit.toString(),
              'X-RateLimit-Remaining': remaining.toString(),
              'X-RateLimit-Reset': reset.toString(),
            },
          },
        );
      }
      // Your API code goes here
      // ...
     }

9. Test, Deploy, and Launch!

Heres how to use this with AI tool(s) like Cursor

After you create the Upstash database and add the environment variables to your .env.local Write a prompt saying:

Implement a rate-limiting for my {your API name} API using the instructions and the code, as is, in this blog post. Ive already setup the Upstash database and added the necessary environment variables to .env.local. Also, do verify if the rate-limiting setup already exists in the codebase. Only add the rate-limiting function code if it doesnt already exist:

And, paste this posts link in an code editor like Cursor and let it handle the coding for you!

P.S.

And thats it! Hope this helps!

Do you need a website or an app for your business?
You can reach out to me at @CharanMNX on X/Twitter or email me at charan@devsforfun.com

Here are my other socials if you wanna talk:

• Instagram: iam.charan.dev

• X/Twitter: @CharanMNX

• LinkedIn: Charan Manikanta Nalla

• GitHub: CharanMN7

• YouTube: Charan

• Website: charan.dev

Happy Coding or Vibe Coding!

• Initialize a Next.js project (Next.js 15 recommended) with Tailwind CSS.

• (Optional) This guide uses Shadcn UI components. Install it from the official docs website: ui.shadcn.com

• Setup Supabase credentials in .env.local

• Setup supabase clients and middleware (optional)

Note: Replace the <Input />, <Button>, and <Toast /> components with your own components or default tags if you dont want to install Shadcn UI

Heres the notes on how to create a simple waitlist form in Next.js, collect responses from it, and store it on Supabase.

1. Create a table called waitlist in the Supabase SQL Editor:

    -- 1. Create the table for the waitlist
    CREATE TABLE public.waitlist (
      id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
      email text NOT NULL UNIQUE,
      created_at timestamptz DEFAULT now()
    );
   
    -- 2. Enable Row Level Security (RLS) on the table
    ALTER TABLE public.waitlist ENABLE ROW LEVEL SECURITY;
   
    -- 3. Create a policy that allows public insertion into the table
    CREATE POLICY "Allow public insert" ON public.waitlist FOR INSERT WITH CHECK (true);
   

2. Create the API for handling the form submission, /api/waitlist:

    import { createClient } from '@/utils/supabase/server';
    import { NextRequest, NextResponse } from 'next/server';
   
    export async function POST(request: NextRequest) {
      const { email } = await request.json();
   
      if (!email) {
        return NextResponse.json({ error: 'Email is required' }, { status: 400 });
      }
   
      const supabase = await createClient();
   
      const { error } = await supabase.from('waitlist').insert([{ email: email.trim().toLowerCase() }]);
   
      if (error) {
        if (error.code === '23505') {
          // unique_violation
          return NextResponse.json({ message: 'You are already on the waitlist.' }, { status: 200 });
        }
        return NextResponse.json({ error: error.message || 'Something went wrong' }, { status: 500 });
      }
   
      return NextResponse.json({ message: 'You have been added to the waitlist!', email: email.trim().toLowerCase() });
    }
   

3. Add this waitlist form code to your landing page or wherever you want it:

    "use client";
   
    import { Button } from "@/components/ui/button";
    import { Input } from "@/components/ui/input";
    import { useState } from "react";
    import { toast } from "sonner";
    import { Loader2, Check } from "lucide-react";
   
    export default function Page() {
      const [email, setEmail] = useState('');
      const [loading, setLoading] = useState(false);
      const [isSuccess, setIsSuccess] = useState(false);
   
      // Function to handle the submission
      const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!email) {
          toast.error("Please enter your email.");
          return;
        }
        setLoading(true);
   
        try {
          const response = await fetch('/api/waitlist', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ email: email.trim().toLowerCase() }),
          });
   
          const data = await response.json();
   
          if (response.ok) {
            toast.success(data.message);
            setEmail('');
            setIsSuccess(true);
          } else {
            toast.error(data.error || "Something went wrong.");
          }
        } catch {
          toast.error("An unexpected error occurred.");
        } finally {
          setLoading(false);
        }
      };
   
      return (
        <>
          {/* Your JSX Code */}
          {/* Waitlist form Code: */}
          {isSuccess ? (
            <Button disabled className="cursor-default bg-black text-white border disabled:opacity-100">
              <Check className="h-4 w-4 text-green-500" /> you&apos;re on the list!
            </Button>
          ) : (
            <form onSubmit={handleSubmit} className="flex gap-2">
              <Input
                type="email"
                placeholder="e.g., naruto@gmail.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={loading}
              />
              <Button type="submit" className="cursor-pointer" disabled={loading}>
                {loading ? <><Loader2 className="animate-spin mr-2" /> joining...</> : 'join waitlist'}
              </Button>
            </form>
          )}
        </>
      );
    }
   

   Note: There is some toast based logic in the UI component. Replace the toast logic with console.log() statements if youre not using or havent installed the sonner package.

4. Test, Deploy, and Launch!

Result

Here is an example site, called nvyt.xyz that is using the above code:

Heres the result upon submitting the form:

Note:

• If youre using Shadcn UI components, you should see a similar result in the UI.

• Ive used the <Toast /> component in my root layout is how I got that toast, in the bottom right corner.

Heres how to use this with AI tool(s) like Cursor

Write a prompt saying:

Build a waitlist page using the instructions and the code, as is, in this blog post:

And, paste this posts link in an code editor like Cursor and let it handle the coding for you!

Bonus

You can refer to my other article about rate-limiting your Next.js APIs like the one we have here, to prevent brute-force attacks bombing your public waitlist form with random email address. It has the AI prompt too, if you just want to skip coding.

Heres the link: How to rate limit your Next.js APIs using Upstash?

P.S.

And thats it! Hope this helps!

Do you need a website or an app for your business?
You can reach out to me at @CharanMNX on X/Twitter or email me at charan@devsforfun.com

Here are my other socials if you wanna talk:

• Instagram: iam.charan.dev

• X/Twitter: @CharanMNX

• LinkedIn: Charan Manikanta Nalla

• GitHub: CharanMN7

• YouTube: Charan

• Website: charan.dev

Happy Coding or Vibe Coding!

Hi! Im Charan. Im a software engineer and a freelance full-stack developer. Welcome to my web notes, where I write short (or sometimes long) blog posts about things I learn as I build various SaaS applications. I usually build my apps on the web (but not limited to it), and I constantly learn new things with every new app that I build. And some of these pieces that I write, I see myself rewriting them across projects. Usually, Id put these pieces somewhere like a notes app, but I just never felt like using a notes app for recording these. Referring to GitHub all the time? Not my cup of tea.

So, I decided to get a domain and record all of my notes in a blog under this new domain. Why? I honestly dont know. I just thought itd be easier to search up my notes if I had them here on the web. And this might as well help other people (and LLMs!) to write good code, fast.

My tech stack right now

Here are my most frequently used technologies for building things:

• Languages: TypeScript, JavaScript, Python

• Libraries: React, Tailwind CSS, Shadcn UI Components (not a library, I know)

• Framework(s): Next.js

• Tools: Supabase, Upstash Redis, Vercel, Cursor (Code Editor), Google AI Studio

Note that Im limited to these. I know and use a bunch of other tools and technologies in my work, but the above list is what I use the most.

So, Why should I care?

Here are a few example topics that Ill be writing about in this blog:

• How to create a simple waitlist form?

• How to set up rate limiting for APIs in Next.js using Upstash?

• Typical cyberattacks on forms on the web.

• How to prompt Cursor like a pro full-stack developer?

and so on.

So, if any of these sound interesting and/or you want human-verified guides to building SaaS appliactions, this blog is for you.

Oh, and subscribe to my newsletter if you wanna get updates whenever I post something! Youll find the signup part at the end of this post.

Bonus

If you read this far, heres a tip. If youre building with the same or a similar tech stack as mine, you can actually add any of my blog posts on this website in Cursor under Docs or copy and paste it into the Cursor chat window and ask it to follow the exact same pattern and build that feature or integration in your app. That will ensure that Cursor surely did a good job at writing it, and you dont have to worry about running into an endless loop of error fixing in most cases (hopefully no I see the issue now!s).

FAQ

1. Why?
   Why not?

2. Dont you think its an overkill?

   Probably. But Im doing it anyways.

3. What do you hope to achieve out of this?

   Nothing really. Just doing this for fun!

P.S.

And thats it!

Do you need a website or an app for your business?
You can reach out to me at @CharanMNX on X/Twitter or email me at charan@devsforfun.com

Here are my other socials if you wanna talk:

• Instagram: iam.charan.dev

• X/Twitter: @CharanMNX

• LinkedIn: Charan Manikanta Nalla

• GitHub: CharanMN7

• YouTube: Charan

• Website: charan.dev

Happy Coding and Vibe Coding!