> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build a budget app dashboard
- URL: https://reactpractice.dev/exercise/build-a-budget-app-dashboard/
- Published: 2025-02-03T13:51:35.000Z
- Updated: 2026-06-01T01:57:06.000Z
- Author: Corina Udrescu
- Tags: Beginner, #corina-2, Essential, Exercises, #Import 2026-06-09 12:07

Build a dashboard for an expense tracking app.

For a given month, it should show:

- the transactions for that month
- the total spent amount
- a graph of expenditure per category as a pie chart

Users should be able to navigate through the months.  
Show the transactions 5 at a time, with the most recent ones first.

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2025/02/8-completed-dashboard.png)

Since the focus is on the client-side React interactivity, this app has no backend - you can just use the sample JSON file provided for the data.

[transactionsSample transactions for the Budget app Dashboardtransactions.json62 KBdownload-circle](https://reactpractice.dev/content/files/2025/02/transactions.json "Download")

For each transaction, the date, payee, amount and category are available.

For displaying the chart, you can use [React Google Charts](https://www.react-google-charts.com/?ref=reactpractice.dev) library, which has a simple to use pie chart.

Here is how the completed component should be used:

```
import data from './transactions.json';

<BudgetDashboard transactions={data} />

```

Good luck! 🍀

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-build-a-budget-app-dashboard/) and the comments section for feedback and discussion.