FinVault - Enterprise Financial Platform

A comprehensive financial management platform built with React, TypeScript, and Playwright for end-to-end testing.

Overview

FinVault is a production-grade financial platform that demonstrates modern web application architecture with comprehensive E2E test coverage. The application includes:

• Dashboard - Financial overview with charts and metrics
• Accounts - Bank account management (checking, savings, investment, credit)
• Transactions - Transaction history with filtering and search
• Transfers - Money transfers between accounts
• Portfolio - Investment portfolio tracking
• Reports - Financial report generation
• Settings - User preferences and security settings

Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS
• State Management: Zustand
• Forms: React Hook Form + Zod
• Charts: Recharts
• Testing: Playwright (E2E), Vitest (Unit)
• CI/CD: GitHub Actions

Getting Started

Prerequisites

• Node.js 20+
• npm 9+

Installation

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Testing

# Run E2E tests
npm run test:e2e

# Run E2E tests with UI
npm run test:e2e:ui

# Run E2E tests in headed mode
npm run test:e2e:headed

# Run E2E tests in debug mode
npm run test:e2e:debug

# View test report
npm run test:e2e:report

# Run unit tests
npm test

Test Structure

The E2E test suite uses the Page Object Model (POM) pattern for maintainability:

tests/
├── e2e/
│   ├── fixtures/
│   │   └── test-fixtures.ts      # Test fixtures and user data
│   ├── pages/
│   │   ├── BasePage.ts           # Base page class
│   │   ├── LoginPage.ts          # Login page object
│   │   ├── DashboardPage.ts      # Dashboard page object
│   │   ├── AccountsPage.ts       # Accounts page object
│   │   ├── TransactionsPage.ts   # Transactions page object
│   │   ├── TransferPage.ts       # Transfer page object
│   │   ├── PortfolioPage.ts      # Portfolio page object
│   │   ├── ReportsPage.ts        # Reports page object
│   │   ├── SettingsPage.ts       # Settings page object
│   │   └── components/
│   │       └── NavigationComponent.ts
│   └── specs/
│       ├── auth.spec.ts          # Authentication tests
│       ├── dashboard.spec.ts     # Dashboard tests
│       ├── accounts.spec.ts      # Accounts tests
│       ├── transactions.spec.ts  # Transactions tests
│       ├── transfer.spec.ts      # Transfer tests
│       ├── portfolio.spec.ts     # Portfolio tests
│       ├── reports.spec.ts       # Reports tests
│       ├── settings.spec.ts      # Settings tests
│       └── navigation.spec.ts    # Navigation tests

Test Coverage

The E2E test suite covers:

Authentication

• Login with valid/invalid credentials
• Registration flow
• Password visibility toggle
• Form validation
• Logout functionality

Dashboard

• Financial metrics display
• Balance history chart
• Spending breakdown chart
• Accounts summary
• Recent transactions

Accounts

• Account listing and filtering
• Account search
• Account details view
• Account status management

Transactions

• Transaction listing
• Search and filtering
• Pagination
• Transaction categories

Transfers

• Internal transfers
• Transfer validation
• Transfer summary
• Recent transfers history

Portfolio

• Portfolio metrics
• Holdings display
• Price refresh
• Allocation charts

Reports

• Report generation
• Multiple report types
• Export formats
• Report history

Settings

• Profile management
• Notification preferences
• Security settings
• User preferences

CI/CD

The project uses GitHub Actions for continuous integration:

• CI Pipeline (ci.yml)

  • Linting and type checking
  • Unit tests with coverage
  • Build verification
  • E2E smoke tests

• E2E Tests Pipeline (e2e-tests.yml)

  • Full E2E test suite
  • Multi-browser testing (Chromium, Firefox, WebKit)
  • Mobile testing
  • Sharded test execution
  • Report merging

Demo Credentials

Email: test@finvault.com
Password: password123

Environment Variables

Variable	Description	Default
BASE_URL	Application base URL	http://localhost:3000
CI	CI environment flag	-

Contributing

1. Fork the repository
2. Create a feature branch
3. Write tests for new functionality
4. Ensure all tests pass
5. Submit a pull request

License

MIT License - see LICENSE file for details.