Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 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
View live sitePreview (opens in new tab)View codeCode (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
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jansana Dylan's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License