Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Building a Multi-Step Form with React, Styled Components, react router

@abdulsalam11-alao

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Solution Retrospective What are you most proud of?

Dynamic Step Navigation: I’m particularly proud of how the steps in the multi-step form were linked dynamically using React Router. This allows users to navigate between steps smoothly and provides a clear, structured flow. Styling: The design of the form, especially the sidebar, came out great using Styled Components. It feels modern and clean, and the flexibility of this styling method made it easy to implement responsive designs. Error Handling and Form Validation: Implementing basic validation checks to ensure users can’t skip important fields helped make the form more robust and user-friendly. What would you do differently next time?

Use a More Robust State Management Solution: While React’s built-in state management worked fine for this project, I would consider using a more robust solution like Redux or React Context API for larger, more complex multi-step forms. This would make managing the state across multiple steps and components easier and more efficient. Add Animations and Transitions: Next time, I would add smooth transitions between form steps to enhance user experience. This would provide a more engaging feel as users move through the form. Improve Error Boundaries: Handling errors with more detailed error boundaries and alerts would give users clearer feedback if something went wrong. Implement Backend Integration: While this form collects user data effectively, integrating it with a backend API or service for persistent storage or sending the form data would complete the form’s functionality. Would love to hear feedback on the potential enhancements and suggestions for improving the state management!

Community feedback

@Mahmoud-ElAgamy

Posted

Thank you for your hard work on this project. I've been using the application and have encountered a few issues:

  • 404 Page Errors: When reloading the app during any step, I consistently encounter 404 page errors. This can disrupt the user experience and lead to confusion.
  • Data Persistence: When I navigate to a different step and then return to a previous one, any changes I've made are not saved. This can be frustrating, as it requires me to re-enter information. It would be beneficial if the application could automatically save user input as they progress through the steps.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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