For now the URL routing doesn't matter. Create a new folder inside app named "page1" and create page.tsx inside it. Create "export default function Page1()" that returns the contents of the page.
It would be simple if we could use ./components/shadcn-ui/field and @tanstack/react-form following the Shadcn Tanstack Form docs. But I would like to have users enter one pair of Entity Type and Definition boxes, then press "+" to create a new box for the next entity type, allowing unlimited entity types. Also be able to delete an entity type by pressing trash icon in top right of the entity box.
Try to use shadcn components (Shadcn docs) as much as possible, then defer to components from other libraries that are in the shadcn registry, then defer to other libraries, then defer to creating custom components.
Create a page for users to enter the following global info for a project/use-case:
Document Type (text) - somewhat short name of the type of documents -- restrict to 10 words max using Zod
Document Type Description (text) - clear, extended description of what documents are inputs to this project, what they talk about, their purpose, their source, etc. - write a short description of this field to guide the user to make it better - of course, the backend will have an LLM edit and refine each of their responses, but the more info provided, the easier it is for the backend to create great prompt and cached context to send to the LLM
Language (boolean) - write "English Only", use a checkbox, refer to the Shadcn Tanstack Form docs), default Checked/true
Mandatory for each entity type box:
Entity Type (text) - name of the variable
Definition (text) - clear, extended description of the variable
Unique (boolean) - whether each doc can have at most one of this entity type, default true
Required (boolean) - whether a doc can have zero of this entity type, default true
maybe these two booleans are shadcn Checkbox (refer to the Shadcn Tanstack Form docs)
Optional for each entity box:
Common Formats (shadcn): Email, Date, URL, Phone Number, Address, Dollar Amount, Number, Alphanumeric -- any others you or chatgpt think of
maybe accomplished by shadcn Select (refer to the Shadcn Tanstack Form docs)
Required length (int) - if the entity type is restricted to an exact number of characters
Custom Format Description (text) - user described format requirements like "ID must start with E and be followed by 8 numbers" or "Date must be MM-DD-YYYY format" or "only letters, numbers, or hyphens" - the backend will convert this to regex by prompting an LLM
For each entity type. Allow unlimited entity types. Do not allow two entity types with the same name.
Make sure to use Zod validation to ensure the user inputs are the write datatype (text vs. number)
Maybe start with using Shadcn Tanstack Form only and then try to add "entity boxes"? Ooh maybe they can be accomplished by the "Array Fields" section of Shadcn Tanstack Form docs
**to view your page go to localhost:3000/page1 instead of localhost:3000. no need to add navigation yet. ensure there's a submit button though.
Bonus: try using Tanstack Query to send submissions to a local (on your computer's ports) PostgreSQL db (instead of MySQL). Make sure to define the schema of the db in Typescript. Don't interact with the db outside of TS.
For now the URL routing doesn't matter. Create a new folder inside app named "page1" and create page.tsx inside it. Create "export default function Page1()" that returns the contents of the page.
It would be simple if we could use ./components/shadcn-ui/field and @tanstack/react-form following the Shadcn Tanstack Form docs. But I would like to have users enter one pair of Entity Type and Definition boxes, then press "+" to create a new box for the next entity type, allowing unlimited entity types. Also be able to delete an entity type by pressing trash icon in top right of the entity box.
Try to use shadcn components (Shadcn docs) as much as possible, then defer to components from other libraries that are in the shadcn registry, then defer to other libraries, then defer to creating custom components.
Create a page for users to enter the following global info for a project/use-case:
Document Type (text) - somewhat short name of the type of documents -- restrict to 10 words max using Zod
Document Type Description (text) - clear, extended description of what documents are inputs to this project, what they talk about, their purpose, their source, etc. - write a short description of this field to guide the user to make it better - of course, the backend will have an LLM edit and refine each of their responses, but the more info provided, the easier it is for the backend to create great prompt and cached context to send to the LLM
Language (boolean) - write "English Only", use a checkbox, refer to the Shadcn Tanstack Form docs), default Checked/true
Mandatory for each entity type box:
Entity Type (text) - name of the variable
Definition (text) - clear, extended description of the variable
Unique (boolean) - whether each doc can have at most one of this entity type, default true
Required (boolean) - whether a doc can have zero of this entity type, default true
maybe these two booleans are shadcn Checkbox (refer to the Shadcn Tanstack Form docs)
Optional for each entity box:
Common Formats (shadcn): Email, Date, URL, Phone Number, Address, Dollar Amount, Number, Alphanumeric -- any others you or chatgpt think of
maybe accomplished by shadcn Select (refer to the Shadcn Tanstack Form docs)
Required length (int) - if the entity type is restricted to an exact number of characters
Custom Format Description (text) - user described format requirements like "ID must start with E and be followed by 8 numbers" or "Date must be MM-DD-YYYY format" or "only letters, numbers, or hyphens" - the backend will convert this to regex by prompting an LLM
For each entity type. Allow unlimited entity types. Do not allow two entity types with the same name.
Make sure to use Zod validation to ensure the user inputs are the write datatype (text vs. number)
Maybe start with using Shadcn Tanstack Form only and then try to add "entity boxes"? Ooh maybe they can be accomplished by the "Array Fields" section of Shadcn Tanstack Form docs
**to view your page go to localhost:3000/page1 instead of localhost:3000. no need to add navigation yet. ensure there's a submit button though.
Bonus: try using Tanstack Query to send submissions to a local (on your computer's ports) PostgreSQL db (instead of MySQL). Make sure to define the schema of the db in Typescript. Don't interact with the db outside of TS.