Trace the Project from UI to Data

Now that the project is running, we will map the path a piece of ledger data takes through the application. This is a reading lesson: you are not changing code yet.

Open these files in this order:

client/src/main.jsx
client/src/App.jsx
client/src/context/BudgetContext.jsx
client/src/lib/api.js
server/src/app.js
server/src/routes/transactions.js
server/src/routes/categories.js
server/src/db.js
server/data/db.json

1. client/src/main.jsx — start the React application

This is the browser entry point. It imports the top-level App component and asks React to render it into the HTML element whose id is root.

You can think of it as the hand-off from the browser’s HTML page to the React application.

2. client/src/App.jsx — assemble the application shell

App places the application inside BudgetProvider, creates the router, and chooses which page to render for each URL. It is the top-level composition point for the client.

The important idea here is that App does not store transaction records itself. It gives the rest of the application access to shared budget state through the context provider.

3. client/src/context/BudgetContext.jsx — shared budget state

BudgetContext stores the transactions, categories, selected month, loading state, and error state used across the client.

Its refresh function asks the API for transactions and categories when the application starts. Other functions in this file are the client-side entry points for actions such as adding or removing data.

This file is where the browser keeps the current in-memory view of the budget data while the server remains the persistent source of truth.

4. client/src/lib/api.js — one place for HTTP requests

This module wraps fetch in a small request function. The exported functions then describe the actual API operations the client can perform, such as getting transactions or categories and creating or deleting them.

Keeping these requests together means page and component files do not need to repeat the HTTP setup.

5. server/src/app.js — create the Express API

This is the main Express setup file. It enables JSON request bodies, exposes /api/health, and mounts the transaction and category routers.

It also contains the server’s final error handler, so unexpected route errors can become a controlled JSON response instead of crashing the request with an unformatted stack trace.

6. server/src/routes/transactions.js — transaction API rules

This router handles requests under /api/transactions.

The GET route returns the saved transactions. The POST route validates an incoming entry, creates an id, saves the entry, and returns the created record. The DELETE route removes a transaction by id.

We will improve and expand these rules later in the course, so for now focus on the responsibility of the file: transaction requests and transaction-specific validation.

7. server/src/routes/categories.js — category API rules

This router does the same kind of job for /api/categories.

It can list categories, create a category, and delete a category. It also checks whether a category is currently used by an expense before allowing deletion.

Later lessons will strengthen these rules and give the category UI a proper confirmation flow.

8. server/src/db.js — read and write the JSON data

This module connects the API routes to the local data file. It loads the JSON database into memory, and its save function writes changes back to disk.

This is the persistence layer for the learner project. We are deliberately using a small JSON file here instead of introducing a database server or ORM.

9. server/data/db.json — the stored ledger data

This file contains the actual sample records the API reads. It has collections for transactions and categories.

When a transaction is created through the API, the server updates this data and saves it. That is why a refresh can show data that was created earlier: the browser is not the permanent storage location.

Put the pieces together

The main data path looks like this:

Ledger UI
   ↓
BudgetContext
   ↓
api.js
   ↓
Express route
   ↓
db.js
   ↓
server/data/db.json

A response travels back through the same layers until React renders the updated data.

Test it

Without changing anything, open the Ledger in the browser and then open server/data/db.json in your editor.

Match one sample transaction in the browser to the same record in the JSON file. Then identify the route file responsible for serving that transaction data.

Checkpoint

You can trace one transaction from the browser to BudgetContext, from there to api.js, then to the Express transaction route, and finally to server/data/db.json.