/Reusable-React-Form-App

🖼️ React application which allows you to easily create reusable forms with various input fields and split them into different steps.

Primary LanguageTypeScript

Reusable React Form App 🛠️

Check out the live version on registration-form-app-one.vercel.app

This application allows you to easily create reusable forms with various input fields and split them into different steps.

Features

✏️ Easily add different input fields to your form
🚶‍♂️ Split your form into multiple steps for better organization
📤 Allow users to upload avatars or other image files 🎨 Change the theme of the application

Example: Registration Form

In the provided example, a registration form is created with two steps:

  1. Step 1: Customer adds their first name, last name, password, confirm password, and interests.
  2. Step 2: Customer uploads their avatar (image file).

Technologies Used

  • React
  • TypeScript
  • Chakra UI (for styling)
  • React Hook Form (for managing form state)
  • Zod (for form validation)
  • Cypress (for end-to-end testing)
  • Vite (for build tooling and development server)
  • Vercel (for site deployment)

How to Run the Project

To run the project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/alexpeev9/React-Registration-Form-App.git
  1. Navigate to the project directory:
cd React-Registration-Form-App
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Preview the site

Open your browser and navigate to http://localhost:5173 to view the application.

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.