/dnd

Full stack DragAndDrop Page form builder with Nextjs, Typescript ( React ), Dnd-Kit, Prisma, Postgresql (Vercel)

Primary LanguageTypeScript

pageform_thumbnail

Discord server for problems/help

Youtube video

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