Home
Relevant source files
The following files were used as context for generating this wiki page:This project is a multi-step form application built using React. Its primary purpose is to guide a user through a series of data entry steps, validate the input at each stage, and finally submit the complete data set to a Firebase Firestore database. The application breaks down a large form into four distinct sections: Personal Information, Address Details, Payment Information, and a final Review & Submit step.
The application is bootstrapped with Create React App and utilizes client-side routing and state management to create a seamless user experience. It features a progress bar to indicate the user's completion status, input validation with error feedback, and notifications for submission status. The final data is persisted in a Firestore collection named formDetails.
Sources: README.md, src/components/MultiStepForm.jsx:132-135, src/App.js:5-11
Project Dependencies
The application relies on several key libraries for its functionality. The core is built with react, while firebase is used for the backend database and react-toastify provides user notifications.
| Dependency | Version | Description |
|---|---|---|
react | ^18.3.1 | Core library for building the UI. |
firebase | ^10.12.5 | Provides backend services, including Firestore DB. |
react-toastify | 10.0.5 | Used for displaying success/error notifications. |
react-scripts | 5.0.1 | Scripts and configurations for Create React App. |
Sources: package.json:5-13
Core Architecture
The application's architecture is centered around the MultiStepForm component, which acts as a stateful container and orchestrator for the entire form process. The App component serves as the main entry point, rendering MultiStepForm within its header.
Sources: src/App.js:5-11
Component Hierarchy
The MultiStepForm component conditionally renders one of four child components based on the current step in the state. Each child component represents a single step in the form.
This diagram illustrates the parent-child relationships between the main components.
State Management
All application state is managed within the MultiStepForm component using React's useState hook. This centralized approach allows for easy data sharing and manipulation across all form steps.
step: A number that tracks the current active step (1-4).formData: An object that stores all user-inputted data from all steps.errors: An object that holds validation error messages for the current step's fields.loading: A boolean to indicate when the form submission is in progress.
Sources: src/components/MultiStepForm.jsx:11-28
The formData object has the following structure:
| Key | Type | Description |
|---|---|---|
name | String | User's full name. |
email | String | User's email address. |
phoneNumber | String | User's 10-digit phone number. |
address | String | User's street address. |
city | String | User's city. |
state | String | User's state. |
postalCode | String | User's 5 or 6-digit postal code. |
cardNumber | String | User's 16-digit card number. |
expiryDateMonth | String | Card's expiry month (MM). |
expiryDateYear | String | Card's expiry year (YYYY). |
cvv | String | Card's 3-digit CVV. |
Sources: src/components/MultiStepForm.jsx:13-25
Form Flow and Validation
The user navigates through the form using "NEXT" and "GO BACK" buttons. The handleNext function triggers validation for the current step before proceeding. If validation passes, the step state is incremented. handleBack simply decrements the step state.
User Interaction Flow
This diagram shows the flow of control based on user actions.
Validation Logic
Validation is performed within the validateStep function inside MultiStepForm.jsx. It checks for required fields and specific formats (e.g., email, phone number) based on the current step.
| Step | Field | Validation Rule | Error Message |
|---|---|---|---|
| 1 | name | Must not be empty. | "Name is required" |
| 1 | email | Must not be empty and match email regex. | "Email is required/invalid" |
| 1 | phoneNumber | Must not be empty and be 10 digits. | "Phone Number is required/invalid" |
| 2 | address | Must not be empty. | "Address is required" |
| 2 | city | Must not be empty. | "City is required" |
| 2 | state | Must not be empty. | "State is required" |
| 2 | postalCode | Must not be empty and be 5-6 digits. | "Postal Code is required/invalid" |
| 3 | cardNumber | Must not be empty and be 16 digits. | "Card Number is required/invalid" |
| 3 | expiryDateMonth | Must not be empty. | "Expiry Month is required" |
| 3 | expiryDateYear | Must not be empty. | "Expiry Year is required" |
| 3 | cvv | Must not be empty and be 3 digits. | "CVV is required/invalid" |
Sources: src/components/MultiStepForm.jsx:53-127
Data Submission
The final step is handled by the ReviewSubmit component. It displays all the collected data for the user to review. The credit card number and CVV are masked for security. Upon clicking the "SUBMIT" button, the handleSubmit function in MultiStepForm is invoked.
Sources: src/components/formsteps/ReviewSubmit.jsx:5-23, src/components/formsteps/ReviewSubmit.jsx:50-55
Submission Sequence Diagram
This diagram shows the sequence of events during form submission.
Firebase Integration
The project is configured to connect to a Firebase project. The configuration details are stored in src/firebase.js. The handleSubmit function uses the addDoc and collection functions from the Firebase SDK to write the formData object as a new document into the formDetails collection in Firestore.
// src/firebase.js:3-11
const firebaseConfig = {
apiKey: "AIzaSyAoEkweCEECJa2dE9zL5euJuwaUU-zJ3lY",
authDomain: "react-multi-step-form-3706c.firebaseapp.com",
projectId: "react-multi-step-form-3706c",
storageBucket: "react-multi-step-form-3706c.appspot.com",
messagingSenderId: "909707174433",
appId: "1:909707174433:web:91d6a8bd6b31b91a61b960"
};
Sources: src/firebase.js:3-11, src/components/MultiStepForm.jsx:132-135
UI and Styling
The UI features a progress bar that visually represents the user's progress through the four steps. The width of the inner bar is dynamically calculated based on the current step. The form steps are rendered in a flex container, and a CSS transform: translateX() property is used to create a sliding animation effect when navigating between steps.
- Progress Bar: The width is set via an inline style:
width: ${(step / 4) * 100}%. - Form Sliding: The
form-contentcontainer is translated horizontally:transform: translateX(-${(step - 1) * 25}%).
Sources: src/components/MultiStepForm.jsx:176-179, src/components/MultiStepForm.jsx:184-186, src/styles/MultiStepForm.css
Conclusion
The react-multi-step-form project is a well-structured client-side application that demonstrates how to build a complex form with multiple steps in React. It effectively uses centralized state management, component-based architecture, client-side validation, and integration with a third-party service like Firebase for data persistence. The user experience is enhanced by clear visual feedback, including a progress bar, animated transitions, and toast notifications.