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 and master cutting-edge technologies to elevate your development skills!... Google form clone
#nextjs #reactjs #tailwindcss #geminiai
📺👉 Part 2 - https://www.youtube.com/watch?v=ff4PqYWMo-c
🙌 Support my work by 🎁 gifting a "Super Thanks!" Your support helps me keep creating amazing content!"
💻 Ready to take your coding journey to the next level? By "joining" the Coder Master level Membership to unlock:
🌟 Exclusive content you won’t find anywhere else!
👀 Early access to my latest videos!
💡 Priority consideration for your tutorial requests!
🔗 Join here: https://www.youtube.com/channel/UCKF3twEFIvTQZxbY13D-udQ/join
🙏🙏 Like & Subscribe To the Channel - https://tinyurl.com/subcribe-to-techwithEmma
🐦 Follow us on Twitter: https://x.com/techwithemma
🖼️ Follow us on Instagram: https://www.instagram.com/techwithemmaofficial
⚠️ Note: This video will be available on our 🌐 website and in the 📘 upcoming eBook
💻👉 Access the course files on GitHub (Give a Star ⭐):
https://github.com/TechWithEmmaYT/Advanced-AI-Formy-Builder-Drag-n-Drop
👉Build Advanced MERN Auth: 2FA, Email Verification, Cookies, Sessions, and JWT with Node.js & Next.js:
on Youtube: https://youtu.be/2LRLsMracAY
💻👉Build AI Resume Builder with Next.js, React, Hono, Drizzle, Kinde & Postgres | PDF Download:
on Youtube: https://youtube.com/watch?v=JXJuGNAAKR4
💻👉 Build and Deploy: TWITTER Clone with Next, Auth, Prisma, Neon, Tailwind & Stripe (2024!:
on Youtube: https://www.youtube.com/watch?v=t-BhFbiDxxk&t=102s
💻👉 Tailwind CSS Full Course | Build an AI Saas Website:
on Youtube: https://www.youtube.com/watch?v=4LaRHJUZ_sc&t=68s
🗝️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/installation/next
🔗👉Gemini AI - https://aistudio.google.com/app/apikey
🔗👉TailwindCSS - https://tailwindcss.com/
🙌 Support my work: https://buymeacoffee.com/techwithemmaofficial ☕️
💻👉Like & Subscribe To the Channel
Channel: https://tinyurl.com/subcribe-to-techwithEmma
☀️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