Firebase Setup

Relevant source files

The following files were used as context for generating this wiki page:

• src/firebase.js
• src/components/MultiStepForm.jsx
• src/components/formsteps/ReviewSubmit.jsx
• package.json
• src/App.js
• src/index.js

This document outlines the integration of Firebase within the react-multi-step-form application. The primary purpose of Firebase in this project is to provide a backend service, specifically using Cloud Firestore, to persist the data submitted through the multi-step form. The setup is self-contained within the client-side React application and does not require a separate server.

The integration covers initializing the Firebase app with project-specific credentials and using Firestore functions to write form data to a collection. The main interaction with Firebase occurs upon the final submission step of the form.

Architecture Overview

The Firebase integration is straightforward. The application initializes a connection to a Firebase project and its Firestore database. When a user completes all the steps of the form and clicks the final submit button, the collected data is sent to a Firestore collection named formDetails.

Dependencies

The project relies on the firebase npm package to interact with Firebase services.

Dependency	Version	Purpose
firebase	^10.12.5	Provides Firebase SDK for web apps.

Sources: package.json:8

Initialization

Firebase is configured and initialized in a dedicated file, src/firebase.js. This file contains the project-specific configuration and exports the initialized Firestore database instance (db) for use in other parts of the application.

The following diagram illustrates the initialization flow.

This diagram shows the sequence from app startup to the MultiStepForm component gaining access to the Firestore instance.
Sources: src/firebase.js, src/components/MultiStepForm.jsx:9

Configuration

The firebaseConfig object contains all the necessary credentials to connect to the specific Firebase project.

Key	Description
apiKey	The API key for the Firebase project.
authDomain	The authentication domain.
projectId	The unique ID for the Firebase project.
storageBucket	The Cloud Storage bucket.
messagingSenderId	The sender ID for Cloud Messaging.
appId	The unique ID for the web application.

Sources: src/firebase.js:4-11

The initialization code is as follows:

// src/firebase.js:1-16
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc } from 'firebase/firestore';

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);

export { db, collection, addDoc };

This snippet shows the configuration object and the initialization of both the Firebase app and the Firestore service. The file also re-exports collection and addDoc functions from the Firebase SDK for convenient use.
Sources: src/firebase.js:1-16

Data Submission Flow

The core Firebase functionality is triggered within the MultiStepForm component, which is the main stateful component for the form. The data submission is handled by the handleSubmit asynchronous function.

Sources: src/components/MultiStepForm.jsx, src/App.js:5-11

Submission Sequence

The submission process begins when the user clicks the "SUBMIT" button in the ReviewSubmit component. This action calls the handleSubmit function passed down from MultiStepForm.

The following sequence diagram details the interaction:

This diagram shows the user action initiating a call to handleSubmit, which then uses the addDoc function to save the form data to the formDetails collection in Firestore.
Sources: src/components/MultiStepForm.jsx:128-148, src/components/formsteps/ReviewSubmit.jsx:60-65

handleSubmit Function

The handleSubmit function in MultiStepForm.jsx is responsible for the final data persistence.

// src/components/MultiStepForm.jsx:128-148
  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
      }
    }
  };

Key steps in this function:

1. Sets a loading state to true.
2. Performs a final validation of the current step's data.
3. Calls addDoc with a reference to the formDetails collection and the formData object.
4. Displays a success or error notification using react-toastify.
5. Sets the loading state back to false in the finally block.

Sources: src/components/MultiStepForm.jsx:128-148

Firestore Data Model

The data is stored in a Firestore collection named formDetails. Each form submission creates a new document in this collection with an auto-generated ID. The structure of the document corresponds to the formData state object in the MultiStepForm component.

formDetails Collection

The diagram below represents the entity and its attributes stored in Firestore.

This ER diagram shows the fields of a document within the formDetails collection.
Sources: src/components/MultiStepForm.jsx:13-26

Data Fields

The table below details each field stored in a formDetails document.

Field	Type	Description	Source Component
name	string	User's full name.	PersonalInfo.jsx
email	string	User's email address.	PersonalInfo.jsx
phoneNumber	string	User's 10-digit phone number.	PersonalInfo.jsx
address	string	User's street address.	AddressDetails.jsx
city	string	User's city.	AddressDetails.jsx
state	string	User's state.	AddressDetails.jsx
postalCode	string	User's 5 or 6-digit postal code.	AddressDetails.jsx
cardNumber	string	User's 16-digit credit card number.	PaymentInfo.jsx
expiryDateMonth	string	Card's expiration month (MM).	PaymentInfo.jsx
expiryDateYear	string	Card's expiration year (YYYY).	PaymentInfo.jsx
cvv	string	Card's 3-digit CVV code.	PaymentInfo.jsx

Sources: src/components/MultiStepForm.jsx:13-26, src/components/formsteps/PersonalInfo.jsx, src/components/formsteps/AddressDetails.jsx, src/components/formsteps/PaymentInfo.jsx

Summary

The Firebase setup in this application provides a robust and simple mechanism for data persistence. By leveraging Firebase SDK v10 and Cloud Firestore, the application can store user-submitted form data without a custom backend. The implementation is centralized, with initialization in src/firebase.js and the core write logic in the MultiStepForm component, making it easy to manage and understand. The application is rendered via App.js and mounted to the DOM in index.js.

Sources: src/firebase.js, src/components/MultiStepForm.jsx, src/App.js, src/index.js:8-12