Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 11 months ago

A simple multi step form built with React.

motion, react, tailwind-css, typescript
Mahmoud Elagamy•1,100
@m-elagamy
A solution to the Multi-step form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

...

Hello FEM Community!😉

this is my solution for multi step form app challenge!😊.

I'm thrilled to share my solution for the multi step form app challenge, and building this app was a fantastic learning experience that solidified my understanding of React's core concepts.

🛠️ Built with:

  • React✔
  • Tailwind ✔
  • TypeScript✔
  • Framer Motion ✔
  • Daisy UI ✔
What specific areas of your project would you like help with?

Check out the live demo and feel free to leave any feedback or ask questions about my approach! Thanks a lot😊.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Mizanur Rahman•160
    @MizanSafin
    Posted 9 months ago

    Very nice design I love it brother . There is some place you have most probably changed frontEndMentor original design like next button

    Marked as helpful
  • HANICHE Zahir•280
    @ZahirHaniche-dev
    Posted 10 months ago

    Congratulations on your very comprehensive project. I really like your project architecture and the way you managed the form steps. I have just submitted a solution that I will improve little by little because there are still things missing.

    Once again, congratulations my friend and good luck!

    Marked as helpful
  • Victor•1,400
    @VictorKevz
    Posted 11 months ago

    I love your simple animations 😁, which I honestly could adopt for my project! Also, the icons' appearance on successful form registration was a nice touch!👌🏼

    However, I think there are just minor details you may have missed like preselected or default options on both subscriptions and adds-on. It's good that you set validation in case it's not selected but I thought I could just mention that in case it wasn't intentional. Above all, I love your solution!!!!

    Marked as helpful
  • Fidelisuzoma•380
    @UzomaFidelis
    Posted 11 months ago

    Wow, I love your solution. Love the personal touch you gave to the challenge design. I on the other hand usually try to follow the design files too closely 😂😂. Maybe not such a good idea after all. Nice work again!

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
Frontend Mentor logo

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

Frontend Mentor

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

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

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub