Skip to content
Submitted over 2 years ago

Using React/styled-components/react-hook-form/yup

react, styled-components
Jansana Dylan•60
@SwiichyCode
A solution to the Multi-step form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

"Hello! Today, I present my solution for this challenge:

-Path Architecture: It may seem a bit heavy and complex for this challenge, I admit. I tried to approach it as closely as possible to a real medium-sized application, and I really like Atomic Design. As you may have noticed, each component contains its own logic and style. I prefer this approach as it seems more readable and accessible to me.

-Components: There are some examples of reusable components in the project. For me, creating reusable components is essential when working with this type of component-oriented framework. I plan to create my own component library for my personal and professional projects in the future.

-Styles: As for the style, there isn't much to specify. The use of styled-components in this case simply serves to open a portal for me to write my CSS and pass props. I don't use all the features of the library.

-Features: Managing state in localstorage, which will allow the user to return to the specific index where they left off on the form while keeping their data, refactoring the CSS to remove duplicates, etc."

Code

Please log in to post a comment

Log in

Community feedback

  • Katja Danilova•340
    @katjadanilova

    Hi!

    I liked your implementation!

    I liked a transition effect you've implemented when a user changes plan from monthly to yearly - quite neat 👏.

    I liked that you already implemented email and phone verification - and noticed that phone verification perceives a number that starts with a "+" as an incorrect one. The "+" symbol indicates that the number is an international phone number and is followed by the country code. This helps to ensure that the phone number is formatted correctly and can be properly recognized by phone systems and carriers.

    There are some differences with initial design, but I personally am good with them :)

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