alexpeev9 / reusable-react-form-app

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

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

2. Navigate to the project directory:

cd React-Registration-Form-App

3. Install dependencies:

npm install

5. Start the development server:

npm run dev

6. 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.