Fullstack AI Form Builder Tutorial with Next JS, TypeScript, Drizzle ORM, React, OpenAI, Stripe

Let's build an application that generates forms using AI!

Tech Stack:
- Next-auth - authentication
- Shadcn ui - ui library
- Open Al - AI Integration
- Drizzle - Orm
- PostgreSQL - database
- Stripe - payments
- Tanstack -Table
- Typescript - Type Checking
- Plausible - Analytics
- Vercel - Deployment
- Stripe - Payments
- Zod - Schema Validation

# Features

- Authentication ✅
- AI Form Generation ✅
- Form Publish and Submissions ✅
- View your forms ✅
- Admin Panel ✅
- View Results ✅
- Settings & Upgrade Subscription ✅
- Analytics ✅
- Landing page ✅

✉️Sign up for my newsletter:

🛤️Host your DB on Railway:

👾Join my Discord:

✍️Full-Stack Roadmap:

🧑‍🚀Deploy a custom AI agent:

🌐GitHub URL:

🐥Follow me on X:

🔥Firebase:

⚛️More on React:

☕Support the channel:

- 00:00:00 - Demo & Project Setup
- 00:06:38 - Generate a Form
- 00:29:25 - Authentication
- 00:48:28 - Connect to Database
- 01:06:40 - List All Forms
- 02:28:00 - Admin Menu Navigation & Layout
- 03:18:00 - Results Page & Table
- 03:53:51 - Landing Page
- 04:08:46 - Payments Integration
- 05:25:34 - Deployment
- 05:30:03 - Analytics
- 05:35:00 - Thank you for watching

[webdecoded]

Forgot to mention I am working on implementing Langchain with Nextjs, so more advanced AI concepts coming up, stay tuned!

[VincentFulco]

Outstanding example, learned some new things about next-auth which were escaping me.

[bnssoftware]

WOW This was absolutely amazing! Even if not using it for an actual form builder, this was a great all inclusive tutorial on setting up everything you need with nextjs. Thank you!

[Alex-bcxe]

I was very sceptical at the beginning but you know your stuff. Great job.

[uminhtetoo]

Thank you so much for sharing your experience and knowledge, Madam.

[Eng_Jaber_Said]

انا جابر مهندس برمجيات من الأردن 🇯🇴
فيديو جميل جدا استفت منه كثيرا شكر لك على مشاركه هذا الشروع المذهل معنا

[roberth]

Awesome full stack build - if possible, record in 1440p for slightly better clarity 🙂

[pallavggupta]

First time on this channel, Super good content !!

[regilearn]

Wow, please do more typescript MERN full stack projects.

[hassaantahir]

Amazing project, will start this tomorrow 🎉

1 request plzzz create a Production grade single vendor e-commerce web app(not like the current YouTube ones or the clones :)) with a beautiful gasp animated landing page to showcase main stream products.
To make it more in unique you can add a 3d Model of every product along with normal images and the main challenge will be then optimizing it.
With roles, full fledged admin panel having inventory, and other business functionalities, Beautiful UI, review system with rating and images review, Q/A of every product, order tracking system, Product recommendations, full fledged search, COD and online payment gateways 2-3, product page with detailed product descriptions with images etc and similar products.
An e-commerce app that the internet has never seen before.
:))

Thanks in advance 😃

[linc-pied]

Too Strong, hope that the blogger can out some nestjs + react project is even better

[PeriklesPeriklesoglu]

Hi judy, I completed the entire course, first of all, thank you very much. I have a question for you: can you check the stripe payment? Because I can create more than 3 forms without getting paid in the application I wrote myself. I did not have a chance to check it from the application you wrote, I think the quota was over and for this reason I could not create a new form. This is very important to me because I have been trying to complete this project for more than 20 days. I would be very happy if you could get back to me.

[SamuelNzekwe]

Drizzle seems to have changed a lot
I managed to use the documentations though

[brendanmilton]

love the tutorial! Thank you. Quick vscode hack that I love at 28.20 you copy+paste </form> below </DialogFooter>

if you hold alt + down arrow or up arrow you can move the line down or up.

I'm not great with macros but this one I use always!

Hope it helps :)

[KunalSingh-tt]

which tool you are using for these designs and planning part ?

[jasonjimenez]

So drizzle is the flavor of the month.

[SrikarMellachervu]

do we have to pay open API subscription fee based on the usage? or is it free ?

[anmol]

Does the form giving Google form like experience or better, can anyone or admin tell asap

[rotemnevgauker]

two things : 1. I Next auth is extremely buggy , even for a beta . so back to v4 / prisma / my own auth ! 2.

[AbhinavKumar-dlph]

I am getting too many requests error (error status code 429) even though I have make just one request. Why I am getting too this error ? 😢😢