NextJs course: Full stack Form builder, React, Typescript , Dnd-Kit, PostgreSQL, Prisma, Tailwind

Live demo: https://pageform.kliton.dev
Source Code ( for patreon sponsors โญ๏ธ): https://dub.sh/DgrCojh
Discord server for problems/help: https://discord.gg/Gc3ShuJrYE
Donations: https://ko-fi.com/codewithkliton

๐Ÿ’ผ Business Inquiries: work@klitonbare.com

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

Timestamps

00:00:00 Intro
00:00:57 Base setup
00:14:58 Prisma setup with Vercel PostgreSQL
00:20:07 Stats Cards / Prisma client
00:34:35 CrateForm
00:51:27 Form card viewer
01:01:22 Form builder
01:34:25 DesignerContext
02:05:54 Dnd sensors
02:08:20 Properties Form
02:27:23 Designer drag and drop
02:38:08 Form preview dialog
02:42:28 Save and publish form
02:59:23 Form details page
03:09:14 Form submit page
03:15:55 Form submit / validation logic
03:34:30 Submission table (pt 1)
03:42:36 Adding layout elements
03:57:42 NumberField and TextareaField
04:02:32 Date field
04:07:19 Select field
04:16:24 Checkbox field
04:23:30 Submission table (pt.2) and general test
04:25:42 Deploy on Vercel.com