Data Collection
Relevant source files
The following files were used as context for generating this wiki page:The data collection system in this application is implemented as a client-side multi-step form. Its purpose is to guide the user through a series of data entry stages, collecting personal, address, and payment information. The system validates the data at each step before allowing the user to proceed. Upon final review and confirmation, the collected data is persisted to a Firebase Firestore database.
The entire process is encapsulated within the MultiStepForm component, which acts as a stateful container managing the flow, data, and validation logic for the child components that represent each step of the form.
Component Architecture
The data collection feature is built around a main parent component, MultiStepForm, which conditionally renders different child components for each step of the form. This architecture breaks down a large form into smaller, manageable UI pieces.
Sources: src/App.js:9, src/components/MultiStepForm.jsx:212-247
The diagram below illustrates the hierarchy of components involved in the data collection process.
State Management and Data Flow
The MultiStepForm component is the single source of truth for the form's state. It uses React's useState hook to manage the current step, the form data, validation errors, and loading status.
Sources: src/components/MultiStepForm.jsx:11-30
Key state variables include:
step: A number indicating the current active step (1-4).formData: An object containing all the data collected from the user across all steps.errors: An object storing validation error messages for form fields.loading: A boolean to indicate when the form submission is in progress.
Data flows from the parent MultiStepForm component down to the child step components as props. User input triggers the handleChange function, which updates the formData state in the parent component.
The following flowchart shows the data flow from user interaction to state update.
Form Steps and Validation
The form is divided into four distinct steps. Validation is performed within the MultiStepForm component's validateStep function each time the user attempts to proceed to the next step.
Sources: src/components/MultiStepForm.jsx:32-36, 55-130
Step 1: Personal Information
This is the initial step, collecting basic user identification details.
| Field | Validation Rule | Error Message |
|---|---|---|
name | Must not be empty/whitespace. | "Name is required" |
email | Must not be empty and must be a valid email format. | "Email is required", "Email is invalid" |
phoneNumber | Must not be empty and must be exactly 10 digits. | "Phone Number is required", "Enter 10 digit phone Number" |
Sources: src/components/MultiStepForm.jsx:60-71, src/components/formsteps/PersonalInfo.jsx
Step 2: Address Details
This step collects the user's physical address.
| Field | Validation Rule | Error Message |
|---|---|---|
address | Must not be empty/whitespace. | "Address is required" |
city | Must not be empty/whitespace. | "City is required" |
state | Must not be empty/whitespace. | "State is required" |
postalCode | Must not be empty and must be 5 or 6 digits. | "Postal Code is required", "Postal Code is invalid" |
Sources: src/components/MultiStepForm.jsx:75-87, src/components/formsteps/AddressDetails.jsx
Step 3: Payment Information
This step collects sensitive payment card details.
| Field | Validation Rule | Error Message |
|---|---|---|
cardNumber | Must not be empty and must be exactly 16 digits. | "Card Number is required", "Enter 16 Digit Card Number" |
expiryDateMonth | Must be selected. | "Expiry Month is required" |
expiryDateYear | Must be selected. | "Expiry Year is required" |
cvv | Must not be empty and must be exactly 3 digits. | "CVV is required", "CVV is invalid" |
Sources: src/components/MultiStepForm.jsx:91-106, src/components/formsteps/PaymentInfo.jsx
Step 4: Review & Submit
The final step displays all the collected information for user review. To enhance security, sensitive payment details are masked. The cardNumber shows only the last 4 digits, and the cvv is completely hidden.
Sources: src/components/formsteps/ReviewSubmit.jsx:19-20, 29-41
Data Persistence
Upon user confirmation in the final step, the handleSubmit function is invoked. This function orchestrates the final submission process.
Sources: src/components/MultiStepForm.jsx:132-156
The submission flow is as follows:
- The
loadingstate is set totrue. - A final validation check is performed.
- If validation passes, the
addDocfunction from Firebase is called to save theformDataobject to theformDetailscollection in Firestore. - A success notification is displayed to the user using
react-toastify. - If an error occurs during the Firebase operation, an error notification is shown.
- The
loadingstate is set tofalsein thefinallyblock, ensuring the UI is re-enabled regardless of the outcome.
The sequence diagram below visualizes the submission process.
Firebase Configuration
The connection to Firebase is configured in src/firebase.js. It initializes the Firebase app with project-specific credentials and exports the Firestore database instance (db) for use in other parts of the application.
Sources: src/firebase.js:4-15
Summary
The data collection module is a well-structured, multi-step form that prioritizes user experience by breaking down data entry into logical sections. It ensures data integrity through step-by-step validation and provides clear feedback to the user. The architecture effectively separates concerns, with a central component managing state and flow, and child components responsible for rendering each step. The final, validated data is securely persisted to a cloud-based Firestore database, completing the collection lifecycle.