Oakline Bank

A demo mobile banking application built with Ionic Framework, React, and Capacitor for iOS and Android.

🏢 About Oakline Bank

Founded: 2020 (USA) Business Type: Digital-first regional bank focused on modern mobile banking

Mission: To root our community in financial confidence while providing a seamless, straight-line path to their goals through innovative mobile banking.

✨ Features

• User Profile: Personalized greeting with member ID and profile avatar
• Quick Actions: Fast access to Transfer, Pay, Cards, and Statements (demo)
• Account Overview: View current balance and account details
• Transaction History: 160 realistic transactions spanning 6 months with month headers
• OakBot AI Assistant: On-device AI chat powered by @capacitor/local-llm for private, offline financial guidance
• Mock API Service: Simulated backend with network delays and error handling
• Brand-Aligned Design: Follows Oakline Bank's visual identity
• Dark Mode Support: Automatic theme switching based on system preference
• Pull to Refresh: Refresh account data with a simple gesture
• Responsive Layout: Optimized for various screen sizes
• Loading States: Realistic loading indicators and error handling
• Settings Access: Quick access to account settings (demo)

🎨 Brand Identity

Visual Identity

• The Mark: An abstract, minimalist oak leaf constructed from a single, continuous, glowing geometric line
• The Wordmark: "Oakline Bank" - clean, modern sans-serif with "Oak" bold and grounded

Color Palette

Color	Hex	Usage
Deep Canopy	#0D3B2E	Primary brand, headers, app bar
Electric Moss	#B4E845	Accent, CTAs, positive states
Bark Gray	#6B7280	Secondary text, inactive icons
Paper White	#FAFAFA	Light mode background
Root Black	#0F1115	Dark mode background

Typography

• Outfit: Headers, display text, account balances
• Inter: Body text, UI elements (with tabular numbers for amounts)

🚀 Getting Started

Prerequisites

• Node.js (v24.12.0 or later)
• npm or yarn
• Xcode (for iOS development)
• Android Studio (for Android development)

Installation

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser to http://localhost:5173

Building for Production

Build the web assets:

npm run build

Running on Mobile Devices

iOS

1. Build the web assets:

   npm run build

2. Sync with Capacitor:

   npx cap sync ios

3. Open in Xcode:

   npx cap open ios

4. Run the app from Xcode on a simulator or physical device

Android

1. Build the web assets:

   npm run build

2. Sync with Capacitor:

   npx cap sync android

3. Open in Android Studio:

   npx cap open android

4. Run the app from Android Studio on an emulator or physical device

📁 Project Structure

oakline-bank/
├── android/                  # Android native project
├── ios/                      # iOS native project
├── public/                   # Static assets
├── src/
│   ├── components/           # Shared components
│   │   ├── LLMSetup.tsx      # OakBot on-device AI setup/download flow
│   │   └── LLMSetup.css      # LLM setup styles
│   ├── data/                 # Mock data
│   │   └── mockTransactions.ts  # 160 transactions (6 months)
│   ├── services/             # API services
│   │   ├── api.ts            # Mock banking API service
│   │   └── README.md         # API documentation
│   ├── pages/                # App pages
│   │   ├── Home.tsx          # Main account view + OakBot chat
│   │   └── Home.css          # Home page styles
│   ├── theme/                # Theme configuration
│   │   └── variables.css     # Brand colors and typography
│   ├── App.tsx               # Root component
│   └── main.tsx              # Entry point
├── capacitor.config.ts       # Capacitor configuration
└── package.json              # Dependencies and scripts

🛠️ Tech Stack

• Framework: React 19
• UI Library: Ionic Framework 8
• Native Runtime: Capacitor 8
• Build Tool: Vite 5
• Language: TypeScript 5.9
• Icons: Ionicons 7
• On-Device AI: @capacitor/local-llm (OakBot)
• Markdown Rendering: react-markdown

📱 Mock Data & API

The app uses a realistic mock API service that simulates server calls:

Mock API Service (src/services/api.ts)

• Simulates network latency (300-800ms per request)
• 5% chance of simulated network errors for testing
• Complete TypeScript types and error handling
• Support for filtering, searching, and analytics

Available Data

• Account Balance: $4,128.52
• Account Type: Checking Account (****3847)
• Transactions: 160 transactions spanning 6 months (Oct 2025 - Mar 2026)
• Categories: Groceries, Dining, Transportation, Utilities, Housing, Entertainment, etc.
• Transaction Types: Debits, credits, transfers, recurring payments

API Methods

// Fetch account information
await bankingAPI.getAccountInfo();

// Get recent transactions (last 30 days)
await bankingAPI.getRecentTransactions();

// Filter transactions
await bankingAPI.getTransactions({
  startDate: '2026-01-01',
  category: 'Groceries',
  type: 'debit'
});

// Search by merchant
await bankingAPI.searchTransactions('Starbucks');

// Get spending analytics
await bankingAPI.getSpendingByCategory('2026-01-01', '2026-01-31');
await bankingAPI.getTotalIncome('2026-01-01', '2026-01-31');
await bankingAPI.getTotalSpending('2026-01-01', '2026-01-31');

See src/services/README.md for complete API documentation and usage examples.

🤖 OakBot — On-Device AI Assistant

OakBot is Oakline Bank's private, on-device AI chat assistant. All inference runs locally on the device using the @capacitor/local-llm Capacitor plugin — no data ever leaves the device.

How It Works

1. On first launch, LLMSetup checks whether the on-device model is available, downloadable, or unavailable.
2. If a download is needed (primarily Android), the user is prompted to download the model once.
3. Once ready, the OakBot FAB button appears on the home screen. Tapping it opens a full-screen chat modal.
4. Messages are sent to the local LLM using a session ID (oakbot-<timestamp>), and responses are rendered as Markdown via react-markdown.

Platform Support

• iOS: Uses Apple's on-device model (available on supported hardware; no download required).
• Android: Requires a one-time model download via LocalLLM.download().
• Web/Browser: On-device AI is unavailable; OakBot chat is hidden.

🎯 Voice & Tone

• Rooted & Stable: Projects confidence without arrogance
• Direct & Streamlined: Eliminates friction with clear, concise language
• Encouraging Growth: Celebrates progress and positive actions
• Clear Error Handling: Never blames the user; provides helpful, empathetic feedback

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run test.unit - Run unit tests
• npm run test.e2e - Run E2E tests

🌗 Dark Mode

The app automatically switches between light and dark modes based on system preferences. Dark mode uses:

• Root Black background
• Dimmed Electric Moss accent for better accessibility
• Adjusted contrast ratios for WCAG compliance

📖 Documentation

• CLAUDE.md - Brand guidelines and AI assistant instructions
• src/services/README.md - API documentation

---

Note: This is a demo application with mock data. No real banking services or financial transactions are involved.