/react-multi_step_form

vite | react | redux | sass

Primary LanguageJavaScript

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

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

My process

Built with

  • Semantic HTML5 markup
  • CSS3, CSS Grid, Flexbox
  • React - Javascript library
  • Redux - React state management tool
  • Sass - CSS preprocessor

Redux Store Slices

  • The Redux store slices are defined as follows:
{
  stepsProgress?: {
    userInfo: false,
    selectPlan: false,
    selectAddons: false,
    summary: false,
  },
  user: {
    name: '',
    email: '',
    phone: '',
  },
  plan: {
    subscriptionType: '',
    subscriptionPrice: '',
    subscriptionRenewalInterval: '',
    subscriptionRenewalIntervalUnit: '', (Monthly || Yearly)
  },
  addons: [
    {
      addonName: '',
      addonPrice: '',
      addonRenewalInterval: '', (Monthly || Yearly)
    },
    {
      ...
    },
  ],
  formTotalPrice: {
    totalPrice: 0,
  }
}

Project goals

With this Front End Mentor challenge I have refreshed my React/Redux knowledge. My goals with this project were to:

  • capture the form fields values into a Redux store, composed of multiple slices, each slice with it's own scope;
  • build a efficient SPA;
  • consume json data;
  • use as few external libraries as possible;
  • practice the BEM methodology wits Scss;

Useful resources

Author