How sofia-m12/hsa-account-simulation works
HSA Account Simulation is a local web app for managing simulated HSA accounts, issuing virtual cards, recording deposits, and testing purchase outcomes. Users create an account from Home, then view its balance, issue a card, deposit funds, and submit purchases; the transactions view also supports single and concurrent simulations. The React pages call a FastAPI API, which applies account, card, deposit, and purchase logic against PostgreSQL. The graph includes the documented seed-data capability, but its runtime details and several implementation links are not shown in sampled source, so those links are omitted.
Main entry points: App.tsx Route shell · AccountPage.tsx Account details · HomePage.tsx Home dashboard · TransactionsPage.tsx Transactions view
Components 21
Web interface
- Route shell
frontend/src/App.tsx - Home dashboard
frontend/src/pages/HomePage.tsx - Account details
frontend/src/pages/AccountPage.tsx - Transactions view
frontend/src/pages/TransactionsPage.tsx - Account form
frontend/src/components/CreateAccountModal.tsx - Deposit form
frontend/src/components/DepositModal.tsx - Purchase form
frontend/src/components/PurchaseModal.tsx - Purchase simulator
frontend/src/components/SimulateTransactionModal.tsx - Activity tables
frontend/src/components/TransactionsTable.tsx - Display formatting
frontend/src/utils/formatters.ts - API client
frontend/src/data/api.ts - Not found view
frontend/src/pages/NotFoundPage.tsx
API and domain
- Account operations
backend/app/routes/accounts.py - Request and response models
backend/app/schemas.py - Relational tables
backend/app/models.py - Session dependency
backend/app/dependencies.py - Database engine
backend/app/database.py - Database configuration
backend/app/config.py
Persistent data
- PostgreSQL
- Sample data seed
backend/seed.sql
Other components
- User
Connections 26
- User → Route shell: uses
frontend/src/App.tsx - Route shell → Home dashboard: routes
frontend/src/App.tsx - Route shell → Account details: routes
frontend/src/App.tsx - Route shell → Transactions view: routes
frontend/src/App.tsx - Route shell → Not found view: routes
frontend/src/App.tsx - Home dashboard → Account form: renders
frontend/src/pages/HomePage.tsx - Home dashboard → API client: requests accounts and activity
frontend/src/pages/HomePage.tsx - Home dashboard → Activity tables: renders
frontend/src/pages/HomePage.tsx - Account details → API client: requests account actions
frontend/src/pages/AccountPage.tsx - Account details → Deposit form: renders
frontend/src/pages/AccountPage.tsx - Account details → Purchase form: renders
frontend/src/pages/AccountPage.tsx - Account details → Activity tables: renders
frontend/src/pages/AccountPage.tsx - Transactions view → API client: requests activity and purchases
frontend/src/pages/TransactionsPage.tsx - Transactions view → Purchase simulator: renders
frontend/src/pages/TransactionsPage.tsx - Transactions view → Activity tables: renders
frontend/src/pages/TransactionsPage.tsx - Purchase simulator → Purchase form: renders
frontend/src/components/SimulateTransactionModal.tsx - Activity tables → Display formatting: formats values
frontend/src/components/TransactionsTable.tsx - API client → Account operations: HTTP requests
README.md - Account operations → Request and response models: validates and serializes
backend/app/routes/accounts.py - Account operations → Session dependency: gets session
backend/app/routes/accounts.py - Account operations → Relational tables: queries and mutates
backend/app/routes/accounts.py - Session dependency → Database engine: uses engine
backend/app/dependencies.py - Database engine → Database configuration: reads settings
backend/app/database.py - Database engine → PostgreSQL: connects
- Relational tables → PostgreSQL: maps tables
- Sample data seed → PostgreSQL: initializes sample data
README.md