multi-step-form using CSS flexbox with good state management

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted about 18 hours ago

  Not a bad solution but there are a lot of places where you can improve on.

  Component structure. In react you can make reusable components and can make them small or large as possible. The way you implemented the project using 2 components, DestopDesign and MobileDesign is really not a good practice for if someone like me wants to contribute to your project say add a new step, it should be easy and I should have to play with so much code.

  I normally try not to put too much code in a single component as to not let it get bloated and over complex which will make it almost impossible to refactor in the future.

  So just try and break up the components into smaller pieces. Maybe have a component for each step, have one for each option and that way if I want to change/update a step I can do it easily.

  Also... You probably didn't want to pass props and use complex state management so you just did it all in one file, in a real world application you may not want to do this for the reasons mentioned earlier. You can use ContextAPI or another state management like Zustand(which I used)

  There is a lot more, but if you are planning to commit to react I suggest you start out with the smaller challenges(I suggest the time tracking dashboard) that you can break up into smaller components and work with state from a simpler to a higher level.

  I also completed this challenge in react and although I'm no expert I suggest that you take a look to see how my components are structured and the state management I used.

  So all the best and try to follow DRY principles when building out these complex challenges.

  0