Multi step form, react and tailwind with localstorage
Design comparison
Solution retrospective
Here is my solution to the multi step form. It was a lot of fun to do and I learned alot!
The routing seems very unnecessary and I will try to remove it completly, unless there is someone who can tell me I should keep it?
The usecontext providers wrapping the app content seems also ugly, and im thinking of a way to make it prettier...any ideas?
Community feedback
- @Wildereduardoleon85Posted almost 2 years ago
Hello Villo, in my solution I also used the conetx too but since it is a small project I did not see the need to make independent contexts, but rather a single context that encloses the entire App, this greatly simplifies the neumber of providers in the main App, and the same looks more cleaner, on the other hand i think you should take a look at some design details, for example: in the sidebar, the circle step and the step description are not centered, the color of the text "YOUR INFO", "SELECT PLAN"... Is not the same, there is a spelling error in "SUMMARY", you wrote "SUMMERY". But in general it looks great, i think this is a challenge very difucult, the most challenging part for me was the form validations. I almost forgot, i think the route is not necessary, for me this is a single page.
Marked as helpful0@VilloKodeHodePosted almost 2 years ago@Wildereduardoleon85
I tried making all providers into a component, but it seemed to be unnecessary complicated. Ill check out your code to see if there is a simpler way. I checked for the color difference you mentioned, but I cannot see it. I have everything is components, so I dont understand why they would be different. Maybe tailwind fucks up?
I will remove the routing as it is not needed.
Thanks for the feedback!
0 - @PavelAratinPosted almost 2 years ago
Hi, I understand that you used react for this challenge, this is a great solution. In my version, I used REACT+REDUX . And I also wanted to use routing, because I thought that different forms are different pages, but this is not so, these forms refer to the same page in meaning. I have made four forms that submit the entered data to the REDUX global store. Look at my solution and you will understand.
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