Skip to content
Submitted over 1 year ago

⚡ Multi-Step Form in React + State Management with ContextAPI ⚡

visualdennis•8,375
@visualdenniss
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Multi-step form
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

This challenge was a nice project to practice state management of the whole app with Context API, storing all the data at the top level and retrieving it from grandchildren without prop drilling. Initial data is rendered dynamically from data.js

Step transitions are smooth with subtle fade-in animations. Clicking on plans or add-ons also produce some little ripple effect 🔥

Note: This was built some while ago, so with my current knowledge, i'm aware that the code needs some changes regarding best practices and some more improvements in terms of semantic HTML etc. Also the form validation is basic. (not checking for @ etc., type number for phone etc.)

Community feedback

  • Héctor M. Tamayo G.•140
    @hector-kuentroPosted over 1 year ago

    Hi visualdenniss, I liked the ripple animation in buttons and the fade transitions between sections.

    You could use the onBlur property on inputs to show an error message if the user didn't provide any value to that input; and also maybe use a regex to validate the email address.

    Otherwise, it's a great solution!

    Marked as helpful
    1
    visualdennis•8,375
    @visualdennissPosted over 1 year ago

    @hector-kuentro Hello Hector,

    thanks a lot for your feedback! I've used regex and email validation on my latest submission but not on this one. Thanks for pointing it out.

    Thats a good idea, i've never used onBlur before, so i might try. At the moment, i'm learning react-hook-form, so maybe it includes that feature as well, otherwise i'll use onBlur.

    0
  • Catalin Banici•260
    @CatalinBaniciPosted over 1 year ago

    Nice! With Context API seems legit! I also done this challenge and I was prop drilling the heck out of it. It was a mess 😅

    1
    visualdennis•8,375
    @visualdennissPosted over 1 year ago

    @CatalinBanici Yea Context API makes life much easier :) Good luck!

    0
  • Marvellous Obatale•520
    @MARVELGARRPosted over 1 year ago

    bro... i need help on my skills ..i did this using vanilla js and it was hard yours is great

    1
    visualdennis•8,375
    @visualdennissPosted over 1 year ago

    @MARVELGARR Thank you very much! Yea in vanilla JS state management can get messy. Just keep practicing, practice practice practice!

    0
    Marvellous Obatale•520
    @MARVELGARRPosted over 1 year ago

    I have already switch to react and I would be using it to solve this problem @visualdenniss

    1

Please log in to post a comment

Log in with GitHub

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