Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

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

cypress, react, redux, typescript, styled-components
Jorge A. Mendoza II•720
@JorgeAMendoza
A solution to the Multi-step form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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:

  1. Data should persist between pages, meaning user's can switch back and forth between pages and see the data they had previously inputted.
  2. 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.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jorge A. Mendoza II's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub