PageForm

basado en el video de Youtube de CodeWithKilton

En este proyecto se implementa un formulario de arrastrar y soltar con Nextjs 14 y Dnd-kit. El formulario se puede compartir y se puede ver un resumen de las visitas y envíos.:

• Nextjs 14 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

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Start docker

docker-compose up -d

Config Prisma

npx prisma generate

Start prisma studio

npx prisma studio

Start prisma migrate

npx prisma migrate dev --name init

Start prisma seed

npx prisma db seed

Start prisma reset

npx prisma db reset