Stateful and Accessible Multi Step Form with complete Type Safety

Community feedback

• 

  Jo89 😈•380

  @AhmadYousif89Posted almost 2 years ago

  Hi there 👋

  First of all congrats on completing this advance challenge. I think this is one of the challenges that looks easy to complete but difficult to get right, and these are just some issues I have noticed while reviewing your project :

  Logical issues

  • user can just simply submit the form without filling out the form in the 1st step even though you have implemented the validation logic for it 🤔
  • the validation is a bit weak especially on the email and phone inputs
  • user can get back to the previous steps after submitting the application which doesn't make a lot of sense, I would rather disable all the step btns and force the user to reload or better add a reset state btn on the last step 😉
  • user can add the same add-on multiple times (which contribute to the 1st issue even more 😐) where as the correct behavior is to just add it once the add-on is selected and remove it from the list once it's not selected, I noticed that this issue happens only when I focus on the checkbox it's self and pressing enter (not clicking) apparently it dispatch the action multiple times!

  Css issues

  • you have a major issue in the mobile view regarding the wrapper div with class "center" not fully covering those elements inside of it (overflow 😐)
  • instead of adding a role="main" attribute to the div use a section element because you already have a main element on the html and can't have two of them (a real one and a div acting like main)
  • when tabbing on the add-ons either let the focus be on the add-on it's self or the checkbox not both

  General considerations

  • I don't know why you chose to add redux to the project (I'm guessing you just practicing with it) but I just think it's an over kill for such a small project like this one 🤷‍♂️
  • you don't really need the router for this challenge 🙄

  there are many things we could talk about on this project but I think this's enough for me 😅 and I hope you find my feedback helpful for you

  You have a nice day 👋

  0

  ---

  

  Surya Teja Reddy•220

  @surya-teja-222Posted almost 2 years ago

  @AhmadYousif89 Thanks for the long and interesting feedback,

  • I really didn't notice how the checkbox is misbehaving, thanks for letting me know, I will fix it and make the checkbox un-tabbable as it doesn't make any sense.
  • Also, I used redux instead of context just to see how things work with redux , as I mentioned this is my first time using redux and wanted to know its functionality while building a small project.
  • And, react router is obviously included to let a user continue where he left off. It is not required but I added it for simplicity😁)

  0

  

  Jo89 😈•380

  @AhmadYousif89Posted almost 2 years ago

  @surya-teja-222

  _ about the router

  • I get what you mean but I think you just added an unnecessary complexity to the app because you already have the state globally which means the data is available on each step so the user should be able to go back and forth without any issue or loss of data.

  • so the user doesn't have to go to another page just to see the next step and that doesn't really help either with saving the state 🤔 because if the user decided to refresh the page he will lose the state anyway (unless it's saved in a db or ls but again it's not related to the router it's self).

  • I just noticed that I can't just go to specific page directly on the url which defeats the porpoise of using the router in first place (I think it's a vercel issue tho).

  0

  

  Surya Teja Reddy•220

  @surya-teja-222Posted almost 2 years ago

  @AhmadYousif89 Yeah, I guess the issue is with vercel , because it runs really great on local. Maybe I missed something.

  0

  

  Jo89 😈•380

  @AhmadYousif89Posted almost 2 years ago

  @surya-teja-222

  you can fix this issue by telling vercel to rewriting all the resources to the index.html file

  you can do that from the vercel dashboard or you just add a vercel.json to the root directory of your project and insert these lines of code in it

  {
    "rewrites": [
      {
        "source": "(.*)",
        "destination": "/index.html"
      }
    ]
  }
  

  I hope this fixes the issue for you 👍

  0