Database Schema
Relevant source files
The following files were used as context for generating this wiki page:
This document outlines the database integration and schema for the React Multi-Step Form application. The application utilizes Google Firestore, a NoSQL document database, to persist the data collected from the user through the multi-step form. The entire set of user-provided information is stored as a single document within a dedicated Firestore collection.
The database interaction is managed through the Firebase Web SDK, with configuration and initialization handled in a dedicated module. The data submission is triggered from the final step of the form, where all collected data is sent to Firestore in a single asynchronous operation.
Sources: src/firebase.js, src/components/MultiStepForm.jsx:139-159, package.json:6
Firebase Configuration
The application connects to a Google Firebase project to use its Firestore services. The connection details are hardcoded within the firebase.js file. This file initializes the Firebase app and exports the Firestore database instance (db) along with helper functions (collection, addDoc) for use in other components.
Sources: src/firebase.js:1-16
Initialization
The Firebase app is initialized using a configuration object containing the project's credentials and identifiers.
// src/firebase.js:3-13
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"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
Sources: src/firebase.js:3-15
Data Model
The application uses a single collection in Firestore named formDetails. Each time a user successfully submits the form, a new document is created in this collection. The document's structure mirrors the formData state object managed by the MultiStepForm component.
Sources: src/components/MultiStepForm.jsx:14-27, 142
Entity Relationship Diagram
The diagram below illustrates the formDetails collection and the fields within each document.
This diagram represents the structure of a document within the formDetails collection. Sources: src/components/MultiStepForm.jsx:14-27
Collection Fields
The formDetails collection stores all the information gathered across the different steps of the form. The fields are defined by the formData state in MultiStepForm.jsx.
| Field | Type | Description | Source File(s) |
|---|---|---|---|
name | string | User's full name. | src/components/formsteps/PersonalInfo.jsx:13-19 |
email | string | User's email address. | src/components/formsteps/PersonalInfo.jsx:23-29 |
phoneNumber | string | User's 10-digit phone number. | src/components/formsteps/PersonalInfo.jsx:33-39 |
address | string | User's street address. | src/components/formsteps/AddressDetails.jsx:17-24 |
city | string | User's city. | src/components/formsteps/AddressDetails.jsx:28-35 |
state | string | User's state. | src/components/formsteps/AddressDetails.jsx:39-46 |
postalCode | string | User's 5 or 6-digit postal code. | src/components/formsteps/AddressDetails.jsx:50-57 |
cardNumber | string | User's 16-digit credit card number. | src/components/formsteps/PaymentInfo.jsx:29-36 |
expiryDateMonth | string | Credit card's expiration month (MM). | src/components/formsteps/PaymentInfo.jsx:42-53 |
expiryDateYear | string | Credit card's expiration year (YYYY). | src/components/formsteps/PaymentInfo.jsx:54-65 |
cvv | string | Credit card's 3-digit CVV. | src/components/formsteps/PaymentInfo.jsx:75-81 |
Sources: src/components/MultiStepForm.jsx:14-27, src/components/formsteps/PersonalInfo.jsx, src/components/formsteps/AddressDetails.jsx, src/components/formsteps/PaymentInfo.jsx
Data Submission Flow
The data submission process is initiated when the user clicks the "SUBMIT" button in the ReviewSubmit component. This action triggers the handleSubmit function in the parent MultiStepForm component. The function then sends the entire formData object to be stored as a new document in the formDetails collection in Firestore.
Sources: src/components/MultiStepForm.jsx:139-159, src/components/formsteps/ReviewSubmit.jsx:53-57
Submission Sequence Diagram
This diagram shows the sequence of events from the user's final action to the data being saved in the database.
This diagram illustrates the flow of the form submission process. Sources: src/components/MultiStepForm.jsx:139-159, src/components/formsteps/ReviewSubmit.jsx:53-57, src/firebase.js:16
Core Submission Logic
The handleSubmit function in MultiStepForm.jsx is responsible for the database write operation. It uses the addDoc and collection functions imported from firebase.js to create the new document.
// src/components/MultiStepForm.jsx:139-159
const handleSubmit = async () => {
setLoading(true);
if (validateStep(step)) {
try {
await addDoc(collection(db, "formDetails"), formData);
toast.success(
<>
<div>Success!</div>
<div>Your details are protected with top-notch security.</div>
</>,
{
autoClose: 5000,
style: {
fontSize: "16px",
},
}
);
} catch (error) {
console.log("error", error);
toast.error("Error submitting form: " + error.message);
} finally {
setLoading(false); // Set loading to false regardless of success or failure
}
}
};
It's important to note that while the ReviewSubmit component displays masked payment information for security, the actual formData object sent to Firestore contains the original, unmasked values. Sources: src/components/MultiStepForm.jsx:139-159, src/components/formsteps/ReviewSubmit.jsx:18, 19
Summary
The application's database architecture is straightforward, leveraging Firebase Firestore to store complete form submissions. A single collection, formDetails, holds documents that correspond one-to-one with each submission. The schema is defined by the formData state within the main form component, ensuring consistency between the application's state and the stored data. All database interactions are channeled through a central handleSubmit function, which writes the data in a single, atomic operation.