DEV Community

Cover image for CRUD Operations with Modular Firebase, v9
David Asaolu
David Asaolu

Posted on • Updated on

CRUD Operations with Modular Firebase, v9

Hi there, welcome to this tutorial! 🎉

Today, I will be showing you how to perform super fast CRUD operations with Firebase (version 9) by building a shopping list web application.

The prerequisite for this tutorial is a basic knowledge of React and React hooks.

CRUD means Create, Read, Update and Delete operations.

Also, if this is your first time using Firebase, you don't need to be afraid. We will be going through it together in this tutorial with enough code samples.

Before we begin

These are the required steps you are to take:
🚀 Set up a react-app project UI similar to this.

Shopping list with Firebase v9

🚀 Make sure you sign in to your Gmail account

🚀 Head over to Firebase console

🚀 Click on "Go to Console" at the top navigation bar

🚀 Create a Firebase project

🚀 You can disable Firebase analytics, we don't need it and check the boxes to create the project

🚀 Also, create a Firebase web app, by clicking on the highlighted icon (Web).

Firebase web app creation

🚀 Pick a name for your app, if you are interested in Firebase hosting, check the box for hosting.
modular Firebase v9 project

🚀 Copy the Firebase SDK configuration in the image below, to a "firebase.js" file created in the root of your create-react-app project.

Modular Firebase v9 SDK<br>

🚀 Also, add the following below the copied code in "firebase.js

//At the top
import { getFirestore } from 'firebase/firestore'; 

//Below the import code
const db = getFirestore(firebaseApp);
export default db
Enter fullscreen mode Exit fullscreen mode

🚀 Run the command below to install firebase tools.

npm i -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

🚀 Run the command below in your react project folder, in order to install firebase.

npm i firebase
Enter fullscreen mode Exit fullscreen mode

🚀 Click continue to console

Once you're done completed the steps! We are good to go.
Firebase CRUD operations

CRUD operations with Firebase

Let's quickly go over some of the imported codes above.

When using Firebase as a backend service, the database is called Firestore, and the function getFirestore() is used to access the database.
getFirestore() enables you to create any database of your choice.

Let's go back to the Firebase console

🚀 Click on Build and select Firestore Database to create your database.
Firestore Database

🚀 Create a database in test mode

🚀 Create a Collection "shopping lists" and a string value for the document, because our shopping items are string variables.

🚀 Finally our database has been set up, now let's interact with it from our React app

Modular Firebase Firestore set up

How to Get the List of Shopping Items

Getting the shopping items from Firestore Firebase v9

How to Add Items to our Shopping List when the Save Button is clicked

Adding items to the shopping list from Firestore Firebase v9

How to Delete Items from the list

Deleting items from Firestore Firebase v9

How to Update Items

Updating items from Firestore Firebase v9

Check out the Source Code


🚀 Firebase v9 Documentation

🚀 Firebase v9 CRUD Playlist on Youtube

Hope you enjoyed this tutorial?

Feel free to follow for more interesting and educative posts and also Connect with me on
🚀 Linkedin
🚀 Twitter

Discussion (2)

dhruvangg profile image
Dhruvang Gajjar

How to add pagination? Include pagination in this as well. In the documentation it is not clear.