daryllxd/x-gic-bank

<explanation>

1. Identify the project type and purpose

- X‑GIC Bank is a front‑end single‑page application (SPA) built with React and TypeScript.

- Its purpose is to simulate a simple bank account: deposit, withdraw, reset balance, and print statements. There is no separate backend service; all state lives in the browser.

2. Analyze the file structure

- Top‑level files and folders:

• public/index.html + assets (static host)

• src/ – application source code

• src/features/bank/ – domain logic for bank state and commands (deposit, withdraw, print, reset)

• src/App.tsx, src/main.tsx – React entry points and root component

• src/utils/ – helper functions (formatCurrency, formatDate)

• config files: vite.config.ts, tsconfig*.json, tailwind.config.js, postcss.config.mjs, eslint.config.js

• tests/ – Playwright end‑to‑end tests

• src/**/*.test.tsx & vitest.config.ts – unit tests with Vitest

- Folder pattern: feature‑based (bank), utility modules, top‑level config for build, linting, CSS.

3. Examine the README for additional insights

- No explicit architecture diagram provided.

- Describes dev setup (pnpm + Vite), unit tests (Vitest), E2E tests (Playwright), and deployment (Vercel demo).

4. Main components and their interactions

a. Frontend (React SPA)

• UI Layer: App.tsx & feature components (bankStatementTable, commands UI)

• Domain Layer: BankState + Command modules + Types + Utils

b. Build & Tooling

• pnpm package manager

• Vite dev server / bundler

• Tailwind CSS + PostCSS for styling

• ESLint for linting

c. Testing

• Vitest (unit tests run in Node/jsdom)

• Playwright (E2E tests running against the dev server)

d. Deployment (static site on Vercel)

5. Relationships and data flow

- Developer commits code → pnpm install → Vite builds and serves the SPA

- Browser loads index.html → main.tsx mounts React tree → App renders UI

- UI components invoke domain commands (deposit, withdraw, reset) → update BankState → UI re‑renders with new data

- Utils format data for presentation

- Vitest tests import individual modules for unit testing

- Playwright drives the live UI in the browser to test flows end‑to‑end

6. Architectural patterns & design principles

- Feature‑based modularization: all bank logic co‑located under src/features/bank

- Command pattern for domain actions (each command is its own module)

- React component hierarchy with unidirectional data flow (state lives in BankState, passed down via props or context)

- Separation of concerns: UI vs. domain vs. utilities vs. build config

7. Diagram‐drawing guidelines

- Use clear, labeled boxes for each component:

• Browser / React Runtime

• UI Components

• Domain Modules (BankState + Commands + Types + Utils)

• Build & Tooling (pnpm, Vite, Tailwind/PostCSS, ESLint)

• Testing (Vitest, Playwright)

• Deployment end point (Vercel / static host)

- Draw directional arrows:

• from Build & Tooling → React App (bundle & serve)

• from Browser → React UI → Domain Modules → back to UI

• from Developer / CI → Testing tools → React App endpoint

- Color‐code or shape‐code by type:

• Green for runtime components (React, Domain modules)

• Blue for build & DevOps (pnpm, Vite, Tailwind, CI workflows)

• Orange for testing (Vitest, Playwright)

• Gray for deployment target (Vercel)

8. Tailor the diagram to this front‑end project

- Emphasize the absence of a backend service: group everything inside “Client‐side Application.”

- Show the feature folder boundary around bank logic.

- Include external services only if you integrate analytics/CDN/CD, otherwise omit.

9. Diagram elements checklist

- Box or shape for each module or layer with a concise label

- Arrows showing build flow (developer → CI → bundle → serve) and runtime data flow (user actions → state updates → UI render)

- Legend or color key to distinguish layers (UI, domain, tooling, testing, deployment)

- Annotations for technologies (React 18, TypeScript, Vite, Tailwind CSS, Vitest, Playwright)

By following these steps and layering your diagram from “source & build” down to “runtime & testing,” you will produce an accurate, detailed architecture overview of the X‑GIC Bank project that highlights its feature‑based structure, technologies in play, and the way data flows from user actions to state updates and back to the UI.

</explanation>