How to Setup the Firebase Account and Connect with your React application

Establishing your account on Firebase and connecting it with your React APP encompasses multiple steps, such as initiating a Firebase project, adjusting your project settings, and acquiring your Firebase configuration details. Below is a comprehensive, step-by-step guide: 

 

Step 1: Go to the Firebase Console 

From this link, you can go to the Firebase console app 

https://console.firebase.google.com/ 

 

Step 2: Sign in or create a Google Account 

If you have a Google account you can directly sign in and  if you don’t have then you need to create one to sign in 

 

Step 3: Create a new Firebase Project 

1. Click on the Create a Project button. 

    

2. Enter a Project name. 

       

And Click on the Continue button. 

3. Enable Google Analytics (Optional) 

       

From here you can enable or disable the Google Analytics option. It is recommended to enable Google Analytics for better insights. 

4. Once you click on the Continue button, firebase will set your project and redirect you to the Project dashboard. 

        

5. Add an app to your project: 

• Click on the Project Settings button and from there you can see the configuration of your project. 

      

 

• Choose the platform for your app (iOS, Android, or Web).    

         

 

• Enter an app nickname (optional) and click on Register app. 

     

 

6. Obtain Firebase configuration details.   

For a web app, Firebase will provide you with a configuration object containing keys like apiKey, authDomain, projectId, etc. Copy this information as you'll need it in your application. 

Step 4: Create database 

For Creating the database, go to the build option and click on the “FireStore Database” option  

 

Once you navigate to Firestore Database, click on “Create database” button. 

 

Step 5: Install the Firebase Package 

After creating your React app, change directory to your project's root folder and install the Firebase package by running: 

npm install firebase 

Step 6: Initialize Firebase in your React APP 

Create a new folder inside your project src directory. You can call this firebase_setup. Next, create a firebase.js file inside that folder. Then paste the code generated earlier into this file. Thus, you can fine-tune the generated code as follows:

import { initializeApp } from "firebase/app"; 
import { getFirestore } from "@firebase/firestore" 
 
const firebaseConfig = { 
  apiKey: process.env.REACT_APP_apiKey, 
  authDomain: process.env.REACT_APP_authDomain, 
  projectId: process.env.REACT_APP_projectId, 
  storageBucket: process.env.REACT_APP_storageBucket, 
  messagingSenderId: process.env.REACT_APP_messagingSenderId, 
  appId: process.env.REACT_APP_appId, 
  measurementId: process.env.REACT_APP_measurementId 
}; 
 
const app = initializeApp(firebaseConfig); 
export const firestore = getFirestore(app) 

 

Step 7: Test Your Firebase Connection 

You can test the connection by submitting dummy data to Firestore. Start by creating a handles folder inside your project's src directory. Create a submit handler inside this file. You can call this handlesubmit.js, for instance: 

import { doc, setDoc } from "@firebase/firestore" 
import { firestore } from "../firebase_setup/firebase" 

const handleSubmit = async(testdata) => { 

const handleSubmit = async(employeeData) => { 
	try {
	   const employeeDocRef = doc(firestore, 'EmployeeDb', 'Employee_tbl');
	   await setDoc(employeeDocRef, employeeData);
	   console.log("Added employee data successfully");
	 }
	catch(e) {
	   console.error("Error adding data employee", e);
	}
}

export default handleSubmit 

//Then inside App.js: 

import './App.css'; 
import handleSubmit from "./handler/handlesubmit.js";
import { useState} from 'react'; 

function App() { 
  const [employee, setEmployee] = useState({
    name: "",
    age: "",
    position: "",
  });

  // Function to handle input changes
  const handleChange = (e) => {
    const { name, value } = e.target;
    setEmployee({ ...employee, [name]: value });
  };

  const submithandler = (e) => {
    e.preventDefault();
    handleSubmit(employee);
  };
  
  return (
    <>
      <div className="form-container" onSubmit={submithandler}>
        <form action="#" >
          <div className="form-group">
          <label >Employee Data:</label>
            <input
              type="text"
              name="name"
              placeholder="Name"
              value={employee.name}
              onChange={handleChange}
            />
            <input
              type="text"
              name="age"
              placeholder="Age"
              value={employee.age}
              onChange={handleChange}
            />
            <input
              type="text"
              name="position"
              placeholder="Position"
              value={employee.position}
              onChange={handleChange}
            />
            <input type="submit" value="Submit" />
          </div>
        </form>
      </div>
    </>
  );
} 
 
export default App; 

 

Run your React app and try submitting data via the form. Refresh the Firebase database console to see the submitted information in your collection. 

When you run your React app it will look like this. Here when you add all the details of the employee and click on the Submit button

Whatever you entered in the form it will be reflected in your Firestore database.

Fantastic! You have effectively established your Firebase account and configured it in your react application.