Responsive Multi-Step Form With TypeScript, React, Framer and Zustand.
Design comparison
Solution retrospective
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
Community feedback
- @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: pointerfor 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
labelelement so that the user can click on the area and the addon is selected. ACursor: pointeron the entire area wouldn't hurt either. If this isn't done, users will have to hunt for pixels. :DGood job and best of luck!
0 - @SvitlanaSuslenkovaPosted 28 days ago
Nice work! I'm not a pro too, but you can add pointer for step4 "change", and I'm not sure about it, but: circle steps can become buttons - easy to jump to needed step.
0@dylan-dot-cPosted 28 days ago@SvitlanaSuslenkova I was thinking about making the circle steps buttons, i even had that feature in development so I could quickly move through steps. I also just realized that for "change" I made them go back to step 2 instead of automatically doing it for them.
I would say you are a pro. Thanks for the feedback.
0@SvitlanaSuslenkovaPosted 28 days ago@dylan-dot-c funny, thanks. Now I'm a beginner-pro))
0 - @AtatraPosted 4 months ago
I really love how it turned out!
0@dylan-dot-cPosted 4 months ago@Atatra thanks! This was fun to work on back then.
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