In this guide, we shall explore Firebase in detail, covering core functionalities, advantages and use cases.

What is Firebase?

Firebase is a cloud-based platform that offers tools for AI, Analytics, Building, and Running your web and mobile applications. It provides a serverless architecture, meaning developers don’t have to worry about managing servers or backend logic manually.

Below is a breakdown of the tools provided by Firebase:

Tools for Building

1. Firebase Authentication

Firebase Authentication is a backend authentication service that helps developers add user authentication to their web and mobile apps. It provides easy-to-use SDKs, ready-made UI libraries and offers a wide variety of authentications methods including:

• Email & Password Authentication — Users sign-in with email and password credentials.

• Federated Identity Providers — Supports Google, Facebook, GitHub, Apple, SAML, Twitter and OpenID Connect.

• Anonymous Authentication — Allows users to use an app without signing in, with an option of upgrade later.

• Custom Authentication — Integrates with existing authentication systems.

2. App Check

App Check protects your application and backends from abuse by ensuring that incoming traffic is from legitimate instances of your application.

3. Cloud Storage for Firebase

Cloud Storage for Firebase is a powerful, simple and cost-effective cloud-based object(file) storage solution that allows developers to store and serve user generated content such as images, videos and other files securely.

The Firebase Admin SDK can be used to manage storage buckets, create download URLs and use Google Cloud Storage APIs to access files.

4. Firebase Realtime Database

Firebase Realtime Database is a NoSQL cloud-based database in which data is stored in JSON format. With Realtime database, data across all your client applications and the server is synchronized in real-time and all apps automatically receive updates with the newest data.

It is as well recommended to try Cloud Firestore for modern applications requiring richer data models, query-ability, scalability and higher availability.

Realtime Database has got capabilities that include: realtime data synchronization, offline data management, accessibility from various client devices, scalability across multiple databases, among others.

5. Cloud Firestore

Cloud Firestore is a scalable and flexible NoSQL database built on Google Cloud infrastructure. Cloud Firestore provides real-time synchronization and offline support for mobile, web and server development. Similar to Firebase Realtime Database, it keeps your data synchronized across clients apps using realtime listeners.

Cloud Firestore has got capabilities that include: seamless integration with other Firebase and Google Products, supports flexible hierarchical data structures, enables performing of robust queries, it is designed to scale, among others.

6. Firebase Hosting

Firebase Hosting is a production-grade web hosting service for developers to deploy web apps quickly and securely.

7. App Hosting

Firebase App Hosting enables hosting for full-stack and dynamic applications seamlessly. It supports frameworks such as Next.js and Angular which can be automatically be deployed through GitHub actions.

8. Firebase Data Connect

Firebase Data Connect is a relational database solution that helps you build and scale mobile and web apps using a fully managed PostgreSQL database powered by Cloud SQL.

9. Firebase Extensions

Firebase Extensions are pre-packaged solutions that automate common development tasks such as integrating third-party services and managing payments. With Firebase Extensions, you deploy functionality to your app quickly.

10. Cloud Functions for Firebase

Cloud Functions for Firebase is a serverless computing solution that allows developers to run backend code in response to events triggered by background events and HTTPS requests.

11. Emulator Suite

Firebase Emulator Suite is a set of advanced tools that provide local emulation of Firebase services, allowing developers to test their applications in a sandbox environment before deploying them to production.

Tools for Engaging

1. Google Analytics for Firebase

Google Analytics for Firebase allows you to collect detailed data on user behavior, demographics, events and more. This solution is ideal when one needs to understand how users interact with the app, tracking in-app events, and making data driven decisions.

2. Firebase Remote Config

Sometimes, you will want to modify your client app or server’s behavior and appearance remote, without releasing an update, in such situations, Firebase Remote Config will be the answer. It enables you to change features, layouts, or text dynamically in your app without requiring an app update.

3. Firebase A/B Testing

Firebase A/B Testing helps you test different variations of your app to understand what works best for user engagement and retention. Firebase A/B Testing comes in handy if you want to optimize features, UI elements, or app performance by testing different versions and gathering data on what performs best.

4. Firebase Cloud Messaging (FCM)

Firebase Cloud Messaging (FCM) allows you to send notification messages to users thus driving user engagement and retention. It is perfect for sending push notifications, reminders or other in-app messages.

5. Firebase In-App Messaging

Firebase In-App Messaging helps you to send targeted, contextually relevant messages within the app that encourage app exploration and discovery. It can be used when you want to deliver realtime, in-app messages to users to encourage actions like completing a profile, completing an order, etc.

Tools for Releasing and Monitoring

1. App Distribution

Firebase App Distribution is a tool for distributing you app to beta testers and collaborators before releasing it to the public.

2. Firebase Crashlytics

Firebase Crashlytics enables you to achieve realtime crash and error reporting to track and fix app crashes, improve stability and enhance user experience. Firebase Crashlytics can be used to identify and troubleshoot app crashes, allowing you to prioritize fixing bugs and ensuring smoother user experiences.

3. Firebase Performance Monitoring

Firebase Performance monitoring helps you to monitor your app’s performance by tracking metrics like app startup time, network requests, and slow views. It can be used to ensure optimal app performance, diagnose issues like slow load times, and improve user experience by resolving performance bottleneck

4. Test Lab

Test Lab is cloud-based automated app testing environment that lets you test your application on a variety of real devices and configurations in order to gain insight on how it will perform with real users. Test Lab enables you to identify issues before release thus ensuring that your app functions as expected across different devices and OS versions.

Tools for AI

1. Firebase Genkit

Genkit is Firebase’s open-source TypeScript toolkit that helps developers integrate generative AI capabilities into their applications. Firebase Genkit offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more. Thereby, making it easy to build with a streamlined APIs for multimodal content generation, structured data generation, tool calling, human-in-the-loop, and other advanced capabilities.

Use Cases: AI chatbots, automated content generation, recommendation systems, workflow automations, intelligent agents, intelligent search systems and many others.

2. Vertex AI in Firebase

Vertex AI in Firebase bridges the gap between your mobile or web application and direct integration with Vertex AI Gemini API or Imagen API. Vertex AI in Firebase SDKs offer security options against unauthorized, seamless integration with other Firebase services and thereby, enabling developers to build AI-powered mobile and web apps and features with the Gemini and Imagen models.

Use Cases: AI chatbots, Predictive analytics, recommendation engines, fraud detection, automated image classification and many others.

3. Firebase Machine Learning

Firebase Machine Learning (Firebase ML) is a mobile SDK that enables developers to integrate machine learning capabilities into their apps (Android and Apple), whether using Google’s cloud-based models or custom TensorFlow Lite models for on-device inference.

Use Cases: Personalized AI Assistants, smart document processing, image-based search and recognition, voice and language translation, among others.

Why Use Firebase?

Firebase is popular among developers due to its ease of use, scalability, and real-time data handling capabilities.

Here are some reasons why Firebase is a great choice;

• Fast Development: No need to build backend services from scratch. Firebase provides pre-configured solutions that can be quickly and easily set up.

• Real-time Synchronization: Firebase databases sync data instantly across devices.

• Cross-Platform Support: Works seamlessly for Web, Android, and IOS applications.

• Scalability: Firebase is built on Google Cloud, making it suitable for small and large applications alike.

• Security: Google-backed authentication and data security features.

• Serverless Functions: Cloud Functions allow backend logic execution without server management.

Conclusion

Firebase is an excellent all-in-one web and mobile application development solution for building, monitoring, testing and engaging with your users. Whether you’re building a small project or a large-scale application, Firebase provides scalable, real-time, and secure backend services. Further more, Firebase integrates seamlessly with a couple of Google products such as Google Cloud, Google Analytics, among others, making it a powerful solution for scalable and secure applications.

References

https://firebase.google.com/

https://firebase.google.com/docs

On 7th March, 2025, a new release, v1.0.7 was published. With the release of v1.0.7, the library introduces new react hooks. In this post, we'll explore what's new in v1.0.7, how to set up the library in a React project, and practical usage examples.

What’s New in v1.0.7?

We've added more hooks for react, making it easier to manage data insertions, updates and deletion operations to Cloud Firestore. The new hooks include:

• useAddDocumentMutation : Add a new document to specified CollectionReference with the given data, assigning it a document ID automatically.

• useUpdateDocumentMutation : Updates fields in the document referred to by the specified DocumentReference. The update will fail if applied to a document that does not exist.

• useSetDocumentMutation : Writes to the document referred to by this DocumentReference. If the document does not yet exist, it will be created.

Getting Started with TanStack Query Firebase in React

1. Install Dependencies

To use TanStack Query Firebase, install the required packages:

npm install @tanstack/react-query firebase @tanstack/query-firebase/react

2. Setup Firebase and TanStack Query

Configure Firebase in your project:

import { getApps, initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

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

const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
export const db = getFirestore(firebaseApp);

Now, wrap your app with QueryClientProvider:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

export default App;

Using TanStack Query Firebase v1.0.7 in React

Mutating Firestore Data

import { useSetDocumentMutation } from "@tanstack-query-firebase/react/firestore";
import { collection, doc } from "firebase/firestore";
import { db } from "./firebase";
import { useState } from "react";

type Expense = {
  amount: number;
  category: string;
  date: string;
  description: string;
};

export default function CreateExpense() {
    const createExpenseMutation = useSetDocumentMutation(doc(collection(db, "expenses")));

  const [expense, setExpense] = useState<Expense>({
    amount: 0,
    category: "",
    date: "",
    description: "",
  });

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
    setExpense({ ...expense, [e.target.name]: e.target.value });
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    try {
      await createExpenseMutation.mutate(expense);
      setExpense({
        amount: 0,
        category: "",
        date: "",
        description: "",
      });
    } catch (error) {
       console.error("Error adding expense:", error);
    }
  }
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <input
            name="amount"
            value={expense.amount}
            onChange={handleChange}
            type="number"
            required
          />
        </div>
        <div>
          <select
            value={expense.category}
            onChange={handleChange}
            name="category"
            required
          >
            <option value={""}>Select Category</option>
            <option value={"food"}>Food</option>
            <option value={"transport"}>Transport</option>
            <option value={"internet"}>Internet</option>
          </select>
        </div>
        <div>
          <input
            name="date"
            value={expense.date}
            onChange={handleChange}
            type="date"
            required
          />
        </div>
        <div>
          <input
            name="description"
            value={expense.description}
            onChange={handleChange}
            type="text"
            required
          />
        </div>
        <button type="submit">
          {createExpenseMutation.isPending ? "Submitting" : "Submit"}
        </button>
      </form>
    </div>
  );
};

Conclusion

TanStack Query Firebase v1.0.7 brings react hooks to super charge your Firebase applications.

By leveraging TanStack Query Firebase, you get a declarative, efficient, and scalable way to manage real-time data fetching and mutations in your frontend apps.

🚀 Give it a try and upgrade your Firebase queries and mutations with TanStack Query Firebase!

References

https://invertase.docs.page/tanstack-query-firebase

https://firebase.google.com/

To fully understand imports, we must first understand exports and how Node.js resolves modules. Let’s dive right in.

Exports — How modules define what can be imported

Originally, JavaScript code in Node.js was packaged using CommonJS modules.

Node.js considers each file as a separate module.

For instance, if you had a file called index.js with the following contents;

const articles = require("./article.js")

const text = "This is an article i wrote about the Node.js module resolution algorithm."
const title = "What Happens When You Import Anything in Node.js?"

console.log("The word count of the article is: ${article.wordCount(text)}")
console.log("The length of the title is ${article.titleLength(title)}")

First off index.js loads the module article.js that is located in a directory relative to itself. The contents of article.js are as below;

function wordCount(text) {
    return text.split(/\s+/).length;  // Splitting text into words and counting them
}

function titleLength(title) {
    return title.length;  // Returning the length of the title string
}

// Exporting the functions
exports.wordCount = wordCount;
exports.titleLength = titleLength;

The module article.js exports the functions wordCount() and titleLength().

But, Node.js also supports ECMAScript standard which is supported by web browsers and other JavaScript runtimes. According to Node.js Documentation, ECMAScript modules are the official standard format to package JavaScript code for reuse. Modules are defined using a variety of import and export statements.

A module needs to export something before it can be imported.

Node.js as well allows modules to explicitely define exports in package.json as seen below;

{
    "name": "my-package",
    "exports": {
            "./publications": "./article.js"
        }
}

In the above package.json file, the exports defines what is exposed by the module. This can be handy when one needs to prevent unintended access to internal files.

The functions from module article.js can now be imported as below;

import { wordCount, titleLength } from "my-package/publications"

const text = "This is an article i wrote about the Node.js module resolution algorithm."
const title = "What Happens When You Import Anything in Node.js?"

console.log("The word count of the article is: ${wordCount(text)}")
console.log("The length of the title is ${titleLength(title)}")

The Resolution Algorithm — How Node.js Resolves Imports

Node.js executes a strict procedure which is the resolution algorithm in order to check if some-module exists and if it does, where it is located in the file system. Several checks and tests are performed before a deduction is made.

Whenever you write;

import { anything } from "some-module"

The checks made are made for;

• Core modules

• Relative modules

• NPM packages

• Directories

• Alias Modules

Check 1: Is It A Core Module?

Node.js core modules are a set of modules which you can use off-the-self without manual installation.

Some core modules include; fs, dns, events, os, path, url, util, stream, and so many more….

Node.js will first check if the import matches one of the inbuilt modules.

import fs from "fs" // Core Module

If its a core module, it will immediately get loaded.

Check 2: Is It A Relative Module?

Secondly, Node.js will check if the module name starts with /, ./, or ../. If it does, then the proceeding content will be treated as a file path and search for the module location with commence.

import { anything } from "/some-module"
import { something } from "./some-module"
import { things } from "../some-module"

If the module name starts with /, a search at the root of the file system will be made.

If the module name starts with ./ or ../ , a search will be made relative to the location of the current file.

Check 3: Is It An NPM Package?

This check search through node_modules.

If a module is not a core module and neither a relative module, Node.js will assume it a package installed from npm registry and will commence a search through the node_modules directory.

import { useDocumentQuery } from "@tanstack-query-firebase/react" // Searches node_modules for @tanstack-query-firebase

Node.js will check if node_modules/@tanstack-query-firebase/react/package.json exists.

If the node_modules/@tanstack-query-firebase/react/package.json exists, a check if there exists an exports field in the package.json . If exists, what is exposed by the export will be resolved.

{
    "name": "my-package",
    "exports": {
            "./publications": "./article.js"
        }
}

If the node_modules/@tanstack-query-firebase/react/package.json exists, and doesn’t have an exports field in the package.json. The main field will them be considered and its value will be resolved.

{
    "name": "my-package",
    "main": "./article.js"
}

In the event that a main field doesn’t exist in the package.json, an available index.js or index.mjs file will be considered.

If @tanstack-query-firebase is not found at the current directory level, Node.js will move subsequent levels upwards the file system while checking for it.

 ./node_modules/@tanstack-query-firebase  
../node_modules/@tanstack-query-firebase  
../../node_modules/@tanstack-query-firebase

Packages installed at the root of your file system are ideally be available to all Node.js apps on your system.

Check 4: Is It A Directory?

If the import refers to a directory, Node.js will search for a package.json file in that directory. In the package.json, a main field as an entry will be looked out for.

import utils from "./utils"

If a package.json doesn’t exist, an index.js or index.mjs will be searched.

./utils/package.json (looks for "main" field)  
./utils/index.js  
./utils/index.mjs

Check 5: Additional Checks and Considerations

Additionally, Node.js will check for an ESM vs CommonJS Compatibility.

If you import an ESM (.mjs) module into a CommonJS (.cjs) file, or vice versa, Node.js may throw an error.

// CommonJS (require)
const package = require('some-esm-module'); // Error if it's an ESM package

To avoid conflicts, ensure your package.json has:

{
  "type": "module"
}

or explicitly use .mjs or .cjs extensions.

Conclusion

The Node.js Resolution Algorithm gives insight into what happens under the hood, every time we import anything in Node.js.

References

https://nodejs.org/api/packages.html#exports

https://nodejs.org/api/modules.html#modules-commonjs-modules

https://nodejs.org/api/esm.html#modules-ecmascript-modules

🔥 What’s New in v1.0.6?

1. Expanded Authentication Hooks

We've added more hooks to streamline authentication workflows, making it easier to manage user sessions, authentication states, and Firebase auth operations. The new hooks include:

• useApplyActionCodeMutation: Applies a verification code sent to the user by email or other out-of-band mechanism.

• useCheckActionCodeMutation : Checks a verification code sent to the user by email or other out-of-band mechanism.

• useCreateUserWithEmailAndPasswordMutation: Creates a new user account associated with the specified email address and password.

• useConfirmPasswordResetMutation: Sends a password reset email to the given email address.

• useRevokeAccessTokenMutation: Revokes the given access token. Currently only supports Apple OAuth access tokens.

• useGetRedirectResultQuery: Gets a UserCredential from the redirect-based sign-in flow.

These hooks integrate seamlessly provide a bunch of features out of the box, ensuring that authentication state remains fresh and efficient.

2. Expanded Firestore Hooks

Firestore is at the heart of many Firebase applications, and v1.0.6 enhances Firestore support with additional hooks:

• useEnableNetworkMutation: Re-enables use of the network for a given Firestore instance after a prior disable network call.

• useNamedQuery: Reads a Firestore Query from local cache, identified by the given name.

• useDeleteDocumentMutation: Deletes the document referred to by the specified DocumentReference.

These hooks simplify Firestore integration, allowing you to focus on building reactive and performant apps without worrying about state management.

📦 Installation

To upgrade or install @tanstack-query-firebase/react v1.0.6, run:

npm i @tanstack-query-firebase/react@latest

or with Yarn:

yarn add @tanstack-query-firebase/react@latest

or with pnpm:

pnpm i @tanstack-query-firebase/react@latest

🎯 Get Started Today!

References:

https://invertase.docs.page/tanstack-query-firebase

https://firebase.google.com/

In this guide, we are going to build a real-time tracker app with TanStack Query Firebase. This app will allow users to:

• Add, edit and delete expenses.

• Categorize expenses (Food, Rent, Travel, etc)

• View reports and with total expenses.

• Sync data in real-time with Firebase.

By the end of this tutorial, we shall a fully functional real-time expense tracker 🔥

Let’s jump right in 🚀

Step 1: Setting Up the project.

First, we are going to create a react app and install the necessary dependencies.

pnpm create vite realtime-expense-tracker-app

On running the above command, select the framework as React and variant as Typescript. The following files will then get added into your current directory.

Next, we shall install TanStack Query Firebase, Firebase and TanStack Query.

pnpm install @tanstack-query-firebase/react firebase @tanstack/react-query

Step 2: Configure Firebase

Go to the firebase console, create a project with the name realtime-expense-tracker-app and once created you will see screen below.

While in the firebase console, expand the Build option on the side menu and locate Firestore Database. When the Firestore Database option is clicked, you will see an action Create database, click it, follow the prompts, and your database will get created. You should now be able to see a screen as below.

Now, we need to register an app into our firebase project. To achieve this, we shall go the Project Settings. We shall then register our web app and the firebase config values will be availed.

Back in our project directory, we shall create a .env file to store our environment variables. Replace the placeholder values with the actual values of the firebase config above.

  VITE_FIREBASE_API_KEY="your-firebase-apiKey"
  VITE_FIREBASE_AUTH_DOMAIN="your-firebase-authDomain"
  VITE_FIREBASE_PROJECT_ID="your-firebase-projectId"
  VITE_FIREBASE_STORAGE_BUCKET="your-firebase-storageBucket"
  VITE_FIREBASE_MESSAGING_SENDER_ID="your-firebase-messagingSenderId"
  VITE_FIREBASE_APP_ID="your-firebase-appId"

Step 3: Initialize Firebase and TanStack Query

While in src/main.tsx, we are going to initialize Firebase and setup TanStack Query as seen below;

Step 4: Creating Expenses List Component

Now let’s create a file src/components/expenses-list.tsx in which we are going to setup a component to fetch and display the expenses using TanStack Query Firebase.

To achieve retrieval of data from our Firestore Database, we are going to use the useCollectionQuery hook from TanStack Query Firebase.

References

https://github.com/HassanBahati/tanstack-query-firebase-examples/tree/main/react/realtime-expense-tracker-app

Getting Started

In this guide, we are going to create a react app that leverages useConnectQuery and useConnectMutation from TanStack Query Firebase to perform CRUD operations to Firebase Data Connect.

Let’s jump right in!

Step 1: Bootstrapping the app.

Firstly, we are going to setup a react app using vite. To achieve this, we are going to run the command below.

pnpm create vite firebase-dataconnect-movies

On running the above command, we shall follow through the prompts and select React with Typescript options and a project will be scaffolded and will have the files as below.

Open your terminal and while at the project root, run pnpm install to install dependencies.

Once the dependencies are successfully installed, run pnpm dev and a link will be availed through which you can view the project in your browser. This will look as below;

With that, we have successfully scaffolded our react application.

Step 2: Generating Data Connect SDK for our application.

Firebase Data Connect uses GraphQL for data modeling and definition of CRUD operations. With Firebase Data Connect and GraphQL, we are going to define schemas, queries and mutations, Data Connect will automatically generate custom SDKs for usage in the client logic.

Firstly, ensure that you have the Firebase Data Connect for VSCode Extension installed. On clicking the Firebase Data Connect Extension icon, you will see a screen as below;

Here, we shall go ahead and click the Run firebase init button which will start a couple prompts in our terminal. The very first option will be to use an existing project or create new project, for which we shall select create new project and any name of your choice and in our case we are going to use fdc-movies-app. There after a firebase project will be created.

You will then be asked what connector should be setup for a generated SDK for, we shall select firebase-dataconnect-movies/default which is the suggested default option.

When all the above are successfully completed, you would have gone through the prompts as below;

You can proceed to click enter and the current initialization terminal will close automatically.

At this point, in sidebar under the Firebase Data Connect Extension, you will have the following options

It is also important to note that a couple of files have also been generated into our project as below;

• .firebase - folder

• dataconnect - folder

• dataconnect-generated - folder

• .firebaserc - file

• firebase.json - file

We now need to go into the dataconnect folder and uncomment all the contents of the mutations.gql, queries.gql and schema.gql files. All code in those files is initially commented out. After uncommenting, these will look as below;

At this point, the generation of the Data Connect SDK is complete and it is currently connected to your application.

Since we are going to be testing locally, we shall need to start the emulators by clicking the Start emulators button under Firebase Data Connect Extension. On clicking this button, the emulators will and the extension will show as below;

Step 3: Initialization of Firebase and TanStack Query.

In Step 2, we did create a firebase project called fdc-movies-app. When we head over to the firebase console, we should be able to find our project listed.

While in our project, we shall need to register an app. We are going to register a web app and we shall do that by selecting the Web option. We shall proceed to register our app with a name of our choice which could be fdc-movies-app and then the Firebase SDK config object will be availed as below;

We shall then head over to our project and add a .env file to store our environment variables and replace the placeholder values with the actual values from the above firebaseConfig object. Please note all these will be prefixed with VITE_ since we are using Vite.

  VITE_FIREBASE_API_KEY="your-firebase-apiKey"
  VITE_FIREBASE_AUTH_DOMAIN="your-firebase-authDomain"
  VITE_FIREBASE_PROJECT_ID="your-firebase-projectId"
  VITE_FIREBASE_STORAGE_BUCKET="your-firebase-storageBucket"
  VITE_FIREBASE_MESSAGING_SENDER_ID="your-firebase-messagingSenderId"
  VITE_FIREBASE_APP_ID="your-firebase-appId"

Next, we are going to install the firebase and @tanstack/react-query packages using the commands below;

pnpm i firebase @tanstack/react-query

We are then going to modify our src/main.tsx so as to initialize a firebase app and initialize a Data Connect emulator connection as seen below;

Step 4: CRUD operations with useConnectMutation and useConnectQuery

useConnectMutation and useConnectQuery are hooks availed by TanStack Query Firebase. useConnectMutation enables you to perform create, update and delete operations while useConnectQuery enables you to read/retrieve data records stored in your database.

To get started with TanStack Query Firebase, we shall install the library using the following command.

pnpm i @tanstack-query-firebase/react

We are going to use the useConnectQuery hook to fetch the movies data as seen below. This will be done in the src/App.tsx file.

import "./App.css";
import {useConnectQuery} from "@tanstack-query-firebase/react";
import {listMoviesRef} from "@firebasegen/default-connector";

function App() {
  const { data, isLoading, isSuccess, isError } = useConnectQuery(listMoviesRef());

return(
       <div>
          {isLoading && <p>Loading...</p>}
          {isError && <p>Sorry, an error occurred.</p>}
          {isSuccess && data.movies.length > 0 ? (
            <div className="movies-grid">
              {data.movies.map((movie, index) => (
                <div className="movie-card" key={index}>
                  <img src={movie.imageUrl} alt={movie.title} />
                  <h3>{movie.title}</h3>
                  <p>Genre: {movie.genre}</p>
                </div>
              ))}
            </div>
          ) : (
            <p>No movies found!</p>
          )}
        </div>
    )
}

export default App;

For creating movies, we are going to use the useConnectMutation hook, and we are going to set it up as below;

import "./App.css";
import {useConnectMutation} from "@tanstack-query-firebase/react";
import {createMovieRef} from "@firebasegen/default-connector";

function App() {
  const [movie, setMovie] = useState({
    title: "",
    imageUrl: "",
    genre: "",
  });

  const [error, setError] = useState("");

   const createMovieMutation = useConnectMutation(createMovieRef, {
        invalidate: [listMoviesRef()],
        onSuccess: () => {
          setMovie({ title: "", imageUrl: "", genre: "" });
        },
        onError: (error) => {
          setError("Failed to add movie. Please try again.");
          console.error(error);
        },
     });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setMovie((prevMovie) => ({
      ...prevMovie,
      [name]: value,
    }));
  };

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!movie.title || !movie.imageUrl || !movie.genre) {
      setError("All fields are required.");
      return;
    }

    setError("");
    createMovieMutation.mutate(movie);
  };

return(
      <div className="movie-form">
          <h2>Add a New Movie</h2>
          <form onSubmit={handleFormSubmit}>
            <div>
              <label>Title:</label>
              <input
                type="text"
                name="title"
                value={movie.title}
                onChange={handleInputChange}
                placeholder="Movie Title"
              />
            </div>
            <div>
              <label>Image URL:</label>
              <input
                type="text"
                name="imageUrl"
                value={movie.imageUrl}
                onChange={handleInputChange}
                placeholder="Movie Image URL"
              />
            </div>
            <div>
              <label>Genre:</label>
              <input
                type="text"
                name="genre"
                value={movie.genre}
                onChange={handleInputChange}
                placeholder="Movie Genre"
              />
            </div>
            <button type="submit" disabled={createMovieMutation.isPending}>
              {createMovieMutation.isPending ? "Adding..." : "Add Movie"}
            </button>
          </form>
          {error && <p className="error-message">{error}</p>}
        </div>
    )
}

export default App;

For the full code, please checkout the src/App.tsx on GitHub.

When we visit our browser, the interface will be as in the image below. Here, new movies can be added and will appear in the list right away.

Please note that the Data Connect emulator has to be running as seen in Step 2, otherwise the connection to the database will fail.

Congratulations!

References

https://github.com/HassanBahati/tanstack-query-firebase-examples/tree/main/react/firebase-dataconnect-movies

https://firebase.google.com/docs/data-connect/

https://graphql.org/learn/

I am Hassan Bahati. I am software engineer with a computer science background.

I am working on AI-Powered applications.

Ask me anything about Firebase!

With seasoned experience in building applications as one package which one may call monolithic architecture, I grew a burning curiosity to adventure if there existed any other approaches.

Monolithic Servers are a scenario where we have one single codebase which is deployed as one discrete unit. This server contains all the routing, middleware, business logic, and database access needed to implement all features of the entire application.

Monolithic Architecture

The above image depicts a typical monolithic architecture where the middleware and router serve all features that interact with a common database.

On the other hand, microservice architecture is quite different from that approach to build servers.

A single microservice contains all the routing, middleware, business logic, and database access needed to implement one single feature of the application.

Microservice Architecture

In the above image, features are broken down into service that run independent of one another. Each service contains all middleware, router and database to enable it to function.

Microservices architecture eliminates single points of failure in an application by preventing tight coupling and dependency between features of an application.

For instance, in a blog app, posts and comments could be considered separate but independent services. The goal would be to prevent the dependency of the comments on posts as would they often appear with monolithic apps. Given that the posts service is broken, the comments service should be able to add comments to existing posts. In a deep dive, we would perhaps require a query service as an intermediary which would keep track of created posts and their respective comments.

Microservices have many pros and of course, as it is with any technology, there are downsides. The biggest challenge with microservices is data management between the different services. The question we always have to ask is how are we going to access existing data in the app since there is no interaction across service databases.

References;

Microservices with Node JS and React | Udemy

microservices.io

CSS Flex-Box

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

CSS for whole container

display: flexbox | inline-flex;  
flex-direction: row | row-reverse | column | column-reverse;  
flex-wrap: nowrap | wrap | wrap-reverse;  
flex-flow: <‘flex-direction’> || <‘flex-wrap’>  
justify-content: flex-start | flex-end | center | space-between | space-around;  
align-items: flex-start | flex-end | center | baseline | stretch;  
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS for items in a container

order: <integer>;  
flex-grow: <number>; /* default 0 */  
flex-shrink: <number>; /* default 1 */  
flex-basis: <length> | auto; /* default auto */  
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Property #1:**display: flex**

A container’s default display: block in this context, display: flex tells your browser ‘’I want to make this container flexible.’’

Source: Scott Domes

Initially, each of the four containers (green, orange, red, blue) are defaulted with display: block thereby take all space from right to left.

Property#2:**Flex direction**

Flexbox terminology diagram from official W3C specification.

On application of flex property, we create a flexbox with two axes as showed above. This is why your squares defaulted to a horizontal line once you applied display: flex.

#container {  display: flex;  flex-direction: column;}

Source: Scott Domes

flex-direction: column is an interesting property in that it doesn’t align content on the cross axis instead of main axis. It alters the main axis from horizontal to vertical.

Property#3:Justify content

Justify content determines how items are aligned along the main axis. Attributes include; Flex-start: Flex-end, Center, Space-between (gives equal space between each square, but not between it and the container), Space-around(puts an equal space on either side of the square).

#container {  display: flex;  flex-direction: row;  justify-content: flex-start;}

Source: Scott Domes

Property#4:Align items

With a recap from justify-content that works applies to the main axis, align-items applies to the cross axis. flex-start, flex-end, center, stretch(items take up the entirety of the cross-axis), baseline(bottom of the paragraph tags are aligned).

Source: Scott Domes

Source: Scott Domes

Property#5: Align self
Align-self property helps us to align individual items thereby overriding the align-items though it follows the rule for the entire container.
#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Source: Scott Domes

CSS Float

When we add float: left; to a container, the elements will be positioned to the left of the other .

before

after

Further more, when we add float: right; to the float items, they will be to the right of the containers and side by side to each other from right to the left.

The most applicable use of floats is when designing a navigation bar.

CSS Grid
display: grid; is newest and most powerful layout system in CSS. It offers 2-dimensional layouts thereby you handles both rows and columns unlike flexbox which is largely 1-dimensional. You work with Grid layout by applying CSS rules to both the parent element (which becomes the Grid Container) and to its children (which become the Grid Items).
Grid Container

`grid-container {  display: grid | inline-grid }  
grid-template-rows { <integer> <integer> } /**specifies number of columns **/  
gird-template-columns { <integer> <integer> <integer> <integer> }` /\*\* specifies number of columns \*\*/  
justify-content { space-evenly | space-between | center | end }  
align-content { center | space-evenly | space-around | space-between | start | end }

When you assign the display property of a container to grid , every element in it becomes a grid item.

Conclusion

Besides the above explained CSS layout techniques, you can use CSS libraries such as Bootstrap, Material UI, Semantic UI, etc. to make web pages responsive.

references: w3schools , css-tricks.com