Multi-step Form built with Next.js, TailwindCSS and React-Hook-Form
Design comparison
Solution retrospective
My solution to the multi-step form challenge.
Using Next.js 13 for routing between steps while maintaining the form with react-hook-form in the layout.
Added TailwindCSS for easy styling.
Probably a little over-engineered but wanted to test some of Next 13's features
Community feedback
- @gerkim62Posted 6 months ago
Great solution. The UI looks almost exact. I think it would be great to have a way for the user to view his/her selection on the last step in a real world application
0 - @GelianthusPosted over 1 year ago
Looks perfect! I took a look at your code and it's how I imagine a code written by an actual developer would look like.
Not much to criticize about the front-end side, but if I were to nitpick, it would be the fact that you can still navigate through different steps even after confirming your order. I don't think a real application would let you do that.
Just wondering how long did it take you to learn NextJS?
0@waldosmutsPosted over 1 year ago@Gelianthus Thanks for that!
I'm actually full-time frontend now, so hearing that makes me feel I'm doing something right.
True enough about the backwards navigation after confirming, should be clearing the form-data once submitted at least.
Personally, Next.js took some time to fully understand as it was the first React framework I worked with. The core concepts weren't too difficult to grasp, took me a week or so, fully understanding it took a month or more, practicing on a real-world application.
I jumped on Next 13 when it was still in beta, and am loving it. Had to re-learn some parts, but the new features are amazing.
0
Please log in to post a comment
Log in with GitHubJoin 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