Skip to main content

Firebase

Chapter 1 - Intro​

What is CRUD?​

C : Creating a new user profile or adding a new document
R : Reading / fetching data
U : Updating / Editing data
D : Deleting data

What is Google Firebase?​

A software operated by Google that supports several backend components such as analytics, authentication, databases, file storage, push messaging, and other features. All of these features are hosted in the cloud, and can be easily used by developers.

Chapter 2 - Firebase Project Setup​

To start, we need to set up firebase through Google before we can install it into our app.

1. Go to https://firebase.google.com/
2. Sign in with your google account
3. Click Go to Console
4. Click Create a Firebase Project
5. Enter Project Name
6. Turn off Google Analytics
7. Click Create Project
8. Click </> (web), under get started by adding Firebase to your app,

9. Enter your app name
10. Click Register App
11. Copy second text box, starts with // Import the function you need from the SDKs you need

We now have firebase set up!! Time to add it to our app!

Chapter 3 - Firebase-Config​

1. In your terminal type, npm install firebase
2. Inside src, create a file firebaseConfig.js
3. Paste the code we copied from firebase.
If you need to copy it again, follow these steps

a. From the firebase console, click on your project
b. Under your project name, click on 1 app
c. Click on the setting icons on the right side of the popup
d. Scroll down until you see the code

Chatper 4 - App.jsx​

We have Firebase set up and connected! Let's learn how to implement CRUD!

Step 1: Reference Database​

Above createUser, type const usersCollectionRef = collection(db, "users"); This will create a reference to what database we are using. line1

Step 2: Create​

Inside createUser, type await addDoc(usersCollectionRef, { name: newName, age: Number(newAge)});

This will create a new doc inside usersCollectionRef

line2

Note: all code within a function should be before the reload statement. Otherwise your app will reload before completing the tasks

Step 3: Update​

Inside updateUser, type
const userDoc = doc(db, "users", id)
const newFields = {age: age + 1}
await updateDoc(userDoc, newFields)

This sends the document and updated data to firebase

line3

Step 4: Delete​

Inside deleteUser, type
const userDoc = doc(db, "users", id)
await deleteDoc(userDoc);

Sending that doc to Firestore to delete

line4

Step 5: Read​

Inside getusers, type
const data = await getDocs(usersCollectionRef);
setUsers(data.docs.map((doc) => ({...doc.data(), id:doc.id })));

  • getDocs gets all documents from usersCollectionRef
  • The we loop through each users and sets users array to the document data and id

line5

FAQ / Common Mistakes​

Firebase configuration:

  • Ensure that the file is in the proper place. It should be inside the src folder
  • The Firebase file should be called firebaseConfig.js
  • Check that firebase is installed properly. Use firebase --version to check; if it displays a number you have it installed!

    Install firebase with npm install firebase