Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:This document provides a technical overview of the react-multi-step-form application architecture. The application is a single-page application (SPA) built using Create React App. It features a four-step user input form that collects personal, address, and payment information, validates the data at each step, and submits the final data to a Firebase Firestore database.
The core of the architecture is a centralized state management pattern within the main MultiStepForm component, which orchestrates the flow between individual form step components. This design keeps the step-specific components "dumb" and focused on rendering UI, while the parent component handles all logic, state, and side effects.
Component Structure
The application's UI is built with a clear hierarchy of React components. The entry point is src/index.js, which renders the App component into the root div of public/index.html. The App component serves as a simple wrapper that renders the main MultiStepForm component.
MultiStepForm is the central component, responsible for managing the overall form state and rendering the appropriate step component based on the current step state. The form is divided into four distinct components, each representing a step in the process.
This diagram illustrates the component hierarchy:
This diagram shows how the main HTML file hosts the React application, which is structured with the App component rendering the MultiStepForm that, in turn, conditionally renders one of the four step components.
Sources: public/index.html:31, src/index.js:7-11, src/App.js:7-12, src/components/MultiStepForm.jsx:194-229
State Management and Data Flow
State management is centralized within the MultiStepForm.jsx component using the useState hook. This component holds the application's critical state.
Key State Variables
| State Variable | Type | Description | Source File |
|---|---|---|---|
step | Number | Tracks the current active step of the form (1-4). | [src/components/MultiStepForm.jsx:12](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L12) |
formData | Object | Stores all user input from all form steps. | [src/components/MultiStepForm.jsx:13-25](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L13-L25) |
errors | Object | Holds validation error messages for the current step's fields. | [src/components/MultiStepForm.jsx:26](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L26) |
loading | Boolean | Indicates if the form submission to Firebase is in progress. | [src/components/MultiStepForm.jsx:27](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L27) |
Data Flow
The data flow follows a unidirectional pattern. The parent MultiStepForm component passes down state (formData, errors) and handler functions (handleChange, handleNext, handleBack) as props to its child step components. When a user interacts with an input field, the handleChange function is called, updating the formData state in the parent component. This triggers a re-render, and the updated data flows back down to the child components.
The following sequence diagram illustrates the process of a user filling out a field and clicking "NEXT".
This diagram shows how child components delegate state updates and navigation actions to the parent MultiStepForm component.
Sources: src/components/MultiStepForm.jsx:28-53, src/components/formsteps/PersonalInfo.jsx:15-18
Form Logic and Validation
Navigation
Navigation between steps is controlled by handleNext and handleBack functions in MultiStepForm.jsx.
handleNext(): First callsvalidateStep()for the current step. If validation passes, it increments thestepstate.handleBack(): Decrements thestepstate without validation.
Sources: src/components/MultiStepForm.jsx:28-36
Validation
The validateStep(step) function contains the validation logic for steps 1, 2, and 3. It checks for required fields and specific formats (e.g., email, phone number, postal code). If any validation fails, it populates the errors state object, and the handleNext function will not proceed to the next step.
The validation rules are summarized below:
| Step | Field | Validation Rule | Source |
|---|---|---|---|
| 1 | name | Required (not empty) | [src/components/MultiStepForm.jsx:58-60](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L58-L60) |
| 1 | email | Required, must be a valid email format | [src/components/MultiStepForm.jsx:61-65](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L61-L65) |
| 1 | phoneNumber | Required, must be 10 digits | [src/components/MultiStepForm.jsx:66-70](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L66-L70) |
| 2 | address | Required | [src/components/MultiStepForm.jsx:74-76](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L74-L76) |
| 2 | city | Required | [src/components/MultiStepForm.jsx:77-79](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L77-L79) |
| 2 | state | Required | [src/components/MultiStepForm.jsx:80-82](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L80-L82) |
| 2 | postalCode | Required, must be 5 or 6 digits | [src/components/MultiStepForm.jsx:83-87](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L83-L87) |
| 3 | cardNumber | Required, must be 16 digits | [src/components/MultiStepForm.jsx:91-95](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L91-L95) |
| 3 | expiryDateMonth | Required | [src/components/MultiStepForm.jsx:96-98](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L96-L98) |
| 3 | expiryDateYear | Required | [src/components/MultiStepForm.jsx:99-101](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L99-L101) |
| 3 | cvv | Required, must be 3 digits | [src/components/MultiStepForm.jsx:102-106](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/MultiStepForm.jsx#L102-L106) |
Data Persistence with Firebase
The application uses Firebase Firestore to persist the form data upon final submission.
Firebase Configuration
The Firebase connection is configured in src/firebase.js. This file initializes the Firebase app with credentials from firebaseConfig and exports the Firestore database instance db, along with helper functions collection and addDoc.
Sources: src/firebase.js:1-16
Submission Process
The submission is handled by the handleSubmit async function in MultiStepForm.jsx. When the user clicks the "SUBMIT" button in the ReviewSubmit component, this function is triggered. It sets the loading state to true, and then attempts to write the formData object to a Firestore collection named formDetails. A success or error toast notification is displayed to the user based on the outcome.
The following sequence diagram shows the submission flow:
This diagram illustrates the final step of the user journey, where the collected data is sent to the backend service.
Sources: src/components/MultiStepForm.jsx:111-137, src/components/formsteps/ReviewSubmit.jsx:60-66, src/firebase.js
UI and Styling
The UI is designed with a progress bar indicating the user's position in the form flow. The form steps are rendered within a container that uses a CSS transform to create a horizontal sliding effect when navigating between steps.
- Progress Bar: The width of the
.progress-bar-innerelement is dynamically calculated based on the currentstep:width: ${(step / 4) * 100}%. - Sliding Animation: The form content wrapper uses
transform: translateX(-${(step - 1) * 25}%)to shift the view to the current step's component.
Styling is handled by several CSS files, including MultiStepForm.css for the main container and progress bar, Form.css for the input fields and buttons within each step, and ReviewSubmit.css for the final review page.
Sources: src/components/MultiStepForm.jsx:185-191, src/components/MultiStepForm.jsx:196-198, src/styles/MultiStepForm.css, src/styles/Form.css