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.
🚀 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).
🚀 Pick a name for your app, if you are interested in Firebase hosting, check the box for hosting.
🚀 Copy the Firebase SDK configuration in the image below, to a "firebase.js" file created in the root of your create-react-app project.
🚀 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.
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.
🚀 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
How to Get the List of Shopping Items
How to Add Items to our Shopping List when the Save Button is clicked
How to Delete Items from the list
How to Update Items
Check out the Source Code
REFERENCE:
🚀 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
Top comments (1)
How to add pagination? Include pagination in this as well. In the documentation it is not clear.