Build AI Form Builder Drag and Drop with Next.js, React, GeminiAI, Prisma, Neon Postgre, Kinde 1/2
In this tutorial, you will build a production-ready, Advanced AI-powered drag-and-drop form Builder using Google Form Clone, Next.js, Server action, TypeScript, React, Prisma, Neon PostgreSQL, TailwindCSS, and Gemini AI. This project features seamless authentication with Kinde, intelligent form/question generation, and dynamic block editing for a fully customizable experience. Learn how to easily create, save, publish, and share forms while collecting and analyzing user responses. Deploy effortlessly on Vercel ...
(🙌 Support my work): https://buymeacoffee.com/techwithemma... ☕️
📺👉 Part 2 - • Build AI Form Builder Drag and Drop with N...
🙏🙏 Like & Subscribe To the Channel - https://tinyurl.com/subcribe-to-techw...
🐦 Follow us on Twitter: https://x.com/techwithemma
🖼️ Follow us on Instagram: / techwithemmaofficial
💻👉 Access the course files on GitHub (Give a Star ⭐):
https://github.com/TechWithEmmaYT/Adv...
👉Build Advanced MERN Auth: 2FA, Email Verification, Cookies, Sessions, and JWT with Node.js & Next.js:
on Youtube: • Build Advanced MERN Auth with Nodejs, 2FA,...
💻👉Build AI Resume Builder with Next.js, React, Hono, Drizzle, Kinde & Postgres | PDF Download:
on Youtube: • Build AI Resume Builder with Next.js, Reac...
🗝️Key Features: 👇
🔐 Authentication with Kinde
➕ Create Forms
🧠 Smart AI-Powered Form/Question Generation
✏️ Edit Block Properties
💾 Save & Publish Forms
🔗 Share Form Links
📊 User Response Collection
🌐 Built with Next.js 14
🎨 Styled with TailwindCSS and Shadcn UI
🚀 Seamless Integration with Server Actions
💾 Neon PostgreSQL & Prisma ORM
📤 Deployed on Vercel
📚 Chapters 👇
00:00 Intro
00:37 Project Demo
02:23 Project Setup & Structure
21:52 Authentication & Header
01:02:14 Prisma Orm & Neon PostgreSql
01:20:58 Form Stats UI & Server action
01:42:30 Create Form UI & Server action
02:05:07 All Form UI & Server action
02:28:50 Form Builder Page Layout
03:27:30 FormById API & Builder Context Provider
03:57:29 Row Layout Block (DndContext )
04:57:23 Builder Canvas Component (useDroppable)
05:26:28 Row Layout Block Canvas Component
07:09:34 RadioSelect Field Block
09:08:23 Preview Form
09:36:20 TextInput Field Block
09:49:13 TextArea Field Block
09:56:41 StarRating Field Block
10:07:28 Heading Block & Paragraph Block
10:23:56 AI Assistance Integration (Gemini AI)
11:09:24 Save Form
11:31:42 Publish Form
11:44:12 Share Form
11:51:22 Form Responses
🗃️Resources 👇
🔗👉NextJS - https://nextjs.org/
🔗👉Neon PostgreSQL -https://neon.tech/
🔗👉Prisma -https://www.prisma.io/
🔗👉Shadcn UI - https://ui.shadcn.com/docs/installati...
🔗👉Gemini AI - https://aistudio.google.com/app/apikey
🔗👉TailwindCSS - https://tailwindcss.com/
🙌 Support my work: https://buymeacoffee.com/techwithemma... ☕️
💻👉Like & Subscribe To the Channel
Channel: https://tinyurl.com/subcribe-to-techw...
☀️Full stack Form builder, React, Neon PostgreSQL, Prisma, Dnd Kit, Tailwind CSS, Typescript
☀️AI Google Forms Clone: Build with Next.js 15, Prisma, NeonPostgreSQL, Kinde & TailwindCSS | Ultimate Guide