• Start by creating a Firebase project in the Firebase Console.
• Add a web app to your Firebase project and get it registered.
• Copy the Firebase configuration object. You'll need it for your web app.

• You need to include the Firebase SDK in your web app. If you're using a module bundler like Webpack, you can do this with npm. Otherwise, just add script tags in your HTML.

<!-- Use npm -->
npm install firebase

<!-- Or add these script tags in your HTML file -->
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>

• Now, initialize Firebase in your web app using the configuration object you got in Step 1.

// Import the necessary Firebase modules
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

// Firebase configuration object
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

• Use Firestore's transaction method to perform atomic updates. This ensures your data stays consistent.

import { runTransaction, doc } from 'firebase/firestore';

// Create a reference to the document
const docRef = doc(db, 'collectionName', 'documentId');

async function updateDocument() {
  try {
    await runTransaction(db, async (transaction) => {
      const docSnapshot = await transaction.get(docRef);
      if (!docSnapshot.exists()) {
        throw "Document does not exist!";
      }

      // Get the current value of a field (e.g., counter)
      const newValue = docSnapshot.data().field + 1;

      // Update the field with the new value
      transaction.update(docRef, { field: newValue });
    });
    console.log("Transaction successfully committed!");
  } catch (error) {
    console.error("Transaction failed: ", error);
  }
}

• Call the transaction function when you need it in your app logic. For example, you might do this in response to a user clicking a button.

// Example: Call the function when a button is clicked
document.getElementById('updateButton').addEventListener('click', () => {
  updateDocument();
});

• Make sure to include error handling to manage transaction failures and edge cases, like if the document doesn't exist or there are network issues.

async function updateDocument() {
  try {
    await runTransaction(db, async (transaction) => {
      const docSnapshot = await transaction.get(docRef);
      if (!docSnapshot.exists()) {
        throw Error("Document does not exist!");
      }

      const newValue = docSnapshot.data().field + 1;
      transaction.update(docRef, { field: newValue });
    });
    console.log("Transaction successfully committed!");
  } catch (error) {
    if (error.message === "Document does not exist!") {
      console.error("Failed: Document does not exist!");
    } else {
      console.error("Transaction failed: ", error);
    }
  }
}