Tutorial: Using Firebase as a Realtime Database with React

Here’s a quick and easy way to get started using Firebase as a Realtime Database with your React app (or using my example puppy 🐶 app).

Photo by Tony Trocino on Unsplash

As I’ve been developing a web application that allows bootcamp graduates to anonymously record their job offers (still in progress!), I realized that I knew how to use Firebase for user authentication (thanks to Robin Wieurch’s (super detailed) tutorial) but I was less familiar with how to use Firebase purely as a Realtime Database. Hopefully these steps and the source code can get you moving much quicker than I was initially!

• Let’s begin by setting up our app. We will use create-react-app as a boilerplate. In your terminal, navigate to a directory of your choice and run npx create-react-app my-firebase-puppy-app.
• Next, set up a Firebase project in your browser:

1. Go to https://console.firebase.google.com/

2. Click Add Project

3. Enter a project name, then click continue

4. Select “Default Account for Firebase”, then click Create Project

5. Once the project has been created, in the top left corner, click the gears and then Project Settings

6. At the bottom of the General tab, it says “Your Apps”, select </> (representing a web application)

7. Enter any name for your project then click Register, then click “Continue to Console”

8. Where it says “Firebase SDK Snippet” click “Config” — these are your secrets

• Now, let’s add these secrets to a .env file, and also add the .env file to your .gitignore so the secrets stay secure:

The secrets need to be listed after the words REACT_APP — no quotations or anything

Ex: REACT_APP_API_KEY= fghjk,l,mndmkdnsmala — in your app, this is accessible as process.env.REACT_APP_API_KEY

Please include all the secrets from the config snippet

• Let’s also create our Realtime Database. In the Firebase console, on the menu on the lefthand side, click “Realtime Database”. Then click “create database”. Click next and then “start in test mode”, so we can read and write to the database.
• Now that we have the secrets taken care of, let’s configure Firebase within the app. First thing we have to do is install Firebase. In the terminal, run npm install firebase.
• Let’s use Firebase to create a simple app that lets us list puppies and record their favorite toys. In your code editor, inside of the src folder, create a components folder. Inside the components folder, create a folder for puppies, a folder for toys, and a folder for firebase. In each of those folders create an index.js file.
• In the firebase folder, create 2 more files: firebase.js and context.js. In firebase/firebase.js, set up the app configuration and import firebase/app as well as firebase/database. Now let’s create our Firebase class — this is where we’ll store api routes that will communicate with the Firebase Realtime Database:

• Next, we will use React’s context API to provide Firebase to the highest level of our app — similar to the way we connect a store if you’re familiar with Redux. In firebase/context.js:

• Then we will use our index.js file to export the components. In firebase/index.js:

• Great, now we’re ready to officially hook up our app to our Firebase database. In src/index.js, let’s connect Firebase and change the entry point to be the puppies component (which we haven’t written yet):

• Now let’s set up our components — we want one page that displays the puppies and allows us to add more puppies. Then we want another page that, brings you to a puppy’s toys page where we can view and add toys. This will give us a clear picture of how to add, access, and associate data in our Realtime Database. Create the Puppies (in puppies/index.js) and Toys (in toys/index.js) components (I’ve made these both class components so we can easily load data from firebase when the component mounts):

• In the Puppies component (puppies/index.js), let’s set up a simple form that stores the text input on state. We will soon connect to Firebase and append that data to the database:

• Great! The next thing we need to add to our component is a handleSubmit function, that will store our data in the Firebase Realtime Database. But before we do that, we have to write an API route to communicate with the database! In firebase/firebase.js, outside of the constructor we will write our API routes:

• Now we will write a function in puppies/index.js that will send our data from the state to our Firebase database. Basically we will communicate with Firebase, push the puppy name into the puppies field in the db, and then reset the state:

Now, when you submit a puppy name, you can see it reflected in the realtime database!

• Now that we have the puppies getting stored in the database, let’s load the puppies names onto our component as a list! This will give us good practice accessing data in the database. In puppies/index.js:

This is what our beautiful puppy component looks like in the browser once we’ve added data to Firebase and mapped through that data.

• Looks gorgeous, absolutely gorgeous (lol)! Now we need to follow a similar process for the Toys component! Let’s begin with the backend api. This time, we want to create toys that get associated to one specific puppy. Our APIs in firebase/firebase.js will look like this:

• Now let’s create a simple form in our Toys component that saves the toy name on state. In toys/index.js:

• Let’s connect our components using react routing. In the terminal, run npm install react-router-dom. Now let’s set up the router and the route paths in src/index.js:

• Then in puppies/index.js, import Link from react-router-dom, and wrap the list item text in a link that leads to the toys component:

• Now we can see our Toys component when we click a puppy’s name! Let’s practice writing a submit function that will add toys to the database using the api route we wrote in firebase/firebase.js. Don’t forget to import withFirebase and export the component withFirebase too! In toys/index.js:

This is what the database will look like once you enter a toy name! We have puppies, which stores all the puppy names and ids, and then we have toys, which stores the puppy ids and then the toy ids and the toy names.

• And now let’s access the toys that exist in the database for a specific puppy when the component first mounts and then display the toys in a list. Let’s also add a link that takes you back to the puppies page. In toys/index.js:

• Perfect! Now we can view puppies, add puppies, view all the toys that belong to a puppy, and add toys that belong to a puppy. Now I’ll show you how to delete a toy. In firebase/firebase.js, let’s create a new API route that accesses a toy at toys/puppyId/toyId:

• Next, in toys/index.js, let’s create a function to handle deleting a toy from the db, and create a button inside the mapping function for every toy that will take the toyId and pass it into the delete function, thus deleting from Firebase:

• Yay! Now when you click the x on the toys page, the toy disappears from the list and from the database. Update is also very straightforward. We’ll use the same API route we’ve already written (modifyToy), we’ll simply create a form that lets you update a name, it stores it on state, and then sends the update as an object to the database. In toys/index.js:

Side note: The UI is atrocious, I know! This demo was primarily created to demonstrate the functionality of Firebase in React. You can (and should!) make the design much more user friendly!

The “final” puppies component

The “final” toys component

That’s pretty much it! Now you can create any other APIs you’d like and add/modify/access/remove data from your Firebase Realtime Database! Special shoutout to Robin Wieurch’s (super detailed) tutorial for helping me with general firebase setup (using authentication as well). Highly recommend checking out that tutorial if you’re interested in using Firebase’s authentication and Realtime Database in your app. Anyways, I hope this was helpful for you as you begin setting up a Firebase database on your own! Happy coding!

Here’s a link to the source code if you’d like to see mine or fork it :)