Active Steps Form

Good work

some things that I noticed in the UI:

• on the first page, if you dont enter anything and just try to press "next step" button, there are no error messages saying that some fields are required.

• phone number field doesnt like spaces, even though the placeholder message suggests otherwise.

• on the second page, the text in panels "arcade" "advanced" "pro" can overflow on some viewport widths(just large enough to still be in the desktop layout)

• in some circumstances(not sure yet when) the "monthly <-> yearly" switch can break and get stuck in one position.

• the remaining 2 pages seem to be fine, didnt break :)

• You dont use any libraries to help with managing state or form validation? impressive. I would recommend Formik or react-hook-form

• regexes: phone numbers can have 0 after +. Also interesting that you included so many characters in the name regex, but left out "ä". (I dont think you even need name regex, what yre you trying to check?)

• I see you are using viewport units. Nice! There is this video by Kevin Powell about them that goes into some problems that they might cause sometimes and how to fix them.

• speaking of CSS, I would add layout breakpoint @media screen and (max-width: 768px) to the variables, because its used everywhere, and is something that needs to be tweaked from time to time

• didnt even try to make nice circles around step numbers in the sidebar? The easiest way is to just give them definite height and width, like height: 4rem; width: 4rem;

• you use lets too much, try to use const keyword wherever possible.

• useEffect on line 91 in file app_context.jsx can be rewritten to grab data from data.jsx about available plans and options and use it in calculation instead of hardcoding a bunch of nested ifs. Also dont put dependent variables like totalPrice into your context, but calculate them on the spot when you need it(and you can use useMemo hook to memoize the value). The principle here is 'make invalid states unrepresentable', in this case, we dont want totalPrice to become desynced from the rest of the state by some mistake.

• <nav> element is supposed to contain links, but yours doesnt. Also <button> in the navbar is misleading, if it doesnt do anything.

• in vitejs, you can import an asset like an svg directly into your js file. You dont need to inline their content manually like you do in data.jsx.

• The "payment plan" switch breaks, because you dont initialize it with correct state from your context in SelectPlan.jsx. This should be something like <IOSSwitch onClick={changePaymentPlan} value={payment_plan} />.

• You have some accessibility problems(images without alt text, bad tab ordering, and you are using heading levels for styling ). I suggest running accessibility tool in DevTools

And thats all I could find. Dont be discouraged by all this stuff, your code quality is one of the best I ve seen on the frontendmentor.io so far and is easy to read and understand.

Hi ! Congrats on posting your challenge :)

You can improve the accessibility of the add ons step by using the label tag on your card to select the checkbox by clicking anywhere on the card.

You can check this example: https://flowbite.com/docs/forms/checkbox/#advanced-layout