Building a Real-Time Expense Tracker App with TanStack Query Firebase

TanStack Query Firebase is a library that provides a set of hooks for handling asynchronous tasks with Firebase in your applications. Managing state synchronization, caching and background data updates can be complex, but TanStack Query Firebase simplifies these processes, making your firebase powered apps super efficient.

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