DEV Community: Charan

How to create a simple waitlist form in Next.js using Supabase to collect responses

Charan — Sun, 13 Jul 2025 10:40:35 +0000

Prerequisites

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 don’t want to install Shadcn UI

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

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);

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() });
}

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 you’re not using or haven’t installed the sonner package.

Test, Deploy, and Launch!

Result

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

Here’s the result upon submitting the form:

Note:

If you’re using Shadcn UI components, you should see a similar result in the UI.

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

Here’s 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 post’s 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.

Here’s the link: How to rate limit your Next.js APIs using Upstash?

P.S.

And… that’s 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!

How to rate limit your Next.js APIs using Upstash

Charan — Sun, 13 Jul 2025 10:32:11 +0000

Why Rate Limit your APIs?

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.

Here’s how to rate limit a Next.js API using Upstash

Setup Upstash database on the Upstash console. Once you’ve signed up or logged in, you should see this screen:
Click on “Create database“ and fill in the details like below, choose the free plan for now, and create your database:
You should’ve been redirected to your database’s screen (it’s a Redis database, by the way).
Hover over your endpoint to see the following copy buttons:
Put the following environment variables in the .env.local:
- Copy the “HTTPS” button’s content into the UPSTASH_REDIS_REST_URL environment variable.
- Copy the “TOKEN” button’s 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
```
Install Upstash dependencies: npm install @upstash/ratelimit @upstash/redis in your Next.js project.

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(' ', '')}`,
  });
}

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
  // ...
 }

Test, Deploy, and Launch!

Here’s 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. I’ve 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 doesn’t already exist:“

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

P.S.

And… that’s 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!

Welcome to My Collection of Web Notes

Charan — Sun, 13 Jul 2025 10:25:36 +0000

Introduction

Hi! I’m Charan. I’m 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, I’d 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 don’t know. I just thought it’d 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 I’m 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 I’ll 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! You’ll find the signup part at the end of this post.

Bonus

If you read this far, here’s a tip. If you’re 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 don’t have to worry about running into an endless loop of error fixing in most cases (hopefully no “I see the issue now!”s).

FAQ

Why?

Why not?
Don’t you think it’s an overkill?

Probably. But I’m doing it anyways.
What do you hope to achieve out of this?

Nothing really. Just doing this for fun!

P.S.

And… that’s 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!

Story of an open source newbie + lessons learnt

Charan — Sun, 03 Nov 2024 21:15:19 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Kudos to hackers around the world that participated in Hacktoberfest! You've made the code universe a better place with your contribution!

Introduction

I'm Charan, an open-source newbie (college student + software engineer intern at a startup) and this story is about how I navigated the world of open source software during Hacktoberfest 2024, and learnt a ton of things that I wish I'd learnt, a lot earlier.

tldr;

Started contributing to one of my dusty old repos that served as a cool community website. (devsforfun.com)
Created a cool little form for an entrepreneurship related community event at my college along with another community member. (repo)
Helped one of my friends to make his first Hacktoberfest PR.
(Kind of) Figured out a few things about contributing to popular open source repos and came up with a plan for what I'll do next to improve as an open source contributor.

p.s.: If you only want to learn about what I've learnt about open source contributions, scroll down to Chapter 4 below 👇.

Chapter 1: How I Started With Hacktoberfest

I've been a passive observer of the open source world for quite a while now. This year, I said to myself that I'd become an active contributor. But, my efforts to start serious open source contribution were hindered by a series of weird choices and commitments. It took me until October to clear them all out of my way and with Hacktoberfest coming around in the same month, I had a good feeling about this.

For the first half of Hacktoberfest, I was busy dealing with some college work, and some passive development of a Next.js web app for a friend. By October 15, I had practiced enough Next.js and Tailwind CSS, along with shadcn.

Then I started looking at projects like shadcn and bunch of other popular repos. I was immediately overwhelmed and I didn't really know how I should start contributing to these amazing (+ scary) repos.

I wanted to contribute to popular open source projects because they're challenging, would make me to learn new and useful tech (no, I didn't simply want them to be Next.js projects), and would add real credibility to my contributor profile that I can show-off to a future employer or when applying to the Google Summer of Code, next year. I didn't really understand the issues on these popular repositories at first glance (many, not even after multiple glances), and I felt like I needed to learn a lot of other things before I stepped in here.

But instead of giving up for good, I thought I'd start much simpler, working on projects that I understand very well. That's when I decided to revive a dusty old project of mine.

Chapter 2: Contributing To A Dusty Old Repo

Short backstory about the repo: It was for a website that I used for a 3-week long learn-to-code challenge. It had all the curriculum details, and a hall of fame page that proudly displayed the winners who successfully finished the challenge. You can visit it here: devsforfun.com/s1 (You'd be viewing the revamped version of the website now)

I have had plans to revive that program with different plans this time and I wanted to properly republish that site for a while but I never did it. So, that became my project for Hacktoberfest.

Here's what my PRs were about:

PR #1:

Ported the project from React to NextJS
Created a waitlist form (frontend + an API to send the data to my google form)
Rewrote all the styles using Shadcn and TailwindCSS.
Revamped the /s1 homepage with new images and improved responsiveness.

PR #2:

Moved the finishers data into a SQL table I'm supabase.
Setup Supabase client and wrote an API to get the finishers data from Supabase.
Wrote the hall of fame page with a brand new look.

Here's what I learnt:

Learnt how to use Supabase.
Learnt how to author APIs to protect sensitive environment variables or data from getting exposed on the client side.
Learnt how to properly use tailwind classes, conditionally.
I could bring in a friend to help me finish this website!

And that's when I bought in one of my friends, Jitendra, to help me with porting the curriculum page from the React project to the Next.js project. He was new to Next.js and Tailwind CSS. So, I helped him a tiny adjustments and advice, as he wrote the code for that page. He did great job with it without much (almost none) of my involvement. That's when I felt like, "now, that must the spirit of open source."

Chapter 3: Yet Another Project

In the meantime, another project crashed in. I'm part of the organizing team of an entrepreneurship club at my college. There's going to be this important workshop that we'll be hosting. It required people to pay for registration. So, I proposed an idea of creating a custom form to handle all of that.

Soon after starting to work on it, my team found that we had absolutely no payment gateway API that is available, which doesn't require us to have a registered business entity. So a custom form really didn't make sense but we decided to do it anyway. Everyone was like, "custom form over Google form any day!"

Here's what my PRs were about:

PR #3:

Wrote a registration form using react-hook-form, zod, and shadcn Form, that was accessible and had enough client-side validation.

PR #4:

Wrote an API to get the data and send to the Google form so that the data can be comfortably viewed in a spreadsheet.

Here's what I learnt:

Learnt how to use react-hook-form, zod, and shadcn components to build accessible forms, faster.

Once, I've built the fully-functional form, another organizer of my community made his first 2 Hacktoberfest PRs to the same project by adding more aesthetics and information to the form, and a confirmation page redirect.

And that's how my 4-PR quest went for the Hacktoberfest 2024.

Chapter 4: Realization And Next Steps (for me)

After I finished submitting 4 PRs, I went back to looking at the popular repos and this time, I wasn't intimidated by looking at all the issues. Nor was I able to magically start understanding them but, I could recognize the fact that I was not able to understand those issues because I haven't used the product myself. If I'd used them, I would have the relevant vocabulary in my head, and I will have faced some of those issues. And because I understand tech, I would've been able to contribute to the project like I'd imagined.

As a beginner, I somehow thought open source contributions were random bounties people would be able to collect simply, if they have worked with the relevant tech stack for long enough. Now, I realized that there's a "solving real problems that people face" aspect to "contributing".

So, I figured that the best next step would be to start using an open source project for my work, get acquainted to the product first, then look at the issues, and plan how to learn and contribute to the project. And I also found that I can find good open source projects through open source software hackathons like here on the DEV platform, to rapidly try popular and/or new open source projects and potentially find ways to contribute to those.

Do share your thoughts/feedback/suggestions/questions on this story, in the comments below 👇.

I'd really love to hear from you all!

And, how has your Hacktoberfest been? I'd love to hear (or read 😄) your story too!

Keep coding y'all!