gem-hunter

This project is an example of how to use React Hook Form and Zod to create a multi-step form.

• React
• Vite
• TypeScript
• Tailwind
• Shadcn/ui
• Vitest
• Testing Library
• React Hook Form
• Zod

Clone the project:

git clone https://github.com/alyssonbarrera/multischema-form.git

Install the dependencies:

npm install

Start the project:

npm run dev

Run the tests:

npm run test

The project is structured as follows:

• .github
  • workflows
    • run-unit-tests.yml
• public
  • og.png
  • vite.svg
• src
  • __ tests __
    • Forms
      • Button.spec.tsx
      • PaymentInformation.spec.tsx
      • PersonalInformation.spec.tsx
      • RegistrationForm.spec.tsx
      • ShippingAddress.spec.tsx
    • setupTests.ts
  • @types
    • vite-env.d.ts
    • vitest.d.ts
  • assets
    • react.svg
  • components
    • Forms
      • Button
        • Button.tsx
        • index.ts
      • PaymentInformation
        • PaymentInformation.tsx
        • index.ts
      • PersonalInformation
        • PersonalInformation.tsx
        • index.ts
      • RegistrationForm
        • RegistrationForm.tsx
        • index.ts
      • ShippingAddress
        • ShippingAddress.tsx
        • index.ts
    • ui
      • button.tsx
      • input.tsx
      • label.tsx
      • toast.tsx
      • toaster.tsx
      • use-toast.ts
  • lib
    • utils.ts
  • validations
    • paymentInformation.ts
    • personalInformation.ts
    • registrationForm.ts
    • shippingAddress.ts
  • App.tsx
  • App.css
  • index.css
  • main.tsx
  • .eslintrc.cjs
  • .gitignore
  • index.html
  • LICENSE
  • package-lock.json
  • package.json
  • postcss.config.js
  • README.md
  • tailwind.config.js
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts
  • vitest.config.ts

The project's form is composed of three steps:

• Step 1: Personal information
• Step 2: Shipping address
• Step 3: Payment information

• In step 1, enter your personal information.
• In step 2, enter your shipping address.
• In step 3, enter your payment information.

React, Vite, TypeScript, Tailwind, Shadcn/ui, Vitest, Testing Library, React Hook Form, and Zod are thanked for providing the tools necessary to create this project.

Contributions are welcome. To contribute, follow these steps:

• Fork the project.
• Create a branch with your changes.
• Commit your changes.
• Make a pull request to the main branch.