CRUD Operations with Modular Firebase, v9
Tags: javascript, webdev, tutorial, react
Published: 2021-11-06 02:26:00

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](https://console.firebase.google.com/), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u38yvpnjog1gunhdk26m.png)

🚀 Make sure you sign in to your Gmail account

🚀 Head over to [Firebase console](https://console.firebase.google.com/)

🚀 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqttgyljj3i6kxnnmgsa.png)

🚀 Pick a name for your app, if you are interested in Firebase hosting, check the box for hosting.
![modular Firebase v9 project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbhtp3iesg45f4rkvn87.png)


🚀 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
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwfeipg4bk5dhiruw0vt.png)

🚀 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(app);
export default db
```

🚀 Run the command below to install firebase tools.
```
npm i -g firebase-tools
```

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

🚀 Click continue to console

Once you're done completed the steps! We are good to go.
<img src="https://media.giphy.com/media/2vqd1nnQVhp8rneZVi/giphy.gif" alt="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](https://firebase.google.com/docs/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrinevbexk31iv4leyn8.png)

🚀 Create a database in test mode

🚀 Create a [Collection](https://firebase.google.com/docs/firestore/data-model#collections) "shopping lists" and a string value for the [document](https://firebase.google.com/docs/firestore/data-model#documents), because our shopping items are string variables.

🚀 Finally our database has been set up, now let's interact with it from our [React app](https://reactjs.org/)

<img src="https://media.giphy.com/media/l3V0dy1zzyjbYTQQM/giphy.gif" alt="Modular Firebase Firestore set up"/>


### How to Get the List of Shopping Items

![Getting the shopping items from Firestore Firebase v9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iq5lhww1t02qsokwdmp.png)

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

![Adding items to the shopping list from Firestore Firebase v9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oco8q8a9e28eb4jbxl7.png)

### How to Delete Items from the list

![Deleting items from Firestore Firebase v9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5tcwfmad5t1oka9p0he.png)

### How to Update Items

![Updating items from Firestore Firebase v9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nseu93audqilubqo3ab8.png)

> Check out the [Source Code](https://github.com/dha-stix/shopping-list)


### REFERENCE:
🚀 [Firebase v9 Documentation](https://modularfirebase.web.app/common-use-cases/firestore/#realtime-listeners)

🚀 Firebase v9 CRUD Playlist on [Youtube](https://www.youtube.com/playlist?list=PLqFvlDFoiZ-2SAX7YXCYtb28K4IooCIlS)

Hope you enjoyed this tutorial? 

[![Buy-me-a-coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1muqbymetstqgepdjjt.png)](https://www.buymeacoffee.com/asaoludavid)

Feel free to follow for more interesting and educative posts and also Connect with me on
🚀 [Linkedin](https://www.linkedin.com/in/david-asaolu234/)
🚀 [Twitter](https://twitter.com/Arshadayvid)