Fastpay

Overview

Fastpay is a full-featured digital banking simulation platform that replicates the core experience of a modern banking app — account management, fund transfers, transaction history, and analytics dashboards — built to demonstrate production-level fintech frontend architecture.

The Problem

Most banking app demos are shallow: a single screen with hardcoded data. Fastpay was designed to be the opposite — a complete simulation with real authentication, real-time data updates, and actual charts that respond to user actions. The challenge was making it feel like a real product without a real bank behind it.

Process

Supabase provided the real-time foundation — its PostgreSQL realtime subscriptions mean transaction tables update live across browser tabs. I used Recharts for the analytics layer because it's tree-shakeable and handles financial data visualization cleanly. The PWA layer was added to enable offline access to account summaries.

Technical Deep-Dive

The transaction engine uses Supabase row-level security policies to ensure each user only ever sees their own data — even in a shared simulation environment. This gave me the opportunity to design proper RLS policies from scratch, which is a skill directly transferable to production fintech work.

Code Sample

Real-time transaction subscription with Supabase

// hooks/useTransactions.ts
export function useTransactions(userId: string) {
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  
  useEffect(() => {
    const channel = supabase
      .channel('transactions')
      .on('postgres_changes', {
        event: '*',
        schema: 'public',
        table: 'transactions',
        filter: `user_id=eq.${userId}`,
      }, (payload) => {
        if (payload.eventType === 'INSERT') {
          setTransactions(prev => [payload.new as Transaction, ...prev]);
        }
      })
      .subscribe();
      
    return () => { supabase.removeChannel(channel); };
  }, [userId]);
  
  return transactions;
}

Results