WP-001 Software Engineering Intermediate

Transaction History Dashboard

Build a filterable, sortable transaction dashboard for a fintech SaaS.

1

The Scenario

You are a junior frontend engineer at Fintab, a SaaS product that helps freelancers manage their invoices and client payments. Fintab currently shows users a simple list of all transactions — but the product team has heard from users that finding a specific payment is painful when there are dozens of rows. Your tech lead, Marcus, has just dropped this message in Slack: "Hey — we need a proper transaction history view. Users can't find anything in that plain list. Can you build a dashboard with filtering, search, and a detail panel? Mock data is fine for now. Let's keep it scoped and clean."

2

The Task

Build a client-side Transaction History Dashboard in React. The dashboard must let users filter, search, and sort transactions — and show a detail panel when a row is clicked. All data comes from a local mock JSON file. No back-end work required.

3

Requirements

3A

Summary Panel

  • Total Balance — display the sum of all completed incoming transactions minus all outgoing transactions.
  • Money In / Money Out — show two separate totals for the current visible data set.
  • Transaction Count — display the total number of transactions currently shown (respects active filters).
3B

Transaction Table

  • Columns required: Date, Merchant / Client Name, Category, Amount, Status (Paid / Pending / Failed).
  • Filtering: users must be able to filter by Status and by Category using a dropdown.
  • Search: a text input must filter rows by merchant/client name in real time.
  • Sorting: clicking a column header must toggle between ascending and descending sort. At least Date and Amount must be sortable.
  • Empty state: if no transactions match, show a clear empty state — not a blank table.
3C

Transaction Detail Panel

  • Clicking any table row must reveal a detail panel (sidebar or inline expansion — your choice).
  • The detail panel must show: all table fields plus a Notes field and a full timestamp.
  • The panel must be dismissible without refreshing the page.
3D

Data & State

  • All data must come from a local mock JSON file at src/data/transactions.json.
  • All filtering, sorting, and search must happen client-side in React state.
  • The Summary Panel totals must update reactively whenever filters or search change.
4

Constraints

  • React only. No Angular, Vue, or vanilla JS for the main build.
  • No back-end, database, or API calls. All data is local.
  • No styling libraries (Bootstrap, Material UI, etc.). You may use a utility framework like Tailwind.
  • Must work in a modern browser. No IE compatibility required.
5

Mock Data Schema

Place your mock file at src/data/transactions.json. Each transaction must have: id, date, merchant, category (Invoice / Subscription / Refund / Transfer / Expense), amount, type (incoming/outgoing), status (paid/pending/failed), notes, timestamp. Include at least 15 transactions.

6

What to Submit

  • A working React app (runnable with npm install && npm start)
  • Mock data file at src/data/transactions.json (15+ transactions)
  • A brief README explaining your component structure and any trade-offs
7

Hints

Two non-prescriptive hints. Read only if you're stuck — don't skip the thinking.

Hint 1

Think about where your filtering state lives. A single <code>useReducer</code> or lifted state object avoids prop-drilling across the summary, table, and detail panel.

Hint 2

The empty state is not an edge case — it's a UI component. Design it before you need it.

Wooble  ·  Project #WP-001  ·  Transaction History Dashboard  ·  Software Engineering Track  ·  v1.0