leggen/frontend

Leggen Frontend

A modern React dashboard for the Leggen Open Banking CLI tool. This frontend provides a user-friendly interface to view bank accounts, transactions, and balances.

Features

• Modern Dashboard: Clean, responsive interface built with React and TypeScript
• Bank Accounts Overview: View all connected bank accounts with real-time balances
• Transaction Management: Browse, search, and filter transactions across all accounts
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Real-time Data: Powered by React Query for efficient data fetching and caching

Prerequisites

• Node.js 18+ and npm
• Leggen API server running (configurable via environment variables)

Getting Started

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm run dev
   

3. Open your browser to:

   http://localhost:5173
   

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Architecture

Key Technologies

• React 18 - Modern React with hooks and concurrent features
• TypeScript - Type-safe JavaScript development
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• React Query - Data fetching and caching
• Axios - HTTP client for API calls
• Lucide React - Modern icon library

Project Structure

src/
├── components/          # React components
│   ├── Dashboard.tsx    # Main dashboard layout
│   ├── AccountsOverview.tsx
│   └── TransactionsList.tsx
├── lib/                # Utilities and API client
│   ├── api.ts          # API client and endpoints
│   └── utils.ts        # Helper functions
├── types/              # TypeScript type definitions
│   └── api.ts          # API response types
└── App.tsx             # Main application component

API Integration

The frontend connects to the Leggen API server (configurable via environment variables). The API client handles:

• Account retrieval and management
• Transaction fetching with filtering
• Balance information
• Error handling and loading states

Configuration

API URL Configuration

The frontend supports configurable API URLs through environment variables:

Development:

• Set VITE_API_URL to call external APIs during development
• Example: VITE_API_URL=https://staging-api.example.com npm run dev

Production:

• Uses relative URLs (/api/v1) that nginx proxies to the backend
• Configure nginx proxy target via API_BACKEND_URL environment variable
• Default: http://leggend:8000

Docker Compose:

# Override API backend URL
API_BACKEND_URL=https://prod-api.example.com docker-compose up

Development

The dashboard is designed to work with the Leggen CLI tool's API endpoints. Make sure your Leggen server is running before starting the frontend development server.

Adding New Features

1. Define TypeScript types in src/types/api.ts
2. Add API methods to src/lib/api.ts
3. Create React components in src/components/
4. Use React Query for data fetching and state management

Deployment

Build the application for production:

npm run build

The built files will be in the dist/ directory, ready to be served by any static web server.