Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewithalamin/multi-step-form
Multi step form with React hook form, and Redux state management.
https://github.com/codewithalamin/multi-step-form
form-validation form-validation-js form-validation-react forms frontend-mentor frontendmentor-challenge react-hook-form reactjs styled-components
Last synced: about 1 month ago
JSON representation
Multi step form with React hook form, and Redux state management.
- Host: GitHub
- URL: https://github.com/codewithalamin/multi-step-form
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-11-05T14:44:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-13T11:45:31.000Z (about 1 year ago)
- Last Synced: 2024-10-30T10:38:27.319Z (about 2 months ago)
- Topics: form-validation, form-validation-js, form-validation-react, forms, frontend-mentor, frontendmentor-challenge, react-hook-form, reactjs, styled-components
- Language: JavaScript
- Homepage: https://multi-step-form-codepapa.vercel.app
- Size: 1.24 MB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
This React project demonstrates a multi-step form. The form utilizes React Hook Form for data validation and Redux Toolkit for state management, enhancing user experience and data integrity.
## Table of contents📚
- [Key Features](#key-features)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Installation](#installation)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
- [License](#license)
## Key Features🎉
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
- See hover and focus states for all interactive elements on the page
- View the optimal layout for the interface depending on their device's screen size
## My process🛠️
### Tech Stack🏗️
- React
- React Hook Form
- Styled Components
- Vite
### What I Learned💡
- **Breaking down complex forms into manageable steps:** I learned that multi-step forms can significantly improve user engagement and reduce form abandonment by breaking down complex data collection processes into smaller, more manageable steps.
- **Implementing data validation with React Hook Form:** I gained experience in utilizing React Hook Form to effectively validate user inputs, ensuring data integrity and preventing invalid submissions.
- **Leveraging Redux Toolkit for state management:** I explored the power of Redux Toolkit for managing the form's state, facilitating consistent data handling and easy updates.
## Installation📥
- Clone this repo:
```sh
git clone https://github.com/CodeWithAlamin/Multi-Step-Form.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
- Live server:
```sh
npm run dev
```
## Author👤
Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Star this project🌟
Show your appreciation by starring this project on GitHub.🙂 Your support will motivate me to continue creating and sharing valuable open-source projects
## Acknowledgments🙏
I would like to express my gratitude to Frontend Mentor for providing the challenge and inspiration to build this project. Their platform and resources have been instrumental in my learning journey and the development of this project.
## License📜
This project is licensed under the [MIT](./LICENSE.md) License - see the LICENSE file for details.
