Building a waitlist for a new project usually involves setting up a database, configuring an email service, and writing the same form boilerplate over and over again.
I wanted to simplify this process, so I built an open-source template that connects directly to Notion. Here is a quick breakdown of how it works and how you can use it for your next project.
The Stack 🛠️
Next.js (App Router): Fast, SEO-friendly, and handles our API routes seamlessly.
Framer Motion: I used this to create a really smooth layout animation. When the user hits "Join", the input collapses smoothly into a loading pill.
Notion API: Instead of setting up PostgreSQL or Firebase, I used Notion as a headless CMS/Database. Every email is saved as a new row in a Notion database.
Resend: For sending out the automated welcome emails.
How to Use It 🚀 I made the template completely open-source. You don't even need to touch the code to deploy it.
Click the "Deploy with Vercel" button on the GitHub repo.
Enter your NOTION_API_KEY and RESEND_API_KEY.
Your waitlist is live!
Check it out: 🔗 Live Demo: https://nextjs-waitlist-template-yc.vercel.app/ 💻 GitHub Repo: https://github.com/YusufCeng1z/nextjs-waitlist-template
I kept the code extremely modular. If you want to dive in, you can easily tweak the Framer Motion springs or change the design tokens in the Tailwind config.
If you find this template useful, I'd really appreciate a ⭐ on GitHub! Let me know what you think in the comments.
Top comments (0)