Creating a React App

The main focus here is to use Firebase in the React application that we’ll build together. Firebase enables real-time databases, extensive authentication and authorization, and even deployment. We can build real-world applications with React and Firebase without worrying about implementing the backend of the application. All the things a backend application would handle, like authentication and a database, is handled by Firebase.

To start, sign up on the official Firebase website. After you have created a Firebase account, you should be able to create projects and be granted access to the project dashboard. We’ll begin by creating a project for this application on their platform where the project can have any name. In the case of this application, run it on the free pricing plan. If you want to scale your application later, you can change the plan.

We’ve already learned how to set up Firebase, so we’re good to go.

Project Configuration

Next, find the project’s configuration in the settings on the project’s dashboard. There, we’ll have access to all the necessary information: secrets, keys, ids, and other details to set up our application. We must copy this to our React application.

Sometimes, the Firebase website doesn’t make it easy to find this page. Since it’s moved around with every iteration of the website, there is no concrete way of locating it. However, this is a good opportunity to get familiarized with the Firebase dashboard.

Installing Firebase

Now that we’ve completed the Firebase setup, we can return to our application in the editor/IDE to add the Firebase configuration. First, let’s install Firebase for our application on the command line: