Building a Lightning-Fast CRUD App with Firebase Realtime Database & React

Introduction

As a frontend developer, all we suffer is to get a backend, as most of the time we don't want to build a full-fledged backend. Firebase is a great saviour for choosing a BAAS (Backend As A Service). Firebase Realtime Database is a cloud-hosted NoSQL database that allows developers to store and sync data in real time. It is a great choice for building applications that require instant updates. In this blog, we will learn how to create a basic CRUD (Create, Read, Update, Delete) application using Firebase Realtime Database and React.

Prerequisites

Before we start, ensure you have the following installed:

• Node.js (latest LTS version)
• npm or yarn
• A Firebase account with a project setup

Step 1: Setting Up Firebase

1. Go to the Firebase Console.
2. Create a new project.
3. Navigate to Build > Realtime Database and click Create Database.
4. Select the location and set the database rules to allow read and write for now:

   {
     "rules": {
       ".read": "true",
       ".write": "true"
     }
   }

1. In Project Settings > General, find your Firebase SDK configuration. Note down the API keys and database URL.

Step 2: Creating a React App

Run the following command to create a new React project using Vite:

npm create vite@latest 
Project name: firebase-crud
framework: react
language: JavaScript
...
cd firebase-crud
npm install firebase

Step 3: Configuring Firebase in React

Inside your React project, create a firebase.js file:

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const firebaseApp = initializeApp(firebaseConfig);
const database = getDatabase(firebaseApp);

export default database;

Step 4: Implementing CRUD Operations for users

Creating a Component

Inside src, create a components folder and add Users.js:

import React, { useState, useEffect } from "react";
import { ref, set, update, remove, onValue } from "firebase/database";
import database from "../firebase";

const Users = () => {
  const [data, setData] = useState({});
  const [name, setName] = useState("");

  useEffect(() => {
    const usersRef = ref(database, "users");
    onValue(usersRef, (snapshot) => {
      setData(snapshot.val() || {});
    });
  }, []);

  const handleCreate = () => {
    const id = Date.now().toString();
    set(ref(database, `users/${id}`), { name });
    setName("");
  };

  const handleUpdate = (id) => {
    update(ref(database, `users/${id}`), { name });
  };

  const handleDelete = (id) => {
    remove(ref(database, `users/${id}`));
  };

  return (
    <div>
      <h2>CRUD with Firebase</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <button onClick={handleCreate}>Add</button>

      <ul>
        {Object.keys(data).map((id) => (
          <li key={id}>
            {data[id].name}
            <button onClick={() => handleUpdate(id)}>Update</button>
            <button onClick={() => handleDelete(id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Users;

Step 5: Rendering the Component

In App.js, import and use CrudOperations:

import React from "react";
import Users from "./components/Users";

function App() {
  return (
    <div className="App">
      <Users />
    </div>
  );
}

export default App;

Step 6: Running the App

Start your React app using:

npm run dev

Conclusion

You have now created a simple CRUD app using Firebase Realtime Database and React! Now you can go to the next step by adding some more functionality where you add more fields for the user and create a user details page maybe. This example can be expanded with authentication, advanced validation, and real-time synchronization for a more robust application. If you like this blog and want to learn more about Frontend Development and Software Engineering you can follow me on Dev.to.