Transaction Management

Build a fullstack application for recording financial transactions and viewing transaction history.

---

Overview

You'll build an application that enables users to:

• Record financial transactions (deposits and withdrawals)
• View transaction history
• Track account balances

Tech Stack:

• Frontend: React with Vite
• Backend: Express with TypeScript
• Testing: Cypress (E2E), Vitest (unit)

Feel free to use alternative libraries and tools if you prefer.

---

Getting Started

Prerequisites

• Node.js
• pnpm

Setup

pnpm install

Development

# Start both backend and frontend
pnpm dev

# Or run individually
pnpm start:backend  # Express on port 8080
pnpm start:frontend # React on port 3000

Testing

# E2E tests
pnpm test

# Unit tests
cd app-react && pnpm test

---

Task Requirements

Backend

Implement the Accounting API specification (OpenAPI 3.0).

Method	Endpoint	Purpose
GET	/ping	Health check
POST	/transactions	Create transaction
GET	/transactions	List all transactions
GET	/transactions/{transaction_id}	Get transaction
GET	/accounts/{account_id}	Get account balance

Create Transaction Request:

{
  "account_id": "uuid-string",
  "amount": 100
}

Transaction Response:

{
  "transaction_id": "uuid-string",
  "account_id": "uuid-string",
  "amount": 100,
  "created_at": "2021-05-12T18:29:40.206924+00:00"
}

Account Response:

{
  "account_id": "uuid-string",
  "balance": 1000
}

Frontend

Build a UI with two components.

Transaction Form

Submit transactions with an account ID and amount.

<form ... >
  <input data-type="account-id" ... />
  <input data-type="amount" ... />
  <input data-type="transaction-submit" type="submit" ... />
</form>

Both fields must clear after submission.

Transaction List

Display transactions with amount, account ID, and current balance.

<div
     data-type="transaction"
     data-account-id="${transaction-account-id}"
     data-amount="${transaction-amount}"
     data-balance="${current-account-balance}" ...>
  ...
</div>

Include the data-balance attribute only on the most recent transaction. New transactions appear at the top.

UI Reference

Adjust the design as needed, but maintain the required HTML structure.

What We're Looking For

1. Passing E2E tests - pnpm test
2. Form validation - UUID format, valid integers
3. Unit tests - Test one module to show your approach
4. Clean code - Extract reusable modules, avoid duplication
5. Error handling - Graceful API errors with user feedback

---

Submission

1. Create a private GitHub repository
2. Create a PR with your solution.
3. Invite hornta and nomego with read access to the repository.
4. Notify us when ready

---