← Back to portfolio

Selected work

Flux

A real-time streaming platform with integrated chat, moderation, and low-latency playback.

Summary

Flux is a full-stack SaaS live streaming platform built for content creators, educators, and gaming streamers to broadcast video, engage viewers in real time, and track performance — all from one platform. It combines a custom RTMP ingestion pipeline with HLS delivery for low-latency broadcasting, a Socket.IO-powered live chat layer, an AI chatbot (Gemini), and a full analytics/security stack, all wrapped in a modern React frontend.

Problem

Enterprise streaming infra (e.g. custom RTMP/CDN setups) is powerful but too complex and costly for individual creators to self-host.Consumer platforms (Twitch, YouTube Live) offer polish but no ownership, no custom monetization control, and no direct access to the underlying data or infrastructure.

Solution

A custom RTMP ingestion server (Node-Media-Server) accepts broadcasts directly from OBS or any RTMP-compatible software.FFmpeg transcodes incoming streams to HLS in 2-second segments, enabling adaptive-bitrate playback with sub-second latency for viewers.Socket.IO powers real-time chat, live viewer counts, and notifications, decoupled from the media pipeline so chat and stream health don't block each other.

Features

Streaming & BroadcastingRTMP ingestion (port 1935) + multi-bitrate HLS delivery
Real-Time EngagementHosts can manage chat flow without losing focus on the broadcast.
Creator Tools & DiscoveryCreator profiles, stream configuration, RTMP key generation
AI IntegrationGroundwork for AI-assisted content moderation and sentiment analysis
Replay supportChat history persists so post-stream review stays connected to context.

Architecture

Frontend

ReactReact
ViteVite
AxiosAxios
TailwindcssTailwindcss

Backend

Socket.IOSocket.IO
Node.jsNode.js

Database

MongooseMongoose
MongoDBMongoDB

DevOps & Tooling

BunBun
VercelVercel
RenderRender

Flux uses a layered architecture that separates media streaming from application logic, allowing both services to scale independently.

The client is built with React 19, Vite, Tailwind CSS,Axios, and the Socket.IO client for responsive real-time interactions.

Users interact with the Express.js API over HTTPS for authentication, stream management, payments, and analytics, while WebSockets power live chat and real-time updates.

A dedicated media server powered by Node-Media-Server receives RTMP streams, processes them with FFmpeg, and converts them into HLS segments for adaptive playback.

The API server provides REST endpoints, Socket.IO communication, Clerk/JWT authentication with role-based access control, and rate limiting for security and reliability.

MongoDB acts as the shared persistence layer, storing users, streams, chat messages, payments, analytics, followers, and chat rooms.

By decoupling the streaming pipeline from the API layer, Flux achieves better fault tolerance, easier horizontal scaling, and uninterrupted live streaming even during backend maintenance.

Key code

server/socket.js
io.on("connection", (socket) => {
  socket.on("join-room", async ({ roomId, username }) => {
    socket.join(roomId);
    const history = await db.messages.find({ roomId })
      .sort({ createdAt: -1 }).limit(50).lean();
    socket.emit("chat-history", history.reverse());
    io.to(roomId).emit("user-joined", { username, count: getRoomCount(roomId) });
  });

  socket.on("send-message", async ({ roomId, username, text }) => {
    const msg = await db.messages.create({ roomId, username, text });
    io.to(roomId).emit("new-message", {
      id: msg._id, username: msg.username, text: msg.text, createdAt: msg.createdAt
    });
  });

  socket.on("moderate", ({ roomId, messageId, action }) => {
    if (action === "delete") {
      db.messages.deleteById(messageId);
      io.to(roomId).emit("message-deleted", { messageId });
    }
  });
});

Results

Interaction model is much clearer than a chat widget beside a stream.

60–70% payload size reduction via gzip compression

Rate limiting (100 req/15min) implemented for API abuse protection

Connection pooling reduced per-request connection overhead

Multi-bitrate adaptive streaming (360p/720p/1080p) for varying viewer bandwidth

Lesson: event state needs to be explicit from the start if moderation is part of the flow.