Responsive Multi-Step Form. [Vite, React, CSS]
Solution retrospective
Hello, Frontend Mentor community. This is my solution for the Multi Step Form.
- Feel free to leave any feedback and help me to improve my solution
- I had a lots of fun building this challenge, it was my first time using vite as a complier.
- I started with basic css variables to form a design system, and relied on react's context, provider architecture to handle state.
- Layout was built responsive via mobile first workflow approach.
I just joined community, and was happy to try something a bit more complex. I struggled with some responsive mobile vs desktop organization, and needed to add a javascript hook to handle conditional component rendering. I would appreciate any feedback or if you would do this through another approach!
I also launched this via github pages which was a little difficult to figure out. Currently on every commit push, the build gets compiled to a the gh-pages branch which then calls github pages standard deploy from branch workflow, which is 2 deployments on every commit. Let me know if you would do this in another way!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@AhmadYousif89
Hi Dion 👋
Your solution looks great both in mobile and desktop view, and I just have a couple of notes that I think they would be great to consider implementing in your application :
-
in the 1st step if I click on the "next step" button I get visual errors indicating that I must fill up the form which is great but then I don't get visual feedback if I did enter a valid input value (the error messages remain visible to the user) and it would be a good user experience if you remove those error messages as soon as the user provide a valid value.
-
for the top/side "navigation" elements they doesn't really serve any useful propose other than displaying/highlighting the current step (which is fine) but it would be much better experience if they actually act like navigation btns and give the user the freedom of navigating between steps freely.
-
it would be a better user experience if user can navigate and select/check with only keyboard.
-
consider making the change btn on the last step to actually change the billing cycle and not just navigating the user to step 2 as this is the correct behavior for that btn.
regarding your questions :
-
( "I struggled with some responsive mobile vs desktop organization, and needed to add a Javascript hook to handle conditional component rendering" ) I don't know what you're trying to do here but in general you don't really need a special hook to render components conditionally based on the view port because you can do that easily with Css and media queries, but if you really need a hook that checks for the view ports you can build your own custom hook or use a package from npm called "use-mobile-detect-hook".
-
for deployment I don't really use github for that because there are much better alternatives like vercel or netlify and of course you do auto detect and deploy your code on changes, and I personally like vercel over any other platform.
I hope that was helpful for you
Keep Coding 👊
Marked as helpful -
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