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

• Frontend Mentor - Multi-step form solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshots
      • Mobile view screenshots
      • Desktop View Screenshots
    • Links
  • My process
    • Built with
    • What I learned
    • Continued Development
    • Useful Resources
  • Installation Instructions
  • Dependencies
  • Usage Instructions
  • Project Structure
    • Key Files
  • Author

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:
• The fields have been missed.
• The email address is not formatted correctly.

Additional features:

• Uncompleted steps are faded, and completed steps are highlighted.
• The previous step is shown as completed when the user moves to the next step.
• Users cannot move to the next step unless required fields are filled or options are selected.
• A "Back Home" button is included on the confirmation step to return to the home page.
• The "Go Back" button on all pages has an orange hover effect, matching the design file.

Screenshots

Mobile view screenshots

Personal Info View: Screenshot of the Personal Info View on mobile.

Personal Info View with Error: Screenshot of the Personal Info View on mobile, including the error messages.

Desktop View Screenshots

Personal Info View:	Select Plan View: Screenshot of the Select Plan step with the previous step completed and hover effect on the Go Back button.	Add-Ons View: Screenshot of the Add-Ons step with a selected add-on and hover effect on another add-on.
Summary View: Screenshot of the Summary step with hover effect on the Change option.	Confirmation View: Screenshot of the Confirmation step on desktop.	Confirmation with Hover Effect: Screenshot of the Confirmation step with hover effect on the Back to Home button.

Links

• Solution URL: solution URL here
• Live Version: live version here

My process

Built with

• HTML5: Used to structure the content in a clear and accessible way.
• CSS Custom Properties: Employed to maintain consistent styling and make it easy to update.
• Flexbox: Utilized to create flexible and responsive layouts.
• Mobile-First Design: Applied to ensure the design works well on mobile devices first, then scales up.
• React: Used to build reusable components and manage the application's state.
• BEM (Block Element Modifier) Naming: Adopted for clear and maintainable CSS class naming.
• React Router: Implemented for seamless navigation between different steps of the form.

What I learned

• React Router: I learned how to use React Router to manage navigation between different steps of the form. This allowed me to create a seamless multi-step experience without reloading the page, enhancing the user experience and making the application more dynamic.

Continued Development

• Accessibility Enhancements: Implement additional accessibility features, such as improved keyboard navigation, ARIA roles, and more comprehensive screen reader support.
• Component Optimization: Refactor some of the existing components to make them more reusable and modular, enhancing maintainability and scalability.
• State Management: Explore more advanced state management techniques, potentially integrating a solution like Redux or Context API to manage the app's state more efficiently.
• Animations: Add subtle animations to improve user interactions and provide a smoother experience.

Useful Resources

• React Documentation: The official React documentation was an essential guide for understanding the core concepts of React, such as components, props, and state. It helped me structure the individual steps of the form as reusable components, enhancing code readability and maintainability.

• React Router Documentation: This resource was critical for setting up navigation between the different steps of the form. It taught me how to implement react-router-dom to manage multi-page routes.

• React Hooks Guide (useState & useEffect): Learning about hooks like useState and useEffect from this guide helped me manage state between different components, especially when tracking user input across multiple steps. The ability to handle dynamic state updates was crucial for the interactive nature of the form.

• Handling Forms in React: This guide on handling forms in React helped me understand how to manage form inputs, validation, and submission in a structured way. It was particularly useful for implementing form validation and ensuring proper handling of user data.

Installation Instructions

1. Clone the repository:

   git clone https://github.com/Doileo/multi-step-form.git
   cd multi-step-form
   

2. Install dependencies: Ensure you have Node.js installed. Run the following command to install project dependencies:

 npm install

3. Run the project: To start the development server, use the following command:

 npm start

4. Access the project: Once the server is running, navigate to http://localhost:3000 in your browser to view the app.

Dependencies

• Node.js: Ensure you have Node.js installed. You can download it from the Node.js official website.
• npm: Node.js package manager, included with Node.js installation.

To install the project dependencies, run:

npm install

Usage Instructions

Once the project is set up and running, you can:

• Open your browser and navigate to http://localhost:3000.
• Complete the multi-step form as per the challenge requirements.
• Use the "Go Back" and "Next Step" buttons to navigate between steps.
• Review the summary and confirm your selections on the final step.

Project Structure

• src/
  • components/: Contains React components for each step of the form.
  • images/: Stores images used in the project.
  • styles/: Contains CSS files for styling the application.
  • App.js: Main application component that renders the form steps.
  • index.js: Entry point of the React application.
• public/
  • index.html: The main HTML file for the project.

Key Files

• App.js: Manages the routing and rendering of form steps.
• index.js: Initializes and renders the React application.
• styles/: Contains the styles used throughout the project to ensure a consistent look and feel.

Author

• Frontend Mentor - @Doileo
• LinkedIn - @Doina
• GitHub - @Doileo