CodingNic
Sign In Book Session

Transactions

Turn the Ledger into a Transaction Workflow

Transactions 6 min read

Turn the Ledger into a Transaction Workflow

So far the application can read transactions from the server, keep them in shared React state, filter them by month, and render them. In this module we make the Ledger interactive: a learner will be able to add an entry, correct an existing entry, and remove one without losing control of what the application is doing.

We will move through the workflow in this order:

  1. Make the entry form a predictable controlled form.
  2. Connect form submission to the existing transaction API and shared state.
  3. Reject obvious invalid input before the request is sent.
  4. Add the update endpoint that editing needs.
  5. Load an existing transaction into the same form and save its changes.
  6. Replace browser-native deletion prompts with a reusable confirmation dialog.
  7. Return the deleted transaction so the UI can offer a short undo action.
  8. Show saving, deleting, and failure states instead of leaving the learner guessing what happened.

What you should expect from the module

The visible result is the same Ledger interface, but the transaction workflow becomes much clearer. The add action creates a record, edit changes the existing record rather than creating a duplicate, delete requires an explicit in-app decision, and undo can restore a recently deleted record.

The starter already contains some simple create/delete code. Do not create a second implementation beside it. Each lesson strengthens the existing path and explains why the new code belongs where it does.

We will not yet change the stored money representation, add real calendar validation, or strengthen JSON persistence. Those are intentionally reserved for Module 6 so the learner can see the later hardening step as a separate improvement.

Checkpoint

Before starting the first implementation lesson, open the Ledger and identify these three pieces: the form, the transaction list, and BudgetContext. You should know that the form collects input, the list displays transactions, and the context connects those UI pieces to the server-backed collection.