All comments

• 

  Dylan Heslop•1,570

  @dylan-dot-cSubmitted 8 months ago

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

  This is my first time officially using both Zustand and Framer Motion so I would like so insights to how I handled the global state and how can I make it better.

  What challenges did you encounter, and how did you overcome them?

  Global State Management and Form Validations.

  I solved the state problem with Zustand since it was fun and easy to use.

  For form validations I was thinking about React Hook form but didnt want to add more complexity.

  Another problem I had was validating the form before moving onto the next step. The form wasnt like the normal forms where you have a submit button to check, so I did an interceptor function(Thats what I call it but basically a wrapper) around the increment function so that before it moves on to the next step it validates the form and only when its correct it will go on to the next one.

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

  Global State Management and better structure of files and components

  

  Responsive Multi-Step Form With TypeScript, React, Framer and Zustand.

  3

  60
  

  ErazorWhite•80

  @ErazorWhitePosted 16 days ago

  Congrats on completing this challenge :) I loved your page-turning animations, they make your form much more alive and it's great.

  For a text input with a phone number, I would add a mask to make the text match the format of a phone number.

  I also noticed that by default you already have the "Arcade" plan selected as soon as the user goes to the second page. I don't know if this is the right solution, maybe you should make it so that the user has to explicitly click on one of the three items.

  You might also want to add layout breakpoints when the viewport narrows. If you turn on developer mode in the browser and start narrowing the viewport, at some point part of your form will become invisible. Alternatively, you can wrap the form in a container with padding properties, and center the contents of the container.

  Although it's not at the Figma layout, I like how you added the phrase "No addons selected" to the Summary page. If you don't mind, I will borrow this behavior in my solution to this challenge.

  I would add cusor: pointer for the "Change" button on the Summary page for interactivity.

  Also on the addon selections page, I would make the entire area inside the frame a label element so that the user can click on the area and the addon is selected. A Cursor: pointer on the entire area wouldn't hurt either. If this isn't done, users will have to hunt for pixels. :D

  Good job and best of luck!

  0