Skip to content

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

Notifications You must be signed in to change notification settings

alexpeev9/Reusable-React-Form-App

Repository files navigation

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.

About

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

Topics

Resources

Stars

Watchers

Forks