feat: full-stack expense tracker with E2E tests and Cucumber report

[0140]

Approach

Built a full-stack Expense Tracker application using a spec-driven workflow — every feature was documented in SPECS/ before any code was written.

Stack

• Frontend: React + TypeScript + Vite
• Backend: Python + FastAPI + SQLAlchemy + SQLite
• Tests: Playwright + TypeScript (E2E), Cucumber HTML report

Tools Used

• Copilot, Codex, Claude — primary codegen tools for all implementation, test writing, and spec authoring
• Playwright — E2E test automation across all features
• multiple-cucumber-html-reporter — human-readable test reports

What Was Built

• Full CRUD for expenses (add, view, edit, delete)
• Category filter + keyword search
• Live summary stats panel (totals per category + grand total)
• 34 E2E tests covering happy paths and edge cases
• Cucumber HTML report generated from Playwright results in one command (npm run test:cucumber)

How to Run

See applicationExecution.md — everything runs locally with no external services needed.

Additional Notes

• Spec-first discipline kept scope tight — no feature was coded without a matching spec in SPECS/, which made it easy to track progress and avoid drift.
• Test isolation was a key design decision — each Playwright test cleans up after itself so tests never depend on each other or on pre-existing data.
• The Cucumber reporter was layered on top of Playwright without modifying test logic, keeping tests clean and the reporting concern separate.
• The single npm run test:cucumber command auto-starts both servers, runs all 34 tests, and generates the HTML report — no manual setup needed.
• ChatGPT and Perplexity AI were also used throughout — ChatGPT for reasoning through design decisions and debugging, Perplexity for quick research and looking up library-specific documentation.