Mastering Firebase: A Comprehensive Guide to CRUD Operations
Published: 2024-03-07 22:14:32






**Firebase**, a well-known backend platform, is widely utilized for building **Serverless** or **Headless** web and mobile applications. This discussion will delve into executing comprehensive **CRUD** (Create, Read, Update, Delete) operations within Firebase. CRUD operations serve as fundamental **building blocks** for both web and mobile applications. To initiate this process, create a new project in the [Firebase Console](https://firebase.google.com/). Subsequently, follow these steps for coding:

1. **Firebase configuration file setup**

```
import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";


const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  projectId: "Project_ID",
  storageBucket: "Storage_Bucket",
  messagingSenderId: "Messaging_sender_ID",
  appId: "App_ID",
  measurementId: "Measurement_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);


// const analytics = getAnalytics(app);
export const db = getFirestore(app);
```
**Note:** Please replace all fields in the Firebase configuration file with the corresponding configuration values from your Firebase console.

2. **Add document to Firestore**

```
import React, { useState } from "react";
import { dataBase } from "../FireBase/Firebase.config";
import { db } from "../FireBase/Firebase.config";
import {
  collection,
  addDoc,
  updateDoc,
  deleteDoc,
  getDoc,
  getDocs,
} from "firebase/firestore";
export default function AddBook() {
  const [bookName, setBookName] = useState("");
  const [price, setPrice] = useState("");
  const [currency, setCurrency] = useState("");

  async function addBook(e) {
    e.preventDefault();
    
    try {
        const booksCollection = collection(db, "books");
        const bookData = {bookName, price, currency}
      const querySnapshot = await addDoc(booksCollection, bookData);
      console.log(querySnapshot)
    } catch (error) {
      console.log(`There was an error in adding book: ${error}`);
    }
  }
  return (
    <div>
      <form onSubmit={addBook} className="addBookForm">
        <label htmlFor="book name">Book Name</label>
        <input
          type="text"
          name="book name"
          placeholder="Enter Book Name"
          onChange={(e) => setBookName(e.target.value)}
        />
        <label htmlFor="price">Price</label>
        <input
          type="text"
          name="price"
          placeholder="Enter Price"
          onChange={(e) => setPrice(e.target.value)}
        />
        <label htmlFor="currency">Currency</label>
        <input
          type="text"
          placeholder="USD, GBP, etc,."
          onChange={(e) => setCurrency(e.target.value)}
        />

        <input type="submit" value="Add Book" />
      </form>
    </div>
  );
}
```
In this code snippet, we’re employing a book example to illustrate how to interact with a Firestore database collection. It’s important to note that Firestore automatically generates the collection if it doesn’t already exist in the database, similar to the behavior of MongoDB. Additionally, Firestore is a NoSQL database, meaning it can dynamically create fields within documents if they don’t already exist. NoSQL databases are known for their ability to scale vertically.

3. **Get all documents from the Firebase collection**

```
//get all
  async function getCollection() {
    try {
      const booksCollection = collection(db, "books");
      const data = await getDocs(booksCollection);

      setBooksData(data.docs);
    } catch (error) {
      console.log(
        `There was an error fetching the data in firestore: ${error}`
      );
    }
  }
4. **Get the Document by ID and Update it**

 const[ selectedBook, setSelectedBook] = useState(null);
  //Get Document By ID
  const GetDocById = async (id) => {
    try {
      const booksCollection = collection(db, "books");
      const singleBook = doc(booksCollection, id);
      const response = await getDoc(singleBook);
      const data = response.data();
      setSelectedBook({data:data, id:id})
      setDisplay({display:'block'})
    } catch (error) {
      console.log(`Error in updateDocument: ${error}`)
    }
  
  };

//update form
 const setDocument = async(id)=>{
    try {
      const booksCollection = collection(db, 'books');
      const bookRef = doc(booksCollection, id);
      
      const selectedBook = {
        bookName,
        price,
        currency
      }
     await updateDoc(bookRef, selectedBook);
     setDisplay({display:'none'})
    } catch (error) {
      console.log(`Error in setDocument: ${error}`)
    }
  }

```
5. **Delete the Firebase document by its id**

```
//delete
  const deleteDocument = async (id) => {
    const booksCollection = collection(db, "books");
    const docRef = doc(booksCollection, id);
    await deleteDoc(docRef);
  };
```
**Note:** Providing the collection reference is essential for executing operations successfully. When working with a single document, it’s imperative to have its corresponding ID, which will be derived from the associated button. The buttons required for these operations are outlined below:

             <button
                    className="deleteDoc"
                    onClick={() => {
                      deleteDocument(e.id);
                    }}
                  >
                    Delete
                  </button>
                  <button
                    className="updateDoc"
                    onClick={() => {
                      updateDocument(e.id);
                    }}
                    onBlur={()=>setDisplay({display:'none'})}
                  >
                    Update
               </button>
**Thank you** for taking the time to read the article. I hope you found it helpful and informative. If you have any further questions or need assistance, please **feel free to ask**.

Regards,
**Muhammad Ammar Ibne Saif**