🇰🇭 Cambodian Marketplace · Reels Super-App

One platform for selling, watching & growing

Psar Online blends a full marketplace & store POS, a TikTok-style reels engine with an FFmpeg → HLS video pipeline, a wallet & points economy, a Telegram Mini App, reels advertising, and a complete SuperAdmin control center — on web, PWA, iOS & Android.

15+SuperAdmin modules
HLSAdaptive video
4Platforms
2Languages (EN/ខ្មែរ)
The Platform

Everything the business needs, in one super-app

A vertically-integrated commerce + content platform — from raw video upload to a sold product, tracked end to end.

🎬

Reels Engine

Vertical short-video feed with adaptive HLS streaming, muted autoplay, categories, follows, likes, comments and shoppable product cards.

🛍️

Marketplace

Listings, live search, cart & checkout, vendor stores, orders, reviews and watchlists — with featured & sponsored placements.

🏪

Store Management

Per-vendor dashboard with Products, POS, Orders, delivery and settings — mirrored two-ways with the marketplace.

💳

Wallet & Points

In-app balance with top-ups & approvals, plus a points/rewards system that tracks engagement and spending.

✈️

Telegram Mini App

The whole site runs inside Telegram, with channel broadcasting and deep links that open products & reels directly.

📣

Reels Ads

Sponsored slides interleaved in the feed with cost-per-view/click, budgets and automatic pause when exhausted.

Product Tour

See it in action

Real screens from the live iOS & Android app.

Reels home feed
🎬 Reels home feed
Shoppable reels player
🛒 Shoppable reels player
Drama series with episodes
📺 Drama series & episodes
Marketplace
🛍️ Marketplace & categories
Product detail
📦 Product / listing detail
Vendor storefront
🏪 Vendor storefront
Wallet and top-up
💳 Wallet & top-up
Profile, wallet and points
⭐ Profile · points
← scroll to see more →
Video Processing & Convert Pipeline

From upload to adaptive stream, automatically

Every reel is transcoded to HLS and delivered from a global CDN — including one-tap YouTube import.

1

Upload

Video saved to temp storage; duration read via FFprobe.

2

Thumbnails

5 auto-thumbnails at 10/25/50/75/90% — user picks the cover.

3

Music Mix

Optional soundtrack mixed & trimmed with FFmpeg (h264 + AAC).

4

HLS Convert

Transcoded to .m3u8 + segmented .ts chunks.

5

CDN Deliver

Pushed to Cloudflare R2 · streamed via cdn.psar.online.

📥

YouTube Import

Paste a URL → yt-dlp downloads (via proxy) → FFmpeg → HLS → a native reel. No manual re-upload.

Smart Playback

HLS.js with adaptive bitrate; a service worker caches segments (cache-first) & playlists (network-first) for instant scroll-back.

🔁

Two-Phase Finalize

Fast temp-upload first, heavy transcode on finalize — so the UI never blocks while a reel processes.

The Reels Experience

A full short-video social layer built for commerce — discover, watch, follow and buy without leaving the feed.

Muted autoplay + gesture unlock Draggable seek bar Netflix-style browse rows Categories Follow system Likes · Comments · Save · Share Music / soundtracks Drama / episodes Shoppable product cards Portrait-only UX
🛒
Shoppable reelsLink one or many products to a reel; an auto-sliding product card floats over the video.
🎵
Music & trimmingAdd a trending soundtrack, trim it, and mix it straight into the video.
📺
Drama seriesGroup reels into seasons & episodes with an episode strip for binge-watching.
Creator toolsVerified buyers & vendors can post; add your own categories on the fly.
Commerce

Marketplace & Store Management

A buyer-facing marketplace and a vendor-facing store system, kept perfectly in sync.

🛍️

Marketplace

Everything shoppers need to browse and buy.

  • Rich listings with image galleries & categories
  • Live search across products, reels & text
  • Cart, floating cart & checkout (COD / wallet)
  • Vendor storefronts, reviews & watchlists
  • Featured & sponsored product placements
🏪

Store Management Module

A complete back-office for every vendor.

  • Tabs: Dashboard · Products · POS · Orders · Settings
  • Point-of-Sale with held-stock reservations
  • Two-way listing mirror (store ↔ marketplace)
  • Delivery options & order fulfilment
  • Instant Telegram order alerts

💳 Wallet System

A managed in-app balance that powers checkout and payouts.

Top-ups & approvalsUsers request top-ups; admins review & approve, with a push notification on completion.
🧾
TransactionsFull ledger of credits & debits, spendable at marketplace checkout.

⭐ Points System

A rewards layer that drives engagement and loyalty.

🎯
Earn pointsAccrue points from activity & purchases, shown alongside the wallet balance.
📈
Engagement loopTurns everyday actions into measurable rewards that bring users back.
Distribution

Telegram Mini App & Broadcasting

Meet users where they already are — the entire app runs inside Telegram.

✈️

Runs inside Telegram

Full site as a Mini App — native back button, theme sync, and vertical-swipe handling for smooth reels.

📢

Channel broadcast

SuperAdmin posts selected products & reels to a Telegram channel with rich photo cards + action buttons.

🔗

Deep links

Buttons use ?startapp links that open the Mini App directly on the exact product or reel.

📣 Reels Advertising

Monetize the feed with native sponsored content and self-serve campaigns.

Sponsored slides every N reels Cost-per-view Cost-per-click Budgets Auto-pause at 80% / exhausted Approval workflow "Sponsored" badge
🎯
Native placementsAds appear as full-screen slides in the reels feed, indistinguishable from organic in feel.
💰
Metered billingEvery impression & click is priced and deducted from the campaign budget in real time.
🛡️
Safety railsCampaigns auto-pause at budget milestones; admins approve before anything goes live.
Control Center

The SuperAdmin Suite

A professional, fixed-sidebar dashboard with gradient stat cards to run the entire platform.

📊
OverviewLive stats
🏬
VendorsVerify & manage
📦
PackagesPlans & limits
📋
ListingsModeration
📈
ReportsAnalytics
🎬
ReelsUpload & curate
📣
Reels AdsCampaigns
💵
Top-upsApprovals
👥
UsersAccounts
🎵
MusicSoundtracks
🗂️
Reel CatsCategories
🛒
Product AdsFeatured
🔍
SEOMeta & sitemaps
✈️
TelegramBroadcast
🌐
LanguageKhmer auto-translate
Everywhere

Platform & Infrastructure

Built to reach every device and every search engine.

📱

Native Apps

iOS & Android via Capacitor, on the App Store & Play — with FCM push notifications.

⚙️

PWA

Installable, offline app-shell caching, and pull-to-refresh on mobile.

🔎

Advanced SEO

Server-side OpenGraph, JSON-LD, dynamic sitemaps, robots & IndexNow — Google, Bing, Yahoo, Baidu & Yandex.

🌐

Bilingual

One-tap 🇬🇧/🇰🇭 flag switch with runtime whole-UI Khmer auto-translation.

☁️

Media CDN

Cloudflare R2 object storage served globally through cdn.psar.online.

🔐

Auth & OTP

Phone login with Telegram Gateway OTP and SMS fallback.

🔔

Notifications

Push for chats, orders, wallet, ads, follows & price drops.

💬

Messaging

Real-time chat with voice notes, photos and product cards.

System Design

Architecture

A single Express API and SQLite core, fronted by a multi-client layer and backed by a media-processing pipeline & a global CDN.

① Clients
🌐 Web · React + Vite ⚙️ PWA (installable, offline shell) 📱 iOS & Android · Capacitor ✈️ Telegram Mini App
② Edge & CDN — Cloudflare
🔒 DNS + TLS ☁️ R2 object storage 🚀 cdn.psar.online (HLS + images) 🧩 Service worker cache
③ Application — Nginx → Express (PM2)
🔀 Nginx reverse proxy 🟢 Express REST API :4001 🗄️ SQLite · better-sqlite3 🔑 JWT auth + roles 🖥️ HestiaCP host
④ Media Pipeline & Integrations
🎞️ FFmpeg / FFprobe → HLS 📥 yt-dlp import 🔔 Firebase FCM push ✈️ Telegram Bot API 📲 Telegram Gateway OTP 🌐 MyMemory translate
Developer

REST API surface

A cohesive, role-guarded API — a representative slice of the endpoint groups.

🔐

Auth

POST/api/auth/register
POST/api/auth/login
POST/api/auth/otp · /verify
GET/api/auth/me
🎬

Reels

GET/api/reels
POST/api/reels/upload-video-temp
POST/api/reels/finalize · /from-url
GET/POST/api/reels/categories
GET/api/reels/ads
🛍️

Marketplace

GET/api/listings
GET/api/search
GET/api/vendor/:id
*/api/watchlist · /reviews
🏪

Store & Wallet

*/api/store-manage/*
*/api/wallet/*
*/api/orders
💬

Messaging & Push

*/api/messages/*
POST/api/push/register
GET/api/notifications
🛡️

Platform & Admin

GET/api/i18n/:lang · /translate
GET/api/site
*/api/superadmin/* (guarded)
Under the Hood

Technology

React + Vite Node.js · Express SQLite (better-sqlite3) HLS.js FFmpeg · FFprobe yt-dlp Cloudflare R2 Capacitor (iOS/Android) Firebase Cloud Messaging Telegram Bot & Mini App Nginx · PM2 Service Worker / PWA
Reference

Per-module deep dives

Expand any module for how it actually works under the hood.

🎞️ Video Processing & Convert Pipeline
  • Phase 1 (fast): the raw video is uploaded to temporary storage; FFprobe reads its duration and 5 candidate thumbnails are generated at 10 / 25 / 50 / 75 / 90% of the timeline for the creator to pick a cover.
  • Optional music: a soundtrack can be chosen and trimmed; FFmpeg mixes it into the video (seeked with -ss, mapped & -shortest, transcoded to H.264 + AAC).
  • Phase 2 (finalize): the mixed output is transcoded to HLS — an .m3u8 playlist plus segmented .ts chunks — then uploaded to Cloudflare R2 and recorded in the DB.
  • YouTube import: paste a URL → yt-dlp downloads it (through a proxy) → FFmpeg → HLS → a native reel, no re-upload.
  • Delivery: streamed from cdn.psar.online; a service worker caches segments (cache-first) & playlists (network-first) for instant scroll-back.
FFmpegFFprobeyt-dlpHLS.jsCloudflare R2videoProcessor.js
🎬 Reels Engine
  • Vertical, scroll-snap feed with muted autoplay + a gesture-unlock fallback for strict webviews, and a pause safety-net so a reel never stalls.
  • Draggable seek bar, categories, Netflix-style browse rows, follow system, likes / comments / save / share, and music.
  • Shoppable: one or many products link to a reel via an auto-sliding product card overlaid on the video.
  • Drama series: reels group into seasons & episodes with an episode strip for binge-watching.
  • Verified buyers & vendors can post; new categories can be created inline from the upload panel.
ReelsGridReelItemIntersectionObserverreels_categories
🛍️ Marketplace
  • Rich listings with image galleries, categories, price types and locations.
  • Live search across products, reels & text; cart, floating cart & checkout (COD / wallet).
  • Vendor storefronts, reviews, watchlists, and featured / sponsored placements.
  • Server-side OpenGraph + JSON-LD per listing for rich link previews & SEO.
/api/listings/api/searchCartContextorders
🏪 Store Management & POS
  • Per-vendor back-office: Dashboard · Products · POS · Orders · Settings tabs.
  • Point-of-Sale with held-stock reservations so online & in-store never oversell.
  • Two-way mirror — a store product and its marketplace listing stay in sync via a unified product form.
  • Delivery options, order fulfilment, and instant Telegram order alerts.
/api/store-managesm_ tablesheld-stockProductForm
💳 Wallet & Points
  • Managed in-app balance: users request top-ups (amount, method, reference); an admin reviews & approves, with a push notification on completion.
  • Full transaction ledger; balance is spendable at marketplace checkout.
  • Points accrue from activity & purchases and are shown beside the wallet balance — a lightweight rewards loop.
/api/wallettop-up approvalFCM push
✈️ Telegram Mini App & Broadcast
  • The whole site runs inside Telegram — ready() / expand(), native BackButton sync, theme colors, and disabled vertical-swipe so reels scroll cleanly.
  • Broadcast: SuperAdmin posts selected products & reels to a Telegram channel as photo cards with action buttons.
  • Buttons use ?startapp= deep links that open the Mini App directly on the exact product or reel.
telegram-web-app.jsBot API sendPhotostartapp deep links
📣 Reels Advertising
  • Native sponsored slides interleaved into the feed every N reels, with a "Sponsored" badge.
  • Metered billing: cost-per-view and cost-per-click deducted from the campaign budget in real time.
  • Campaigns auto-pause at 80% / exhausted budget; admins approve before anything goes live.
reels_ads/api/reels/adsCPV · CPCReelAdSlide
🛡️ SuperAdmin Suite
  • Fixed-sidebar dashboard with gradient stat cards and multi-select tools.
  • 15 modules: Overview, Vendors, Packages, Listings, Reports, Reels, Reels Ads, Top-ups, Users, Music, Reel Categories, Product Ads, SEO, Telegram, Language.
  • Every route guarded by a superadmin JWT middleware; sessions bounce to login on expiry.
/api/superadmin/*requireSuperAdminsaFetch
🌐 Bilingual (Khmer) & Platform
  • One-tap 🇬🇧/🇰🇭 flag switches the whole UI to Khmer via a runtime translation layer (machine-translated & cached), skipping names & brand marks.
  • Native apps (iOS + Android via Capacitor) with FCM push; installable PWA with offline shell.
  • Advanced SEO: server-side OG, JSON-LD, dynamic sitemaps, robots & IndexNow across Google, Bing, Yahoo, Baidu & Yandex.
  • Auth: phone login via Telegram Gateway OTP with SMS fallback.
i18n.jsxCapacitor 8Service Workerog.jsIndexNow