CodingNic

Architecture and Data

Understand How the Ledger Fits Together

Architecture and Data 7 min read

Understand How the Ledger Fits Together

Module 1 gave you a map of the project. In this module, we will use that map to understand the application’s data flow before we start adding CRUD behavior.

Here is the order we will follow:

  1. Read the two data collections the app works with: transactions and categories.
  2. Trace how a request moves from the browser to the Express API and back.
  3. Identify the shared React state that every page needs to see.
  4. Make the month filter use that shared state instead of relying on a hard-coded month or date conversion.

What you will understand by the end

A transaction is stored by the server, returned through an API route, loaded into React state, filtered by the current month, and then rendered by the Ledger page. Categories travel through the same client/server path and are used to describe expenses.

We are not adding transaction creation, editing, deletion, or summary calculations yet. Those features will depend on the data flow you are about to make clear.

Checkpoint

Before continuing, you can describe these four pieces in your own words: transaction, category, shared state, and selected month.