The Multistep Form is a user-friendly web application developed using React.js, Redux Toolkit, and Tailwind CSS. It's designed for ensuring a seamless experience for users as they navigate through the form.
- Progress Bar for improving UX.
- Step by step proceeding with the form.
- Clean UI.
- Responsive design.
- Images are lazy loaded for better performance.
- Loader for providing a better UX.
- Powered by Redux Toolkit for handling state management through storing form data.
Follow these steps to set up this app on your local machine:
- Node.js installed on your machine (version 12 or higher)
- npm package manager
git clone https://github.com/mmj030703/Multistep-Form.git
cd Multistep-Form
Using npm:
npm install
Or, if you prefer using Yarn:
yarn install
Using npm:
npm run dev
Using Yarn:
yarn dev
Using npm:
npm run build
Using Yarn:
yarn build
When you open the application, you'll see a user-friendly interface designed to guide you through a multi-step process.
At the top of the screen, there's a progress bar indicating your current progress through the steps.
Below the progress bar, you'll find a set of options presented to you. These options represent different choices or actions you can take. Simply click on the option that best fits your needs.
Once you've selected an option, a "Continue" button will become active. Clicking on this button will allow you to proceed to the next step of the process.
If you need to go back to a previous step, there's a convenient button located to the left of the progress bar. Clicking on this button will take you back one step.
With the combination of the progress bar, options selection, and navigation buttons, you can seamlessly move through the steps of the process, ensuring a smooth and intuitive user experience.
- React
- React DOM
- React Redux
- Redux Toolkit
- Tailwind CSS
- Redux Toolkit
- Font Awesome
- React lazy load image component
This project is licensed under the MIT License.