Skip to content

michaelhefner/example-dynamic-form

Repository files navigation

Example Dynamic Form Implementation

A Next.js application.

Packages Use

  1. Prisma ORM and Drivers
  2. Zod
  3. SQLite for initial implementation
  4. Tailwind for quick style implementations
  5. React-hook-form for form templating and handling

SQLite

Using SQLite for quick implementation, external resources will be preferred later.

Prisma ORM

Quick implementation, Schema safe operations, safe layer between application - driver - database.

Zod

Greate for templating forms and validation.

Getting Started

Change local.env to .env

Run:

npm run init-project

Prisma Config Packages & Bash

npx create-next-app@latest
npm install typescript tsx @types/node --save-dev
npx tsc --init
npm install prisma @types/node @types/better-sqlite3 -D
npm install @prisma/client @prisma/adapter-better-sqlite3 dotenv
npx prisma init --datasource-provider sqlite --output ../generated/prisma
npx prisma generate
npx prisma migrate dev --name init

Prioritized

Priorited base setup in each phase of the application.

Prisma, Zod, Forms

Base Schema is set in Prisma. Types have been set in the library. Zod has been configured and connected the form in the DynamicForm component.

I created a database seed to show implementation of different form templates that can be called by name.

Basic UI has been created for typical fields such as text, email, number, checkbox, select. Along with form validation.

Left Out

Form Step Integration

This would definitely be a useful feature but was deprioritized.

Form Submission Complexity

This would reqiure more descussion around submission usage and integration into current or future systems. Current implementation is simply a JSON insert into the database FormSubmissions table.

Postgres Integration

Ideally this would connect remote to Postgres

What's Next

Template Requesting

Ideally we would have a machine name here instead of requesting based on it's name, this would most certainly be my next change.

Postgres Integration

Ideally this would connect remote to Postgres

Documentation

Further documentation would be benificial

e2e Testing

I would typically prioritize this very high, but set aside for the interest of time.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors