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: / discord
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
On this page of the site you can watch the video online NextJs course: Full stack Form builder, React, Typescript , Dnd-Kit, PostgreSQL, Prisma, Tailwind with a duration of hours minute second in good quality, which was uploaded by the user Kliton Bare 02 October 2023, share the link with friends and acquaintances, this video has already been watched 211,741 times on youtube and it was liked by 6.7 thousand viewers. Enjoy your viewing!
