Full stack WebPageForm builder, NextJs, Typescript ( React ), Dnd-Kit, PostgreSQL, Prisma

Links

Youtube video
Github repo
Live demo

In this 4 hour tutorial we are going to build this full stack PageForm application.

We are going to build this with:

• Nextjs 13 with AppRouter
• Dnd-kit library
• ServerActions
• Typescript
• Tailwindcss / Shadcn UI
• Vercel PostgreSQL
• Prisma as ORM

Features:

• Responsive
• Create forms with a stunning drag and drop designer
• Layout fields: Title, SubTitle, Spacer, Separator, Paragraph
• Form fields: Text, Number, Select, Date, Checkbox, Textarea
• Is easy to add and customize new fields
• Form preview dialog
• Share form url
• Form submission/validation
• Form stats: visits and submissions