Skip to content
Submitted about 1 year ago

Multi-step form using React, React Router, Redux and Tailwind CSS

react, redux, redux-toolkit, tailwind-css, react-router
Mirror83•200
@Mirror83
A solution to the Multi-step form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of how close I got to the design. It was an involving design, but I think I implemented it well.

For what I would do differently, I would probably use a lighter state management library for the application. I still think that Redux and Redux Toolkit was too much for this relatively small project.

What specific areas of your project would you like help with?

I am not sure how the app would look on very large monitors since I made the width of the div containing the main section a percentage. I would like some feedback on this and whatever would be a reasonable maximum width to set.

Code

Please log in to post a comment

Log in

Community feedback

  • Cipi•220
    @CipiVlad

    Hi Mirror83, I think you did a great job here. I'm looking at your app on a 1920x1080 screen, and I would suggest

    #id=root >
max-width: 1240px;
margin: 0 auto;

    At least for me it's then very close to the original design. I'm facing issues getting pass to "next step" ... phone number validation won't let me even though I'm providing numbers. Do you face the same issue?

    Marked as helpful
  • Cipi•220
    @CipiVlad

    Hi Mirror83, the resolution looks very good on my screen :)

    As for the phone validation, it didn't work for me at first to get to step 2, until I discovered in your code that with regex ‘ value: /^+\d{1,3} \d{3} \d{3} \d{3}$/ ‘ the exact sequence as in the placeholder is required by the user. So ‘+1 234 567 890’ or ‘+2 234 567 567’ works, but it does not work without a space between the characters ‘+1234567890’. Is this intentional? If so, then this validation works perfectly.

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