Submitted over 1 year ago

Multi-Step Form Built with React, React-hook-form, and Redux

Jorge A. Mendoza II•720

@JorgeAMendoza

Preview site View code

This is a solution for...Multi-step form

HTML
CSS
JS

4advanced

Design comparison

SolutionDesign

Solution retrospective

Hello! This is my solution for the multi-step-form challenge. When breaking down the project, there was two goals I wanted to achieve:

Data should persist between pages, meaning user's can switch back and forth between pages and see the data they had previously inputted.
Every form should be easily validated.

This led me to use Redux as the global store to hold the state of the entire form, while react-hook-form handled the state of each form section and provided validation. The application is thoroughly tested using Cypress and a continuous integration/deployment pipeline is created using GitHub Actions.

One thing I would like to add in the future is a simple transition between each form section.

For a full breakdown of the application development, please see the README.md in the project repository page.

Community feedback

BrunoMoleta•700
@brunomoletaPosted 7 months ago
Hi Jorge,

I got interested in your project when I read your very detailed README. That's why I forked it and sent you a PR with some things I believe you can improve

Please check the PR I sent you on Git hub:

Refactored Form Buttons, a 'buttons' component is created and stays in the UI throughout the state change. Only the functions fired when clicked shift;

Changes data-testid to id. There's no need to create a property here. We can stick with the common ones;

Created an h1 tag. Every page has to have one;

Added a hidden button at the end of each form so we can advance the step by pressing Enter on the keyboard;

Added a script to format the project using Prettier;

I would advise you to refactor the components further as in a unit testing situation, it would be hard to test them;

Best regards from Curitiba/PR - Brazil :)
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord