Frontend Mentor - Multi-step form solution

This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• Go back to a previous step to update their selections
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Receive form validation messages if:
  • A field has been missed
  • The email address is not formatted correctly
  • A step is submitted, but no selection has been made

Screenshot

Links

• Solution URL: https://github.com/YusufAkilevi/Multi-Page-Form
• Live Site URL: https://multi-page-form-yakilevs.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid
• Desktop-first workflow
• React - JS library
• ReduxToolkit
• Router

What I learned

Component Structure

Organizing components in a modular and reusable manner was crucial for maintaining a clean codebase. Learning to structure components effectively helped improve code readability and maintainability.

Form State Management

Using Redux to manage the form's state allowed for centralized control over user input and interactions. This facilitated easy data sharing between different form steps and improved the overall user experience.

Routing

Implementing React Router enabled smooth navigation between form steps, enhancing the user's perception of the form as multiple pages. Proper routing improved user flow and allowed for easy bookmarking or sharing of specific form steps.

CSS Styling

Creating a consistent and visually appealing design required a strong understanding of CSS. Leveraging CSS techniques like flexbox or grid layout helped in achieving responsive and well-organized UI elements.

User Experience

Developing a user-centric design mindset was crucial for ensuring a seamless experience. Incorporating features such as validation, error handling, and progress indicators contributed to an intuitive and user-friendly multi-page form.

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Useful resources

• MDN - This helped me to find anything related Javascript, CSS or HTMl.
• CSS Tricks - This website explains css properties really easy to understand and provide example codes.

Author

• Frontend Mentor - @YusufAkilevi
• Twitter - @yusufakilevii
• GitHub - @YusufAkilevi

Acknowledgments

I worked alone in this project and I hope I would have an opportunity to work on an open source project with other developers.