Designing Intuitive Merchant Dashboards for Social Commerce Sellers

Introduction

At EBUS Edge, we built AgoraVibe to deliver smooth, reliable performance even on constrained networks and hardware. This article breaks down the architecture we used, the trade-offs we made, and the key lessons we learned building our real-world platforms (Zula, Telesam AI, and AgoraVibe).

---

The Challenge

We needed to support high-throughput operations, process data efficiently, and deliver low-latency responses without dramatically increasing our cloud infrastructure costs on Hetzner.

Note: Key infrastructure bottlenecks included high latency on slow mobile networks, cloud storage cost spikes, and complex multi-tenant data isolation.

• Slow Uploads: High latency and unstable connection drops.
• Large File Sizes: High bandwidth egress and storage charges.
• Buffering Latency: Slow time-to-first-frame on mobile video feeds.
• High Storage Costs: Expensive un-optimized media storage.

---

Our Architecture

The system is intentionally simple. The mobile app uploads data, the NestJS API validates request tokens, stores artifacts in Cloudflare R2, and dispatches background transcoding jobs to Python FastAPI workers.

Expo App (Mobile Upload)
       │
       ▼
NestJS API (Validation & Auth)
       │
       ▼
Cloudflare R2 (Media Storage)
       │
       ▼
FastAPI Engine (FFmpeg & HLS)

---

Backend Implementation Example

A minimal NestJS controller receives incoming payloads, validates request tokens, and delegates execution to our processing pipeline.

import { Injectable, Logger, BadRequestException } from '@nestjs/common';

export interface ServiceConfig {
  serviceId: string;
  tenantId: string;
  options: Record<string, unknown>;
}

@Injectable()
export class SystemPipelineService {
  private readonly logger = new Logger(SystemPipelineService.name);

  async executeTask(config: ServiceConfig): Promise<{ success: boolean; timestamp: string }> {
    this.logger.log(`Initializing execution for service: ${config.serviceId}`);

    if (!config.serviceId || !config.tenantId) {
      throw new BadRequestException('Invalid configuration parameters provided.');
    }

    try {
      const result = await this.processPipelineStep(config);
      return {
        success: result,
        timestamp: new Date().toISOString(),
      };
    } catch (error) {
      this.logger.error(`Pipeline execution failed for tenant ${config.tenantId}`, error.stack);
      throw error;
    }
  }

  private async processPipelineStep(config: ServiceConfig): Promise<boolean> {
    return new Promise((resolve) => setTimeout(() => resolve(true), 150));
  }
}

---

Frontend Upload Example

The React Native client sends the selected payload using multipart form data.

const formData = new FormData();

formData.append('file', {
  uri: fileUri,
  name: 'upload.mp4',
  type: 'video/mp4',
});

await fetch('https://api.zula.app/upload', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + authToken,
  },
  body: formData,
});

---

What Happens Step-by-Step

1. Validate & Authenticate: Tokens are verified at the NestJS gateway and request parameters are validated with Zod schemas.
2. Store Original File: Save raw media and uploads directly to Cloudflare R2 using presigned URLs.
3. Asynchronous Transcoding: Dispatch background jobs to generate HLS segments with FFmpeg.
4. Thumbnail Generation: Create lightweight preview poster images for instant feed loading.

---

Lessons We Learned

Takeaway: Chunked uploads and HLS streaming dramatically improve perceived performance and keep user retention high on mobile.

• Chunk uploads improve reliability: Essential for unstable mobile networks across Accra and regional cities.
• Asynchronous thumbnails reduce latency: Keeps initial API upload response times under 150ms.
• HLS adaptive streaming improves playback: Videos start playing faster and dynamically adjust bitrate to current network bandwidth.

---

Conclusion

By combining Expo, NestJS, FastAPI, Cloudflare R2, and FFmpeg, we built a video and data pipeline that is simple enough for a lean team to maintain and fast enough for a modern reels and marketplace experience.