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:
- Step 1: Customer adds their first name, last name, password, confirm password, and interests.
- 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:
- Clone the repository:
git clone https://github.com/alexpeev9/React-Registration-Form-App.git
- Navigate to the project directory:
cd React-Registration-Form-App
- Install dependencies:
npm install
- Start the development server:
npm run dev
- 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.