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

[**TanStack Query Firebase**](https://docs.page/invertase/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.

```bash
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738284141845/0d111688-2109-414e-bbdf-cf7a31403a7e.png align="center")

Next, we shall install [`TanStack Query Firebase`](https://docs.page/invertase/tanstack-query-firebase), [`Firebase`](https://firebase.google.com/) and [`TanStack Query`](https://tanstack.com/query/latest).

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

## Step 2: Configure Firebase

Go to the [firebase console](https://console.firebase.google.com/), create a project with the name `realtime-expense-tracker-app` and once created you will see screen below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738284800211/32d40cdf-ad9b-489b-aa9e-5d8b929422b0.png align="center")

While in the [firebase console](https://console.firebase.google.com/), 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738285094617/ca2cc94d-1d32-4ca8-b055-04783c3df872.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738285521233/ba25ba8c-0a43-491b-bb87-bd818142b68a.png align="center")

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.

```bash
  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;

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738288683946/1c4e85bb-20e7-4c07-82b5-5ada17f6e08a.png align="center")

## 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](https://firebase.google.com/docs/firestore), we are going to use the [`useCollectionQuery`](https://docs.page/invertase/tanstack-query-firebase/react/firestore/hooks/useCollectionQuery) hook from `TanStack Query Firebase`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1738286752449/ca323f28-3df9-4e61-bc12-03d60f585a8a.png align="center")

## References

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