FluxlyApp Frontend

A modern, mobile-first React application for credit card management and financial insights, powered by Plaid API integration.

Features

Core Features

• Bank Account Connection - Securely connect accounts via Plaid
• Statement Tracking - View credit card statements with payment due dates
• Payment Recording - Track payments and view payment history
• Transaction History - Browse and search transactions across all accounts

Analytics & Insights (FinDeck)

• Income vs Expenses - Monthly income/expense visualization
• Credit Utilization - Real-time utilization gauge
• Merchant Spending - Top merchants by spending
• Transaction Telemetry - Credits vs debits breakdown
• Custom Merchant Tracking - Track spending at specific merchants

Additional Features

• AI Chat Assistant - Get financial insights via AI
• Card Recommendations - Personalized credit card suggestions
• Push Notifications - Payment reminders and alerts
• Dark Mode - Full dark/light theme support
• PWA Support - Install as a mobile app
• Subscription Management - Stripe-powered subscriptions

Tech Stack

• Framework: React 19 with TypeScript
• Build Tool: Vite 7
• Routing: React Router v6
• State Management: TanStack Query (React Query)
• Styling: Tailwind CSS 4 + Custom CSS
• Charts: Chart.js + Recharts
• Payments: Stripe.js
• Mobile: Capacitor (iOS)

Quick Start

1. Install Dependencies

npm install

2. Configure Environment

cp .env.example .env.local

Edit .env.local:

VITE_API_URL=http://localhost:3001
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_key
VITE_VAPID_PUBLIC_KEY=your_vapid_public_key

3. Run Development Server

npm run dev

The app runs at http://localhost:5173 by default.

4. Build for Production

npm run build

Project Structure

fluxlyapp-ui/
├── public/                 # Static assets
│   ├── manifest.json       # PWA manifest
│   └── logo.png           # App icons
├── src/
│   ├── components/        # React components
│   │   ├── charts/        # Chart components (Chart.js)
│   │   ├── ui/            # Reusable UI components
│   │   ├── FinDeck.tsx    # Analytics dashboard
│   │   ├── StatementCards.tsx  # Statement card views
│   │   └── ...
│   ├── contexts/          # React contexts
│   │   ├── AuthContext.tsx
│   │   └── DarkModeContext.tsx
│   ├── hooks/             # Custom React hooks
│   │   ├── useInitData.ts
│   │   └── useRemainingBalance.ts
│   ├── services/          # API services
│   │   ├── api.ts         # Main API client
│   │   ├── auth.ts        # Auth service
│   │   └── notifications.ts
│   ├── types/             # TypeScript types
│   ├── utils/             # Utility functions
│   ├── App.tsx            # Main app component
│   └── index.tsx          # Entry point
├── .env.example           # Environment template
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── vercel.json            # Vercel deployment config
└── vite.config.ts

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm start	Alias for npm run dev

Environment Variables

Variable	Required	Description
VITE_API_URL	Yes	Backend API URL
VITE_STRIPE_PUBLISHABLE_KEY	Yes	Stripe public key
VITE_VAPID_PUBLIC_KEY	No	Push notification key

Deployment

Vercel (Recommended)

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy - Vercel auto-detects Vite configuration

The vercel.json is pre-configured for SPA routing.

Other Platforms

Build and deploy the dist/ folder to any static hosting:

• Netlify
• Cloudflare Pages
• AWS S3 + CloudFront
• GitHub Pages

Key Components

Component	Description
FinDeck	Main analytics dashboard with charts
StatementCards	Credit card statement display
Chat	AI-powered chat assistant
ConnectAccount	Plaid Link integration
Settings	User preferences and account settings
LandingPage	Public marketing page

Browser Support

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)

License

Proprietary - All rights reserved