Getting Started
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 project. The project is a single-page application built with Create React App that implements a four-step user registration form. It captures personal information, address details, and payment information, culminating in a review and submission step. The collected data is then persisted to a Firebase Firestore database.
The application's core logic is encapsulated within a main stateful component that manages the current step, form data, validation, and navigation between steps. Child components are used to render the form for each distinct step.
Prerequisites and Installation
The project relies on Node.js and npm for dependency management and running scripts. The primary dependencies are listed in package.json.
Sources: package.json:5-15
Dependencies
| Package | Version | Description |
|---|---|---|
react | ^18.3.1 | Core library for building the user interface. |
react-dom | ^18.3.1 | Serves as the entry point to the DOM and server renderers for React. |
firebase | ^10.12.5 | Used for backend services, specifically Firestore database integration. |
react-toastify | 10.0.5 | Provides toast notifications for user feedback on form submission. |
react-scripts | 5.0.1 | Contains scripts and configurations for Create React App. |
To install these dependencies, run the following command in the project's root directory:
npm install
Sources: package.json:16-20, README.md:5-6
Running the Application
Once dependencies are installed, the application can be started in development mode.
npm start
This command runs the app in development mode. Open http://localhost:3000 to view it in the browser. The page will automatically reload upon saving changes.
Sources: README.md:8-13, package.json:17
Other Scripts
| Script | Description |
|---|---|
npm run build | Builds the app for production into the build folder. |
npm test | Launches the test runner in interactive watch mode. |
npm run eject | Ejects from Create React App, exposing build tools and configurations. |
Sources: README.md:15-36, package.json:18-20
Application Architecture
The application follows a component-based architecture. The entry point is src/index.js, which renders the main App component into the DOM element with the ID root. The App component, in turn, renders the MultiStepForm component, which is the central controller for the entire form flow.
Sources: src/index.js:6-11, src/App.js:6-12, public/index.html:31
Component Hierarchy
The diagram below illustrates the parent-child relationships between the main components.
This diagram shows that MultiStepForm.jsx is the parent component that conditionally renders one of the four step-specific components based on the current state.
Sources: src/App.js:8-10, src/components/MultiStepForm.jsx:195-230
Core Logic: MultiStepForm.jsx
This component is responsible for managing the state and logic of the entire multi-step form process.
Sources: src/components/MultiStepForm.jsx
State Management
MultiStepForm.jsx uses React's useState hook to manage the form's state.
step: A number that tracks the current active step of the form (from 1 to 4).formData: An object that stores all the data entered by the user across all steps.errors: An object to hold validation error messages for the current step's fields.loading: A boolean to indicate when the form submission to Firebase is in progress.
Sources: src/components/MultiStepForm.jsx:11-27
The structure of the formData state object is initialized as follows:
// src/components/MultiStepForm.jsx:12-25
const [formData, setFormData] = useState({
name: "",
email: "",
phoneNumber: "",
address: "",
city: "",
state: "",
postalCode: "",
cardNumber: "",
expiryDateMonth: "",
expiryDateYear: "",
cvv: "",
});
Navigation and Validation Flow
User navigation between steps is handled by the handleNext and handleBack functions. The handleNext function first triggers validateStep to ensure the data for the current step is valid before advancing.
The diagram below shows the flow when a user clicks the "NEXT" button.
This flow ensures data integrity at each stage of the form.
Sources: src/components/MultiStepForm.jsx:28-33, src/components/MultiStepForm.jsx:51-121
Data Submission
The final submission is handled by the handleSubmit function, which is triggered from the ReviewSubmit component. This function performs a final validation check before sending the data to Firebase.
The sequence diagram below details the submission process.
This process uses react-toastify to provide feedback to the user upon successful submission or in case of an error.
Sources: src/components/MultiStepForm.jsx:123-147, src/components/formsteps/ReviewSubmit.jsx:60-65, src/firebase.js:13-15
Form Step Components
The form is divided into four distinct components, each representing a step in the process. They are stateless (or "dumb") components that receive data and handler functions as props from MultiStepForm.jsx.
| Component | Step | Purpose | Props Received |
|---|---|---|---|
PersonalInfo.jsx | 1 | Collects user's name, email, and phone number. | step, formData, handleChange, handleNext, errors |
AddressDetails.jsx | 2 | Collects user's address, city, state, and postal code. | step, formData, handleChange, handleBack, handleNext, errors |
PaymentInfo.jsx | 3 | Collects credit card details. | step, formData, handleChange, handleBack, handleNext, errors |
ReviewSubmit.jsx | 4 | Displays all collected data for review and final submission. | formData, handleBack, handleSubmit, loading |
Sources: src/components/formsteps/PersonalInfo.jsx:4, src/components/formsteps/AddressDetails.jsx:4, src/components/formsteps/PaymentInfo.jsx:4, src/components/formsteps/ReviewSubmit.jsx:4
In the ReviewSubmit component, sensitive information like the credit card number and CVV are masked for security before being displayed to the user.
// src/components/formsteps/ReviewSubmit.jsx:18-19
const maskedCardNumber = `**** **** **** ${cardNumber.slice(-4)}`;
const maskedCVV = `***`;
Backend Integration with Firebase
The project uses Firebase Firestore to store the submitted form data. The Firebase configuration is initialized in src/firebase.js.
The configuration object firebaseConfig contains the necessary credentials to connect to the Firebase project. The initializeApp function establishes the connection, and getFirestore provides the database instance.
// src/firebase.js:4-12
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"
};
The db, collection, and addDoc exports from this file are then imported and used within MultiStepForm.jsx to persist the formData object to a collection named formDetails.
Sources: src/firebase.js:1-15, src/components/MultiStepForm.jsx:9, src/components/MultiStepForm.jsx:127