Back to All Projects
Architecture & Case Study

FansNgage — Creator & Fan Subscription Platform (Laravel, Vue.js, Redis, WebSockets)

LaravelVue.jsRedisWebSocketCreator EconomyFintechReal-Time Systems
FansNgage — Creator & Fan Subscription Platform (Laravel, Vue.js, Redis, WebSockets)
Live Preview

Overview & Technical Scope

Executive Summary

In creator monetization platforms, user engagement relies entirely on instant feedback loops — when a fan tips a creator or purchases a pay-per-view video, both parties expect real-time visual reactions, zero payment lag, and strict balance safety.

During high-traffic moments (such as exclusive media drops or creator livestreams), the platform experiences extreme concurrent read/write bursts across chat, notifications, and balance ledgers.

As a core engineer on FansNgage, I architected the real-time messaging pipeline, WebSocket broadcasting layer, Redis queue cluster, and concurrency-safe in-app wallet ledger to support low-latency creator-to-fan interactions at scale.


1. Real-Time WebSocket Infrastructure & Event Broadcasting

To deliver zero-latency direct messaging, tip alerts, and live presence indicators without constant client polling:

  • Private & Presence Channels: Configured secure WebSocket channels authenticating private fan-creator conversation threads and active online status.
  • Event-Driven Architecture: Decoupled HTTP request lifecycles from broadcasting. When a fan sends a paid message, the API controller commits the transaction and pushes a lightweight event to a Redis queue worker pool.
  • Instant Delivery: WebSocket workers pick up the payload and broadcast it to connected clients across the globe in under 50 milliseconds.

2. In-App Wallet & Concurrency-Safe Financial Ledger

Financial transactions in high-velocity creator platforms require rigorous concurrency safeguards to prevent double-spending during rapid-fire tipping:

  • Pessimistic Database Locking: Leveraged database row-level locking (lockForUpdate()) inside atomic transactions to ensure wallet debits and credits execute sequentially even during simultaneous requests.
  • Double-Entry Ledger Architecture: Every credit movement (fan wallet top-up, direct message tip, post unlock, platform commission fee, and creator withdrawal) is recorded with balanced debit/credit ledger entries for full financial auditability.
  • Escrow & Payout Automation: Handled creator earnings with automated holding periods, minimum withdrawal thresholds, and payout verification flows.

3. Tiered Content Paywalls & Secure Media Unlocks

Built a flexible access control engine supporting multiple monetization models:

  • Four Access Tiers:
    1. Public Posts: Open to all visitors for discovery and organic SEO.
    2. Tiered Subscriptions: Monthly recurring access to creator-exclusive feeds.
    3. Pay-Per-View (PPV): One-time microtransactions unlocking individual high-value posts.
    4. Direct Message Unlocks: Paid media attachments (audio, video, photos) blurred in chat until unlocked.
  • Secure Media Delivery: Protected digital media using short-lived signed URLs with time-limited cryptographic tokens, preventing direct asset URL sharing and unauthorized downloads.

4. Redis-Powered Live Analytics & Real-Time Leaderboards

Calculating platform-wide creator rankings (e.g. Top Earners, Fastest Growing Creators, Top PPV Sellers) on relational databases during traffic spikes causes severe database lock contention.

I engineered a Redis-native ranking pipeline:

  • Redis Sorted Sets (ZADD, ZREVRANGE): Stored and dynamically updated creator revenue scores inside memory structures with automatic $O(\log N)$ sorting.
  • Sub-5ms Leaderboard Lookups: Reduced ranking response times from ~450ms SQL aggregate scans to less than 3ms directly from Redis memory.
  • Creator Dashboard Analytics: Live charts and real-time revenue breakdowns (subscriptions vs. tips vs. PPV unlocks) updated dynamically via WebSockets.

5. Technical Highlights & Code Patterns

// Concurrency-safe tipping & WebSocket broadcasting controller snippet (Laravel/PHP)
namespace App\Services;

use App\Events\TipReceivedEvent;
use App\Models\Wallet;
use App\Models\Transaction;
use Illuminate\Support\Facades\DB;
use App\Exceptions\InsufficientFundsException;

class TippingService
{
    public function sendTip(int $senderId, int $creatorId, float $amount, string $message = ''): Transaction
    {
        return DB::transaction(function () use ($senderId, $creatorId, $amount, $message) {
            // Lock sender wallet row to prevent concurrent race conditions
            $senderWallet = Wallet::where('user_id', $senderId)->lockForUpdate()->firstOrFail();

            if ($senderWallet->balance < $amount) {
                throw new InsufficientFundsException("Insufficient wallet balance.");
            }

            // Deduct from fan wallet
            $senderWallet->decrement('balance', $amount);

            // Calculate platform fee and creator payout
            $platformFee = $amount * 0.10; // 10% platform fee
            $netCreatorAmount = $amount - $platformFee;

            // Lock and credit creator wallet
            $creatorWallet = Wallet::where('user_id', $creatorId)->lockForUpdate()->firstOrFail();
            $creatorWallet->increment('balance', $netCreatorAmount);

            // Record immutable ledger entry
            $transaction = Transaction::create([
                'sender_id' => $senderId,
                'creator_id' => $creatorId,
                'amount' => $amount,
                'net_amount' => $netCreatorAmount,
                'fee' => $platformFee,
                'type' => 'tip',
                'status' => 'completed',
                'meta' => ['message' => $message]
            ]);

            // Dispatch WebSocket event to Redis queue for non-blocking client broadcast
            broadcast(new TipReceivedEvent($creatorId, $senderId, $amount, $message))->toOthers();

            return $transaction;
        });
    }
}

6. Business Impact & Measurable Outcomes

  • < 50ms Real-Time Delivery: Sub-50ms latency for live tip animations and direct messages delivered over WebSockets.
  • 100% Financial Transaction Safety: Zero balance inconsistencies or double-spend incidents across thousands of microtransactions using atomic database locking.
  • 94% Reduction in SQL Overhead: Redis Sorted Sets eliminated slow relational GROUP BY / ORDER BY aggregate queries for platform leaderboards.
  • High Concurrency Stability: Handled concurrent creator media drops with zero server downtime via background Redis job queues.

Key Takeaways for Technical Recruiters

  • Real-Time Systems & Event-Driven Architecture: Deep expertise in WebSockets, Redis Pub/Sub, private channel authentication, and background worker queues.
  • Financial & Transaction Integrity: Designed robust double-entry ledgers, atomic database transactions, and race-condition prevention for creator payout systems.
  • Performance Optimization: Successfully shifted heavy computational workloads from relational databases to in-memory caching structures for massive throughput gains.

Key Responsibilities & Contribution

Architected and implemented the real-time infrastructure — WebSocket-based direct messaging, live tipping animations, and notification delivery, along with a Redis-backed pub/sub, background queue, and caching layer powering live leaderboards and concurrent wallet ledger transactions.

Interactive 3D Tech Stack

TOPOLOGY MESH|7 NODES
🖱️ Drag to rotate 360° • Scroll to zoom • Click node to inspect
Vue.jsLaravelPHPRedisWebSocketMySQLTailwind CSS

System Architecture & Data Flow

01

Vue.js SPA Client

High-performance reactive frontend handling dynamic feeds, video streaming, interactive creator dashboards, and real-time WebSocket listeners.

02

Laravel REST & WebSocket Gateway

Handles API endpoints, authentication, subscription logic, role policies, and dispatches broadcasting events to Redis.

03

Redis Pub/Sub & Queue Workers

Asynchronous job processing for media encoding, webhook deliveries, and sub-millisecond leaderboard caching with Sorted Sets.

04

WebSocket Broadcasting Server

Maintains persistent duplex TCP connections to deliver live tips, instant direct messages, and presence indicators.

05

Relational DB & Transaction Ledger

Stores user profiles, access permissions, and financial audit logs with pessimistic locking for balance integrity.

FansNgage — Creator & Fan Subscription Platform (Laravel, Vue.js, Redis, WebSockets) - Somapti's Journal